بــســم الله الرحمن الرحيم
((ولا تحسبن الله غافلا عما يعمل الظالمون
إنم يؤخرهم ليوم تشخص فيه الأبصار مهطعين
مقنعي رءوسهم لا يرتد إليهم طرفهم وأفئدتهم هواء))
صدق الله العظيم
اهلاً بكم زوار ومتابعي المدونة الكرام
اليوم درسنا سنتعرف علي
تأثيرات ل صفحات جارى التحميل يعمل على تحميل العناصر فى مدونتك
وهى اضافة رائعة تضيف لمسة جمال فى مدونتك لها شكل رائع وديناميكي يذهل الزوار عند تحميل المدونة الخاصة بك , هذة التأثيرات بحد ذاتها لا مثيل لها , لذلك قمت باضافة هذة التأثيرات لمساعدة الاخرين بواسطة اكواد css و jQuery script .
طريقة التركيب + المعاينة
الشكل الاول :
طريقة التركيب :
ابحث عن الوسم <body> وضع الكود التالى اسفله :
<style type='text/css'>/* CSS Loader Pg */#loading {position: fixed;z-index: 50;top: 0;left: 0;width: 100%;height: 100%;background: #000 url(http://2.bp.blogspot.com/-vjd6yC8UfKE/VPA-93wUMDI/AAAAAAAADUo/DRbKHDfp41g/s1600/loading1.gif) no-repeat center;line-h eight: 350px; text-align: center;font-size: 36px;color: #353231;text-indent: -9999px;}.wwy #loading {display: none;}#progress-bar {position: absolute;top: 0;left: 0;background: #42BEF8;width: 0;height: 10px;}</style><script type='text/javascript'>(function($){$("html").removeClass("wwy");$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });$(window).load(function(){ $("#progress-bar").stop().animate({ width: "100%" },600,function(){ $("#loading").fadeOut("fast",function(){ $(this).remove(); }); });});})(jQuery);</script><div id='loading'><div id='progress-bar'></div></div>
الشكل الثاني :
لمعاينة الشكل ضع الكود في هدا الموقع وستري النتيجة
طريقة التركيب :
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>
2. ضع الشكل المختار أسفله
<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>
الشكل الثالث :
لمعاينة الشكل ضع الكود في هدا الموقع وستري النتيجة
طريقة التركيب :
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>
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>
الشكل الرابع :
لمعاينة الشكل ضع الكود في هدا الموقع وستري النتيجة
طريقة التركيب :
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>
2. ضع الشكل المختار أسفله
<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>
الشكل الخامس :
لمعاينة الشكل ضع الكود في هدا الموقع وستري النتيجة
طريقة التركيب :
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>
2. ضع الشكل المختار أسفله
<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>
الشكل السادس :
لمعاينة الشكل ضع الكود في هدا الموقع وستري النتيجة
طريقة التركيب :
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>
2. ضع الشكل المختار أسفله
<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>
الشكل السابع :
لمعاينة الشكل ضع الكود في هدا الموقع وستري النتيجة
طريقة التركيب :
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>
2. ضع الشكل المختار أسفله
<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>
اضافات جميلة
اتمني تعجبكم
بالتوفيق
اعلن هنا
0 التعليقات لموضوع "مجموعه من تاثيرات تحميل الصفحة loading باشكال متنوعه وجميله جدا جدا لاصحاب المدونات"
الابتسامات الابتسامات