اضافة تأثيرات التحميل rotate spinner لمدونتك بأشكال رائعه

تأثيرات التحميل أو preloading effect ، rotate spinner، transparent spinner ، cool spinners وذلك لمدونات بلوجر.

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

هل تؤثر على سرعة المدونه ؟

الاجابه لا لانها صور خفيفه جدا SVG ومصممه بأكواد CSS ولايستخدم فيها تنسيق الصور العاديه مثل ( JPG أو PNG ... الخ ) والتى تشغل حيزا بحمل معين اثناء التحميل ممايؤثر فى سرعة الموقع .

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

1- قم بالدخول للوحة تحكم مدونتك ثم المظهر ثم تعديل HTML

2- من خلال القالب قم بالبحث بواسطة الأمر التالى CTRL+F عن

</body> أو &lt;!--</body>--&gt;&lt;/body&gt;

فوقه مباشرة ضع الــ jQuery التالى :

<script type='text/javascript'>

//<![CDATA[

// Preloader

$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});

//]]>

</script>

3- قم بالبحث عن

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

4- قم بالبحث عن

</head> أو &lt;/head&gt;&lt;!--<head/>--&gt;

قبله مباشرة ضع كود 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: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>

ثم قم بحفظ العمل وشاهد النتيجه ....

بعض الأشكال الأخرى :-

طريقة التركيب هى أن تكرر الخطوات أرقام 3 و 4

1- Dot Bounace

HTML

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

CSS

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

2- Runnung dot

HTML

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

CSS

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

3- Circle

HTML

<div id='preloader'>

<div class='spinner'>

  <div class='inner one'></div>

  <div class='inner two'></div>

  <div class='inner three'></div>

</div>

</div>

CSS

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

4- Reversed Dot

HTML

<div id='preloader'>

<div class='spinner'>

<ul class='loading reversed'>

      <li></li>

      <li></li>

      <li></li>

    </ul>

</div>

</div>

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>

5- Google Chrome

HTML

<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

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

اتمنى أن أكون وفقت فى طرح موضوع ذو فائده لك
مع تمنياتى لك بالتوفيق ... والى شرح آخر قادم
the Source of codes
www.arlinadzgn.com

تعديل المقال

ديب لاب | DEEP LAB

اضافة تأثيرات التحميل rotate spinner لمدونتك بأشكال رائعه

تأثيرات التحميل أو preloading effect ، rotate spinner، transparent spinner ، cool spinners وذلك لمدونات بلوجر.

هل تؤثر على سرعة المدونه ؟

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

1- قم بالدخول للوحة تحكم مدونتك ثم المظهر ثم تعديل HTML

2- من خلال القالب قم بالبحث بواسطة الأمر التالى CTRL+F عن

3- قم بالبحث عن

4- قم بالبحث عن

بعض الأشكال الأخرى :-

1- Dot Bounace

2- Runnung dot

3- Circle

4- Reversed Dot

5- Google Chrome

مقالات قد تهمك

أقسام الوصول السريع ( مربع البحث )

اضافة تأثيرات التحميل rotate spinner لمدونتك بأشكال رائعه

تأثيرات التحميل أو preloading effect ، rotate spinner، transparent spinner ، cool spinners وذلك لمدونات بلوجر.

هل تؤثر على سرعة المدونه ؟

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

1- قم بالدخول للوحة تحكم مدونتك ثم المظهر ثم تعديل HTML

2- من خلال القالب قم بالبحث بواسطة الأمر التالى CTRL+F عن

3- قم بالبحث عن

4- قم بالبحث عن

بعض الأشكال الأخرى :-

1- Dot Bounace

2- Runnung dot

3- Circle

4- Reversed Dot

5- Google Chrome

مقالات قد تهمك