![[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsKajTZpsRWSwijDNPzZWU4y0frb-IeMOo9hyoe0vwzDj0lQabogU-NRKEgoLOLgK_oWpbbZRQ7PldV0kBGlWm_E0UdvJhSwujBra9u_TIFyhs8b8fgeaRXhuU5kfvTadX9jY4_6jGTOV/s72-c/Untitled-232.png)
 |
| تأثير انتظار تحميل الصفحة Loading Spinners |
بسم الله الرحمن الرحيم
والصلاة والسلام على رسول الله صلى الله عليه وسلم
السلاك عليكم احبتي
تأثير انتظار تحميل الصفحة Loading Spinners
مثال مباشر : من هنا
طريقة التركيب :
ابحث في قالبك عن <body> وضع الكود الذي تختار تحته.
الشكل الاول : الكود :
<div id="loader">
<div class="spinner">
<div class="spinner-inner"></div>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type="text/javascript">
$(window).load(function () {
setTimeout(function () {
$(".spinner").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.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}.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>
الشكل الثاني : الكود :
<div id='loader'>
<div class="wrap">
<div class="bg">
<div class="loading">
<span class="title">loading...</span>
<span class="text"><data:blog.title/></span>
</div> </div></div></div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".wrap").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>#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}}.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}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.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}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.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>
الشكل الثالث : الكود :
<div id='loader'>
<div class='preload-juggle'>
<div class='ball'></div>
<div class='ball'></div>
<div class='ball'></div>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".preload-juggle").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>
#loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000}
.preload-juggle {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}
.preload-juggle 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-juggle div:nth-child(1) {animation-delay: -0.7s;}
.preload-juggle 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>
الشكل الرابع : الكود :
<div id='loader'>
<div class="spinner"></div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".spinner").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner{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-wiggle 1.2s infinite}@keyframes spinner-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:before,.spinner: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-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-fade 1.2s linear infinite}.spinner:before{border-top-color:#66e5ff}.spinner:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>
الشكل الخامس : الكود :
<div id='loader'>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".balls").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls: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>
بلوجر بالعربي
بلوجر سعوديه
بلوجر ولاء
بلوجر اسيا
بلوجر فاشن
بلوجر عربي
بلوجر مكياج
بلوغرانا
بلوجر طبخ
بلوجر هيا
بلوجرام
بلوجر مجاني
بلوجر محمد النخلاوى
بلوجر مدونات
بلوجر معنا احلى
بلوجر من الالف الى الياء
بلوجر موبايل
بلوجر معرب
بلوجر ممدوح الصردى
بلوجر مجربة
بلوجر للاندرويد
بلوجر لطيفه الشامسي
بلوجر للموبايل
بلوجر للمدونات
بلوجر للصور
بلوجر للبلاك بيري
بلوجر للكبار
بلوجر للبيع
بلوجر للايفون
بلوجر للمبتدئين
بلوجر قورجس
بلوجر قوالب
بلوجر قوالب احترافية
بلوجر قوقل
بلوجر قوالب معربة
بلوجر قصص
بلوجر قطريات
بلوجر قطريه
قوالب بلوجر معربة 2013
قوالب بلوجر معربة احترافية
بلوجر فيس
بلوجر فيس العرب
بلوجر فساتين
بلوجر فوتوشوب
بلوجر فيديو
بلوجر فيسبوك
بلوجر فتاة
بلوجر فيديوهات
بلوجر فتحة
بلوجر غرائب
جوجل بلوجر
غلاف بلوجر
قوالب بلوجر غير معربة
بلوجر ضحية غلطه
قالب بلوجر غريب
قالب بلوجر غامق
بلوجر صفحة واحدة
صفحات بلوجر
صفحة بلوجر
صحيفة بلوجر
صنع بلوجر
قالب بلوجر صفحة واحدة
قوالب بلوجر صديقة لمحركات البحث
قالب بلوجر صحيفة
قالب بلوجر صفحة فارغة
قالب بلوجر صديق لمحركات البحث
ذؤيب بلوجر
قالب بلوجر ذهبي
بلوجر
بلجرشي
بلوراي
بلورة
بلجراد
بلوجر حمد فيديو
بلوجر حصري اعدادي
بلوجر حياتي
بلوجر حب
بلوجر حيدر الغزالي
بلوجر حكاوينا
بلوجر حريم السلطان
بلوجر حذف مدونتى
حلول بلوجر
حساب بلوجر
بلوجر جوجل
بلوجر جوال
بلوجر جوجل بلس
جديد بلوجر
جدول بلوجر
جريدة بلوجر
جافا بلوجر
قوالب بلوجر جاهزة
اضافات بلوجر جديدة
مدونات بلوجر جاهزة
ثيمات بلوجر
ثيمات بلوجر معربة
ثيم بلوجر
ثيمات بلوجر مجانية
ثغرة بلوجر
ثغرات بلوجر
ثيمات بلوجر 2013
قالب بلوجر ثقافي
قالب بلوجر ثلاثي الابعاد
قوالب بلوجر ثلاثية الابعاد
بلوجر بنات
بلوجر بنات الكويت
بلوجر بالعربية
بلوجر بحث
برنامج بلوجر
بيت بلوجر
مدونة بلوجر بالعربي
بلوجر فيس بوك
قالب بلوجر بسيط
ربط دومين بي بلوجر
بلوجر اميره
بلوجر الكويت
بلوجر اسال مجرب
بلوجر ارتوس
بلوجر اسيا الكويتيه
بلوجر العربي
بلوجر احترافي
بلوجر العاب
بلوجر ام ووردبريس
بلوجر كويتيات
بلوجر نهى نبيل
بروجر محمد النخلاوى
بلوجر سوفت
قالب بلوجر 15
404 بلوجر
قالب بلوجر 4youtech
كود 404 بلوجر
خطأ 404 بلوجر
عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.
معلومات عن التدوينة
صورة التدوينة
عنوان التدوينة :تأثير انتظار تحميل الصفحة Loading Spinners
ملخص التدوينة:
تأثير انتظار تحميل الصفحة Loading Spinners بسم الله الرحمن الرحيم والصلاة والسلام على رسول الله صلى الله عليه وسلم السلاك عليكم احبت...
تاق :
هل تم بيع المدونه ؟ ج4
ردحذفلا ياغالي , لاكن انقطعت لفتره ج2
حذفاهلا بعودتك د2
حذفالحمد الله على السلامه ياعبد الله طولت عن التدوين
ردحذفالله يسلمك ويسعدك د1
حذفج1
ردحذفمرحبا بك :)
ت1 شكرا لك.
حذفردت لي روحي بعودتك
ردحذفد1 ج2 شكراَ لك ياغالي
حذفهناك خطا الاكواد يجب اضافتها تحت الوسم body وليس فوقه ..
ردحذفشكرا ت1
شكراً على التنبيه تم .
حذف