أضافة تأثير تحميل المدونة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

ديسمبر 15, 2017

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

السلام عليكم مرحبا بكم في مدونة الخبير عامر بشير اليوم اقدم لكم تأثير تحميل بشكل جديد وسبقى ونشرت تأثيرات اخرى يمكنك الدخول لها من هنا

1. أضافة تأثير تحميل المدونة على شكل باخرة في البحر (عمل Loader انتظار تحميل الصفحة)
2. أضافة تأثير تحميل المدونة على شكل بطارية (عمل Loader انتظار تحميل الصفحة)
3. أضافة تأثير تحميل المدونة على شكل سبنر (عمل Loader انتظار تحميل الصفحة)
4. أضافة تأثير تحميل المدونة على شكل شحنة (عمل Loader انتظار تحميل الصفحة)
5. أضافة تأثير تحميل المدونة على شكل بلايستيشن 4 ps4 (عمل Loader انتظار تحميل الصفحة)

الان إبحث على  وضع هذا الكود فوقه

<script> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script> <style> div#loading-abdoutechnologie { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background:#030303; width: 100%; height: 100%; } svg { display: none; } .blobs { -webkit-filter: url(#goo); filter: url(#goo); width: 300px; height: 300px; position: relative; overflow: hidden; border-radius: 70px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; text-align: center; margin-right: 39%; margin-top: 15%; } .blobs .blob-center { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; background: #FFF200; top: 50%; left: 50%; width: 30px; height: 30px; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); -webkit-animation: blob-grow linear 3.4s infinite; animation: blob-grow linear 3.4s infinite; border-radius: 50%; box-shadow: 0 -10px 40px -5px #FFF200; } .blob { position: absolute; background: #FFF200; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; -webkit-animation: blobs ease-out 3.4s infinite; animation: blobs ease-out 3.4s infinite; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); -webkit-transform-origin: center top; transform-origin: center top; opacity: 0; } .blob:nth-child(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .blob:nth-child(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .blob:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .blob:nth-child(4) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .blob:nth-child(5) { -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes blobs { 0% { opacity: 0; -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%); transform: scale(0) translate(calc(-330px - 50%), -50%); } 1% { opacity: 1; } 35%,65% { opacity: 1; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); } 99% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(0) translate(calc(330px - 50%), -50%); transform: scale(0) translate(calc(330px - 50%), -50%); } } @keyframes blobs { 0% { opacity: 0; -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%); transform: scale(0) translate(calc(-330px - 50%), -50%); } 1% { opacity: 1; } 35%,65% { opacity: 1; -webkit-transform: scale(0.9) translate(-50%, -50%); transform: scale(0.9) translate(-50%, -50%); } 99% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(0) translate(calc(330px - 50%), -50%); transform: scale(0) translate(calc(330px - 50%), -50%); } } @-webkit-keyframes blob-grow { 0%, 39% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } 40%, 42% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 43%, 44% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 45%, 46% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 47%, 48% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 52% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 54% { -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%); transform: scale(1.7, 1.6) translate(-50%, -50%); } 58% { -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%); transform: scale(1.8, 1.7) translate(-50%, -50%); } 68%, 70% { -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%); transform: scale(1.7, 1.5) translate(-50%, -50%); } 78% { -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%); transform: scale(1.6, 1.4) translate(-50%, -50%); } 80%, 81% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 82%, 83% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 84%, 85% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 86%, 87% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 90%, 91% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 92%, 100% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } } @keyframes blob-grow { 0%, 39% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } 40%, 42% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 43%, 44% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 45%, 46% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 47%, 48% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 52% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 54% { -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%); transform: scale(1.7, 1.6) translate(-50%, -50%); } 58% { -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%); transform: scale(1.8, 1.7) translate(-50%, -50%); } 68%, 70% { -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%); transform: scale(1.7, 1.5) translate(-50%, -50%); } 78% { -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%); transform: scale(1.6, 1.4) translate(-50%, -50%); } 80%, 81% { -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%); transform: scale(1.5, 1.4) translate(-50%, -50%); } 82%, 83% { -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%); transform: scale(1.4, 1.3) translate(-50%, -50%); } 84%, 85% { -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%); transform: scale(1.3, 1.2) translate(-50%, -50%); } 86%, 87% { -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%); transform: scale(1.2, 1.1) translate(-50%, -50%); } 90%, 91% { -webkit-transform: scale(1, 0.9) translate(-50%, -50%); transform: scale(1, 0.9) translate(-50%, -50%); } 92%, 100% { -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); } } </style>


الان إبحث على  وضع هذا الكود اسفله

<div id='loading-abdoutechnologie'> <!-- Loader --><div class="blobs"> <div class="blob-center"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div><div class="blob"></div></div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" /> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feblend in="SourceGraphic" in2="goo" /> </filter> </defs></svg></div>

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2017/12/loader.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2017/12/loader.html">أضافة تأثير تحميل المدونة (عمل Loader انتظار تحميل الصفحة) كتبها: المدون التقني - الخبير عامر بشير</a>