بعد التحية والسلام فى السابق كان اضافات اشكال تحميل المواقع عبارة عن صورة متحركة وكان ذلك يثقل من سرعة تحميل المدونة ام اليوم ومع تطور البرمجة اصبح هناك العديد من الاشكال التى تعطى جمالاً واحترافية لموقعك ولكن عبر 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>
أكثر من رائع شكرا لك أتمني ان تعطيني أشكال أكثر للتواصل
ردحذفhttps://www.facebook.com/mostafayasser.elsafty