إنشاء تأثيرات Loader احترافية علي صفحة بلوجر

هناك العديد من الطرق لتجميل مظهر المدونة، إحداها هي تثبيت تأثير التحميل المسبق، أو المعروف باسم تأثير تحميل صفحة بلوجر .

سيكون تأثير التحميل نشطًا عند تحميل صفحة المدونة. ويعطي الانطباع كما لو أن المدونة التي نزورها تستغرق وقتًا طويلاً جدًا للتحميل. سيختفي تأثير التحميل المثبت على المدونة بمجرد تحميل الصفحة بالكامل.

لن يؤثر تثبيت تأثيرات التحميل على صفحات بلوجر على سرعة تحميل مدونتك، وذلك لأن التأثيرات المستخدمة تستخدم CSS وSVG فقط دون إدراج صور.

هناك العديد من خيارات تأثير التحميل التي سأشاركها هذه المرة، مع كل كود CSS وHTML. لذلك يمكنك الاختيار حسب رغبتك. حسنًا، لندخل في صلب الموضوع مباشرة:

تثبيت تأثير التحميل على صفحة بلوجر

JQuery 1

أولاً، تقوم بتثبيت Js في القالب، ولكن إذا كان إصدار JQuery الموجود في القالب الخاص بك هو نفس إصدار JQuery أدناه، فلن تحتاج إلى تغييره. إذا كان مختلفًا، يرجى استبداله بإصدار مكتبة JQuery 1.7.1 أدناه:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

js 2

لا يزال موجودًا في لوحة تحكم بلوجر

حدد السمة تحرير HTML

أدخل الكود التالي فوق وسم الإغلاق </body>

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

html 3

الخطوة التالية هي إضافة كود HTML أدناه أسفل علامة الفتح <body> مباشرة

<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>

معاينة

أما بالنسبة لخيارات تأثير التحميل الأخرى، يمكنك أن تقرر بنفسك تأثير التحميل الذي تفضله. لدي بعض خيارات تأثير التحميل المثيرة للاهتمام المتاحة أدناه، قم بالتثبيت كما هو مذكور أعلاه، كل ما تحتاجه هو تغيير HTML وCSS لاستبدال أو استخدام تأثيرات التحميل الأخرى. لا حاجة لإعادة إضافة كود JQuery.

النمط الثاني

html 1

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

css 2

<style type='text/css'><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>

معاينة

النمط الثالث

html 1

<div id="preloader">
<div class="spinner" id="container">
  <div id="loader"></div>  
</div>
</div>

css 2

<style type='text/css'><style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)}
#loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)}
@keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}}
</style>

معاينة

النمط الرابع

html 1

 <div id="preloader">
<div class="spinner">
  <span class="ball-1"></span>
  <span class="ball-2"></span>
  <span class="ball-3"></span>
  <span class="ball-4"></span>
  <span class="ball-5"></span>
  <span class="ball-6"></span>
  <span class="ball-7"></span>
  <span class="ball-8"></span>
</div>
</div>

css 2

<style type='text/css'><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:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
</style>

معاينة

النمط الخامس

html 1

  <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>

css 2

<style type='text/css'><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>

معاينة

النمط السادس

html 1

<div id="preloader">
<div id="loader">
  <span class="spinner"></span>
</div>
</div>

css 2

<style type='text/css'><style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{position:absolute;top:50%;left:50%;margin:-20px -50px;height:30px;width:30px;margin:auto;border:5px solid rgba(60,60,180,0.45);border-top:5px solid rgb(60,60,180);border-radius:50%;animation:rotate 1s infinite linear}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>

معاينة

النمط السابع

html 1

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='html'>
  <pre style='white-space: pre-wrap; max-height: none;'><div id='preloader'>
<div class='spinner'>
  <div class='loader'>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
  </div>
</div>
</div></pre>
</div>

css 2

<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:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-dot:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-dot:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-dot:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-dot:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
</style>

معاينة

هذه هي الطريقة لإنشاء تأثيرات تحميل مثيرة للاهتمام على بلوجر . نأمل أن يتم تطبيقه على مدونتك وشكرا لكم على الزيارة.

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

إنشاء تأثيرات Loader احترافية علي صفحة بلوجر

تثبيت تأثير التحميل على صفحة بلوجر

النمط الثاني

النمط الثالث

النمط الرابع

النمط الخامس

النمط السادس

النمط السابع

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

شرح خاصية background-image مع استخدام عدة صور خلفية

كيفية إنشاء صندوق ملاحظات ملون على مدونة

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

عمل أداة تحويل الأكواد إلى تنسيق آمن باستخدامHTML وCss

طريقة حذف الرمز ?m=1 في رابط مدونتك أو موقعك على بلوجر

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار