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 () {$(".dabourphone-wrap").fadeOut("slow");setTimeout(function () {$("#dabourphone-loader").fadeOut("slow")}, 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 () { $(".preload-dabourphone").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: #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 () {$(".spinner-dabourphone").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: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 () {$(".balls-dabourphone").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:#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 () {$(".spinnery-dabourphone").fadeOut("slow");setTimeout(function () {$("#loader-dabourphone").fadeOut("slow")}, 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>
اعلان هنا 
شروحات برو 
اعلان هنا 
شاركنا تعليقاتك