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

اضافة تأثيرات التحميل 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
    ليست هناك تعليقات
    إرسال تعليق

    إرسال تعليق

    نموذج الاتصال
    الاسمبريد إلكترونيرسالة