اضافة تأثير تحميل خرافي V1

السلام عليكم ورحمة الله وبركاتة لعل كثير من المدونات علي منصة بلوجر الشهيرة تضيف تأثير لتحميل المدونة في هذة التدوينة سنعرض عليكم تأثير تحميل جديد بعض الشى بنسخته الاولى

صورة من التأثير

كما نري خلفية بالالوان جذور فلات خرافية

هل اعبجك التأثير؟!

الان مع اضافتة لمدونتك

ادخل الي القالب ثم Html

الان اضغط ctrl+f واكتب body>

وضع اسفلة هذا الكود

<script type='text/javascript'>
//<![CDATA[
jQuery(window).load(function() {
        // will first fade out the loading animation
$(".loading-overlay").delay(1000).fadeOut('slow');
})
//]]>
</script>

وضع اسفل هذا الكود كود اخر وهو هذا

<div class='loading-overlay text-center'>
<div class='loader'>
<div class='inner one'></div>
<div class='inner two'></div>
<div class="inner-two"></div>
<img alt='' src='' style="margin-top: 20px;"/>
<div class='inner three'></div>
</div>
</div>

والان ابحث عن </b:skin>

وضع فوقها هذا الكود

.loading-overlay {position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 99999;background: rgb(38, 52, 75);}
.loader {position: absolute;top: calc(50% - 32px);left: calc(50% - 32px);width: 64px;height: 64px;border-radius: 50%;perspective: 800px;}
.inner {position: absolute;box-sizing: border-box;width: 100%;height: 100%;border-radius: 50%;  }
.inner.one {left: 0%;top: 0%;animation: rotate-one 1s linear infinite;border-bottom: 3px solid #EFEFFA;}
.inner.two {right: 0%;top: 0%;animation: rotate-two 1s linear infinite;border-right: 3px solid #EFEFFA;}
.inner.three {right: 0%;bottom: 0%;animation: rotate-three 1s linear infinite;border-top: 3px solid #EFEFFA;}
@keyframes rotate-one {
0% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
100% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}}
@keyframes rotate-two {
0% {transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
100% {transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}}
@keyframes rotate-three {
0% {transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
100% {transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}}