خطوات التركيب
- أبحث عن الوسم <body>
وضع فوقه الكود التالى :
<style>إلى هنا انتهى موضوعنا اليوم دمتم فى رعاية الله 😃
#loader .planet_wraper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 7rem;
height: 7rem;
margin: auto;
border-radius: 50%;
}
#loader .planet_shadow {
background: -webkit-linear-gradient(top left, #2481b8 20%, #214b77);
background: -moz-linear-gradient(top left, #2481b8 20%, #214b77);
box-shadow: inset 0 -5px 10px rgba(22, 48, 64, 0.5), 0 0 1.5rem rgba(170, 194, 194, 0.3);
}
#loader .planet {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
animation: rotate 15s linear infinite;
overflow: hidden;
}
#loader .planet_wraper::before, .planet_wraper::after {
content: '';
display: block;
position: absolute;
border-radius: 50%;
box-shadow: 0 0.1rem 0.1rem rgba(170, 194, 194, 0.1), inset 0 -0.1rem 0.1rem rgba(170, 194, 194, 0.1);
animation: rotate 5s linear infinite;
}
#loader .planet_wraper::before {
top: -1.75rem;
left: -1.75rem;
width: 11rem;
height: 11rem;
animation-delay: 1s;
}
#loader .planet_wraper::after {
top: -2.5rem;
left: -2.5rem;
width: 15rem;
height: 15rem;
}
#loader .planet > * {
position: relative;
border-radius: 50%;
background-color: #20629b;
;
box-shadow: inset 1px 1px 5px #163040, 0 0 7px #63eed2 ;
opacity: 0.3;
}
#loader .crater_1 {
top: 2rem;
right: 1.5rem;
width: 0.75rem;
height: 0.75rem;
}
#loader .crater_2 {
top: -0.75rem;
right: 5rem;
width: 2.5rem;
height: 2.5rem;
transform: scaleY(0.8) rotateY(-20deg);
}
#loader .crater_3 {
top: 0.5rem;
right: 2rem;
width: 1.25rem;
height: 1.25rem;
}
#loader .crater_4 {
top: -1.5rem;
right: 3.5rem;
width: 0.5rem;
height: 0.5rem;
}
#loader .crater_5 {
top: 1.25rem;
right: 3.5rem;
width: 2rem;
height: 1.5rem;
}
@keyframes bg {
to { background-position: center 20rem; }
}
@keyframes rotate {
to { transform: rotate(360deg)}
}
#loader {;width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000; opacity: .96;
background-color: #163040;
background-image: url(http://rawgit.com/MohamedAbodia/dabourphone/master/circle.svg);
background-size: 20rem 20rem;
background-position: center 0;
animation: bg 20s linear infinite;
}
</style>
<div id='loader'>
<div class='planet_wraper planet_shadow'>
<div class='planet'>
<div class='crater_1'></div>
<div class='crater_2'></div>
<div class='crater_3'></div>
<div class='crater_4'></div>
<div class='crater_5'></div>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#loader").fadeOut(1e3)});
//]]>
</script>
كود الإضافة من موقع CodePen تم تطويره بواسطة مستر نت.
المصدر مستر نت
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).