6 أشكال من اضافة Pre loading


بعد التحية والسلام فى السابق كان اضافات اشكال تحميل المواقع عبارة عن صورة متحركة وكان ذلك يثقل من سرعة تحميل المدونة ام اليوم ومع تطور البرمجة اصبح هناك العديد من الاشكال التى تعطى جمالاً واحترافية لموقعك ولكن عبر Css وما يميز اضافة التحميل والبرمجة باكواد Css انها خفيفة ليس مثل سابقها لذلك احببت اليوم ان اشارك معكم 6 اشكال رائعة سوف تعطى موقعك شكلاً احترافيا ولن تؤثر على سرعة تحميله . 
شرح طريقة التركيب
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>

2. ضع الشكل المختار أسفله

الشكل 1

<div id="loader-dabourphone"><div class="dabourphone-spinner"><div class="dabourphone-spinner-inner"></div></div></div><script type="text/javascript">$(window).load(function () {setTimeout(function () {$(".dabourphone-spinner").fadeOut("slow");setTimeout(function () {$("#loader-dabourphone").fadeOut("slow")}, 1000)}, 1000)});</script> <style>#loader-dabourphone{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.dabourphone-spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.dabourphone-spinner,.dabourphone-spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.dabourphone-spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.dabourphone-spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>

الشكل 2

<div id='dabourphone-loader'><div class="dabourphone-wrap"><div class="bg"><div class="dabourphone-loading"> <span class="title">جارى التحميل ...</span><span class="text"><data:blog.title/></span></div></div></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(&quot;.dabourphone-wrap&quot;).fadeOut(&quot;slow&quot;);setTimeout(function () {$(&quot;#dabourphone-loader&quot;).fadeOut(&quot;slow&quot;)}, 1000)}, 1000)});</script> <style>#dabourphone-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.dabourphone-wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.dabourphone-loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.dabourphone-loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.dabourphone-loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.dabourphone-loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.dabourphone-loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

الشكل 3

<div id='loader-dabourphone'><div class='preload-dabourphone'><div class='ball-db'></div><div class='ball-db'></div><div class='ball-db'></div></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () { $(&quot;.preload-dabourphone&quot;).fadeOut(&quot;slow&quot;);setTimeout(function () {$(&quot;#loader-dabourphone&quot;).fadeOut(&quot;slow&quot;)}, 1000)}, 1000)});</script> <style> #loader-dabourphone {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000} .preload-dabourphone {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;} .preload-dabourphone div {position: absolute;width: 21px;height: 21px;border-radius: 10.5px;background: #1BBC9B;margin-top: 150px;margin-left: 150px;animation: juggle 2.1s linear infinite;} .preload-dabourphone div:nth-child(1) {animation-delay: -0.7s;} .preload-dabourphone div:nth-child(2) {animation-delay: -1.4s;} @keyframes juggle { 0% {transform: translateX(0px) translateY(0px);} 12.5% {transform: translateX(25px) translateY(-55px) scale(1.1);background: #36D7B7;} 25% {transform: translateX(50px) translateY(0px);animation-timing-function: ease-out;  } 37.5% {transform: translateX(25px) translateY(55px);} 50% {transform: translateX(0px) translateY(0px);} 62.5% {transform: translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function: ease-in; }  75% {transform: translateX(-50px) translateY(0px);animation-timing-function: ease-out;} 87.5% {transform: translateX(-25px) translateY(55px); } 100% {transform: translateX(0px) translateY(0px);} } </style>

الشكل 4

<div id='loader-dabourphone'><div class="spinner-dabourphone"></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(&quot;.spinner-dabourphone&quot;).fadeOut(&quot;slow&quot;);setTimeout(function () {$(&quot;#loader-dabourphone&quot;).fadeOut(&quot;slow&quot;)}, 1000)}, 1000)});</script> <style>#loader-dabourphone{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner-dabourphone{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-dabourphone-wiggle 1.2s infinite}@keyframes spinner-dabourphone-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner-dabourphone:before,.spinner-dabourphone:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-dabourphone-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-dabourphone-fade 1.2s linear infinite}.spinner-dabourphone:before{border-top-color:#66e5ff}.spinner-dabourphone:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-dabourphone-spin{100%{transform:rotate(360deg)}}@keyframes spinner-dabourphone-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>

الشكل 5

<div id='loader-dabourphone'><div class='balls-dabourphone'></div><div class='balls-dabourphone'></div><div class='balls-dabourphone'></div><div class='balls-dabourphone'></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(&quot;.balls-dabourphone&quot;).fadeOut(&quot;slow&quot;);setTimeout(function () {$(&quot;#loader-dabourphone&quot;).fadeOut(&quot;slow&quot;)}, 1000)}, 1000)});</script> <style>#loader-dabourphone{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls-dabourphone{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls-dabourphone:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls-dabourphone:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls-dabourphone:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls-dabourphone:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>

الشكل 6

<div id='loader-dabourphone'><div class='spinnery-dabourphone'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(&quot;.spinnery-dabourphone&quot;).fadeOut(&quot;slow&quot;);setTimeout(function () {$(&quot;#loader-dabourphone&quot;).fadeOut(&quot;slow&quot;)}, 1000)}, 1000)});</script> <style>#loader-dabourphone{width:100%;height:100%;overflow:hidden;margin:auto;position:fixed;top:0;left:0;bottom:0;right:0;z-index:99999;background-color:#2980B9}.spinnery-dabourphone{margin:auto;height:13px;text-align:center;position:absolute;top:0;left:0;bottom:0;right:0}.spinnery-dabourphone > div{width:18px;height:18px;background-color:#fff;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinnery-dabourphone .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinnery-dabourphone .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1.0)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);transform:scale(1.0)}}</style>

دبور فون

M.H.I

هناك 6 تعليقات:

  1. كم انت رائع يا رائع وكعادتك مجهودات جبارة وكد متناهي لامتاع وافادة محبيك
    اهلا بعودتي لمدونتي هههههه

    ردحذف
    الردود
    1. شكرا لك صديقى اتعلم لقد افتقدتك المدونة فى الفترة السابقة وكانت تتمنى عودتك لذلك واجبنا أن نشكرك على عودتك ونتمنى ان تكون بخير واحسن صحة ^_^

      حذف

نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊

أحدث الأخبار

10/recent