إضافة تأثيرات التحميل Rotate Spinner لمدونات بلوجر بأشكال رائعه

HAMED MOHAMED

18 نوفمبر 2021

(0)

إضافة تأثيرات التحميل Rotate Spinner لمدونات بلوجر بأشكال رائعه

اتيت لكم ب اضافات جميله تطفى طابع جمالى ومميز لقالب مدونتك تظهر وقت التحميل

وتختفى حين الانتهاء من تمام تحميل الصفحه مما يجعل من انتظار الزائر لثوانى ف تقلل

من معدل الارتداد لاننا كلنا نعرف ان دخول وخروج الزائر سريعا يؤثر على المدونه وخصوصا

بالنسه لترتيب مدونتك بالنسبه ل اليكسا ف معدل الارتداد يذهب بمدونتك الى ترتيب متدنى جدا

إضافة تأثيرات التحميل Rotate Spinner لمدونات بلوجر بأشكال رائعه

الاضافه رائعه وخفيفه جدا ولا تؤثر على سرعة المدونة نها صور خفيفه جدا SVG ومصممه بأكواد CSS

ولايستخدم فيها تنسيق الصور العاديه مثل ( JPG أو PNG او gif … الخ ) فكن مطمائن من ذلك

ويمكنك اختيار التأثير الذى اعجبك وتابع معى الشرحت لطريقة التركيب

طريقة التركيب

أذهب الى المدونه التى تريد التعديل عليها
ثم توجه الى المظهر ولا تنسى أن تحتفظ بنسخه أحطياطيه
ثم أضغط على تعديل HTML
ثم أضغط ctrl + f
ثم أبحث عن الوسم </body> أو </body>
فوقه مباشرة ضع الــ jQuery التالى


<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

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

الشكل الاول Google Chrome

قم بالبحث عن الوسم <body> أو <body expr:class='data:blog.pageType'>

ضع الكود التالى اسفله مباشرة


<div id='preloader'>
<div class='spinner'>
<div class='loader tri'></div>
<div class='loader tri2'></div>
<div class='loader tri3'></div>
<div class='loader tri4'></div>
<div class='loader circ'></div>
<div class='loader circ2'></div>
</div>
</div>

ثم قم بالبحث عن الوسم </head> أو </head>

فوقه مباشرة ضع الكود التالى


<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#ecf0f1;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.tri{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b4ff;width:0;z-index:2}
.tri2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde15;width:0;z-index:1}
.tri3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da158;border-bottom:0 solid transparent;width:0;z-index:1}
.tri4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea343f;border-bottom:0 solid transparent;width:0;z-index:2}
.circ{border:30px solid rgba(255,255,255,0.1)}
.circ2{border:25px solid #ffffff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);margin-top:30px;z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
</style>

الشكل الثانى Reversed Dot

قم بالبحث عن الوسم <body> أو <body expr:class='data:blog.pageType'>

ضع الكود التالى اسفله مباشرة


<div id='preloader'>
<div class='spinner'>
<ul class='loading reversed'>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>
</div>

ثم قم بالبحث عن الوسم </head> أو </head>

فوقه مباشرة ضع الكود التالى


<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{height:0;position:absolute;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b8ccd}}
</style>

الشكل الثالث Circle

قم بالبحث عن الوسم <body> أو <body expr:class='data:blog.pageType'>

ضع الكود التالى اسفله مباشرة


<div id='preloader'>
<div class='spinner'>
  <div class='inner one'></div>
  <div class='inner two'></div>
  <div class='inner three'></div>
</div>
</div>

ثم قم بالبحث عن الوسم </head> أو </head>

فوقه مباشرة ضع الكود التالى


<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#2c3e50;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{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)}}
</style>

الشكل الرابع Running dot

قم بالبحث عن الوسم <body> أو <body expr:class='data:blog.pageType'>

ضع الكود التالى اسفله مباشرة


<div id='preloader'>
<div id='loader' class='spinner'>
    <div id='d1'></div>
    <div id='d2'></div>
    <div id='d3'></div>
    <div id='d4'></div>
    <div id='d5'></div>
</div>
</div>

ثم قم بالبحث عن الوسم </head> أو </head>

فوقه مباشرة ضع الكود التالى


<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#55efc4;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{width:100px;height:40px;position:absolute;top:50%;left:50%;margin:-20px -50px}
#loader div{width:10px;height:10px;background:#FFF;border-radius:50%;position:absolute}
#d1{animation:animate 2s linear infinite}
#d2{animation:animate 2s linear infinite -.4s}
#d3{animation:animate 2s linear infinite -.8s}
#d4{animation:animate 2s linear infinite -1.2s}
#d5{animation:animate 2s linear infinite -1.6s}
@-webkit-keyframes animate{0%{left:100px;top:0}80%{left:0;top:0}85%{left:0;top:-10px;width:10px;height:10px}90%{width:20px;height:15px}95%{left:100px;top:-10px;width:10px;height:10px}100%{left:100px;top:0}}
</style>

الشكل الخامس Dot Bounce

قم بالبحث عن الوسم <body> أو <body expr:class='data:blog.pageType'>

ضع الكود التالى اسفله مباشرة


<div id='preloader'>
<div id='container' class='spinner'>
  <div id='dot'></div>
    <div class='step' id='s1'></div>
    <div class='step' id='s2'></div>
    <div class='step' id='s3'></div>
</div>
</div>

ثم قم بالبحث عن الوسم </head> أو </head>

فوقه مباشرة ضع الكود التالى


<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}
</style>

الشكل السادس Memasang

قم بالبحث عن الوسم <body> أو <body expr:class='data:blog.pageType'>

ضع الكود التالى اسفله مباشرة


<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>

ثم قم بالبحث عن الوسم </head> أو </head>

فوقه مباشرة ضع الكود التالى


<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>

وقم بحفظ القالب واذهب الى المدونه وشاهدالاضافه

هل اعجبك الموضوع :

كريزي كود - Crazy Code

القائمة الرئيسية

الصفحات

أخبار الرياضة

إضافة تأثيرات التحميل Rotate Spinner لمدونات بلوجر بأشكال رائعه

إضافة تأثيرات التحميل Rotate Spinner لمدونات بلوجر بأشكال رائعه

طريقة التركيب

الشكل الاول Google Chrome

الشكل الثانى Reversed Dot

الشكل الثالث Circle

الشكل الرابع Running dot

الشكل الخامس Dot Bounce

الشكل السادس Memasang

أخر المواضيع من قسم : اضافات

تعليقات

إرسال تعليق