أجمل 5 إضافات تأقير التحميل على صفحات البلوجر
احدث إضافات التحميل اقدمها لكم
ما يميز شكل المدونة عن الأخرى , هي الإضافات و التعديلات و التميز و الإختلاف ..
إضافة تأثير تحميل المدونة لمدونات بلوجر , إضافة مميزة , خفيفة و لا تأثر في سرعة مدونتك كما أنها متوافقة مع جميع المتصفحات و الأجهزة.
إضافة إلى أنها تجعل الزائر مهتما أكثر من ذي قبل لقراءة التدوينة أو مشاهدة الموقع .. فلو كانت تحميل مدونتك بطيئا , فالزئر سيملّ
من الإنتظار أما صفحة بيضاء ..!
اليوم جلبت لكم اضافات التحميل جديدة وحصرية فقط علي مدونة هلا تك وهي اضافة تاثير التحميل بشكل احترافي وهو يشبه شكل ولكن هذا الشكل جيد وبالالوان ايضا وسريع وجميل والوان مريحة للعين ويجذب الزوار لموقعك والان نتقل الي
ما يميز شكل المدونة عن الأخرى , هي الإضافات و التعديلات و التميز و الإختلاف ..
إضافة تأثير تحميل المدونة لمدونات بلوجر , إضافة مميزة , خفيفة و لا تأثر في سرعة مدونتك كما أنها متوافقة مع جميع المتصفحات و الأجهزة.
إضافة إلى أنها تجعل الزائر مهتما أكثر من ذي قبل لقراءة التدوينة أو مشاهدة الموقع .. فلو كانت تحميل مدونتك بطيئا , فالزئر سيملّ
من الإنتظار أما صفحة بيضاء ..!
اليوم جلبت لكم اضافات التحميل جديدة وحصرية فقط علي مدونة هلا تك وهي اضافة تاثير التحميل بشكل احترافي وهو يشبه شكل ولكن هذا الشكل جيد وبالالوان ايضا وسريع وجميل والوان مريحة للعين ويجذب الزوار لموقعك والان نتقل الي
المعاينة و شرح تركيبها
الأضافة الأولى
نضع هذا الكود أسفل الوسم <body مباشرة
<div class='preloade'> <div class='container'> <div class='noters-blogo'/> <div class='noters-blogo'/> <div class='noters-blogo'/> <div class='noters-blogo'/> <div class='noters-blogo'/> </div> </div>
نضع هذا الكود فوق الوسم ]]></b:skin> مباشرة.
:root { --duration: 1.5s; --container-size: 250px; --box-size: 33px; --box-border-radius: 15%; } .noters-blogo { width: var(--box-size); height: var(--box-size); position: relative; display: block; transform-origin: -50% center; border-radius: var(--box-border-radius); .noters-blogo:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: lightblue; border-radius: var(--box-border-radius); box-shadow: 0px 0px 10px 0px rgba(#1C9FFF, 0.4); } &:nth-child(1) { animation: slide var(--duration) ease-in-out infinite alternate; &:after{ animation: color-change var(--duration) ease-in-out infinite alternate; } } @for $i from 1 to 5 { &:nth-child(#{$i + 1}) { animation: flip-#{$i} var(--duration) ease-in-out infinite alternate; &:after{ animation: squidge-#{$i} var(--duration) ease-in-out infinite alternate; } } } &:nth-child(2):after{ background-color: #1C9FFF; } &:nth-child(3):after{ background-color: #1FB1FD; } &:nth-child(4):after{ background-color: #22C7FB; } &:nth-child(5):after{ background-color: #23D3FB; } } @keyframes slide { 0% { background-color: #1795FF; transform: translatex(0vw); } 100% { background-color: #23D3FB; transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25))); } } @keyframes color-change { 0% { background-color: #1795FF; } 100% { background-color: #23D3FB; } } @for $i from 1 to 5 { @keyframes flip-#{$i} { 0%, #{$i * 15}% { transform: rotate(0); } #{$i * 15 + 20}%, 100% { transform: rotate(-180deg); } } @keyframes squidge-#{$i} { #{$i * 15 - 10}% { transform-origin: center bottom; transform: scalex(1) scaley(1);} #{$i * 15}% { transform-origin: center bottom; transform: scalex(1.3) scaley(0.7);} #{$i * 15 + 10}%, #{$i * 15 + 5}% { transform-origin: center bottom; transform: scalex(0.8) scaley(1.4);} #{$i * 15 + 40}%, 100% { transform-origin: center top; transform: scalex(1) scaley(1);} #{$i * 15 + 25}% { transform-origin: center top; transform: scalex(1.3) scaley(0.7);} } }
الأضافة الثانية
نضع هذا الكود أسفل الوسم <body مباشرة.
نضع هذا الكود أسفل الوسم <body مباشرة.
<div class='centered'> <div class='blob-1'></div> <div class='blob-2'></div> </div>
نضع هذا الكود فوق الوسم ]]></b:skin> مباشرة.
.centered{ width:400px; height:400px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#000; filter: blur(10px) contrast(20); } .blob-1,.blob-2{ width:70px; height:70px; position:absolute; background:#fff; border-radius:50%; top:50%;left:50%; transform:translate(-50%,-50%); } .blob-1{ left:20%; animation:osc-l 2.5s ease infinite; } .blob-2{ left:80%; animation:osc-r 2.5s ease infinite; background:#0ff; } @keyframes osc-l{ 0%{left:20%;} 50%{left:50%;} 100%{left:20%;} } @keyframes osc-r{ 0%{left:80%;} 50%{left:50%;} 100%{left:80%;} }
الأضافة الثالثة
نضع هذا الكود أسفل الوسم <body مباشرة.
<div class='preload-blogo'> <div class='container'> <div class='dash uno'></div> <div class='dash dos'></div> <div class='dash tres'></div> <div class='dash cuatro'></div> </div> </div>
نضع هذا الكود فوق الوسم ]]></b:skin> مباشرة.
.dash { margin: 0 15px; width: 35px; height: 15px; border-radius: 8px; background: #FF2CBD; box-shadow: 0 0 10px 0 #FECDFF; } .uno { margin-right: -18px; transform-origin: center left; animation: spin 3s linear infinite; } .dos { transform-origin: center right; animation: spin2 3s linear infinite; animation-delay: .2s; } .tres { transform-origin: center right; animation: spin3 3s linear infinite; animation-delay: .3s; } .cuatro { transform-origin: center right; animation: spin4 3s linear infinite; animation-delay: .4s; } @keyframes spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(360deg); } 30% { transform: rotate(370deg); } 35% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes spin2 { 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 30% { transform: rotate(-180deg); } 35% { transform: rotate(-190deg); } 40% { transform: rotate(-180deg); } 78% { transform: rotate(-180deg); } 95% { transform: rotate(-360deg); } 98% { transform: rotate(-370deg); } 100% { transform: rotate(-360deg); } } @keyframes spin3 { 0% { transform: rotate(0deg); } 27% { transform: rotate(0deg); } 40% { transform: rotate(180deg); } 45% { transform: rotate(190deg); } 50% { transform: rotate(180deg); } 62% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 80% { transform: rotate(370deg); } 85% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes spin4 { 0% { transform: rotate(0deg); } 38% { transform: rotate(0deg); } 60% { transform: rotate(-360deg); } 65% { transform: rotate(-370deg); } 75% { transform: rotate(-360deg); } 100% { transform: rotate(-360deg); } }
الأضافة الرابعة
نضع هذا الكود أسفل الوسم <body مباشرة.
<!-- 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>
نضع هذا الكود فوق الوسم ]]></b:skin> مباشرة.
svg { display: none; } $bolb-color: #FFF200; // Loader .blobs { filter: url(#goo); width: 300px; height: 300px; position: relative; overflow: hidden; border-radius: 70px; transform-style: preserve-3d; // Blob center item .blob-center { transform-style: preserve-3d; position: absolute; background: $bolb-color; top: 50%; left: 50%; width: 30px; height: 30px; transform-origin: left top; transform: scale(.9) translate(-50%, -50%); animation: blob-grow linear 3.4s infinite; border-radius: 50%; box-shadow: 0 -10px 40px -5px $bolb-color; } } // Blob item .blob { position: absolute; background: $bolb-color; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; animation: blobs ease-out 3.4s infinite; transform: scale(.9) translate(-50%, -50%); transform-origin: center top; opacity: 0; // Set animation delay for each of type @for $i from 1 to 6 { &:nth-child(#{$i}) { animation-delay: $i * 0.2 + s; } } } // Keyframes variables $left: calc(-330px - 50%); $right: calc(330px - 50%); // Keyframes @keyframes blobs { 0% { opacity: 0; transform: scale(0) translate($left, -50%); } 1% { opacity: 1; } 35%,65% { opacity: 1; transform: scale(.9) translate(-50%, -50%); } 99% { opacity: 1; } 100% { opacity: 0; transform: scale(0) translate($right, -50%); } } @keyframes blob-grow { 0%, 39% { transform: scale(0) translate(-50%, -50%); } 40%, 42% { transform: scale(1, .9) translate(-50%, -50%); } 43%, 44% { transform: scale(1.2, 1.1) translate(-50%, -50%); } 45%, 46% { transform: scale(1.3, 1.2) translate(-50%, -50%); } 47%, 48% { transform: scale(1.4, 1.3) translate(-50%, -50%); } 52%{ transform: scale(1.5, 1.4) translate(-50%, -50%); } 54% { transform: scale(1.7, 1.6) translate(-50%, -50%); } 58% { transform: scale(1.8, 1.7) translate(-50%, -50%); } 68%, 70% { transform: scale(1.7, 1.5) translate(-50%, -50%); } 78% { transform: scale(1.6, 1.4) translate(-50%, -50%); } 80%, 81% { transform: scale(1.5, 1.4) translate(-50%, -50%); } 82%, 83% { transform: scale(1.4, 1.3) translate(-50%, -50%); } 84%, 85% { transform: scale(1.3, 1.2) translate(-50%, -50%); } 86%, 87% { transform: scale(1.2, 1.1) translate(-50%, -50%); } 90%, 91% { transform: scale(1, .9) translate(-50%, -50%); } 92%, 100% { transform: scale(0) translate(-50%, -50%); } }
الأضافة الخامسة
نضع هذا الكود أسفل الوسم <body مباشرة.
<!-- Floating Loader --> <div class="loader"></div> <div class="shadow"></div> <!-- Like what you see? why not visit my website for more awesome work --> <div class="logo"> <a href="https://mariodesigns.co.uk/" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/MDlogo.svg" alt="Mario Designs"></a> </div>
نضع هذا الكود فوق الوسم ]]></b:skin> مباشرة.
// Color variables $main : #FFF5A5; $secundary : #FFD4DA; $terchiary : #99D2E4; // animation keyframes @keyframes mainAnimation { 0% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { width: 50px; transform: translateX(0px) translateY(0px) rotate(0deg); } 40% { width: 150px; transform: translateX(-50px) translateY(0px) rotate(0deg); } 60% { width: 150px; transform-origin: bottom right; transform: translateX(-150px) translateY(0px) rotate(90deg); } 80% { width: 50px; transform: translateX(-25px) translateY(0px) rotate(90deg); } 100% { width: 50px; transform: translateX(-50px) translateY(0px) rotate(90deg); } } @keyframes secundaryAnimation { 0% { transform: translateX(0px) translateY(0px) rotate(0deg); } 20% { transform: translateX(0px) translateY(0px) rotate(180deg); } 40% { transform: translateX(0px) translateY(0px) rotate(180deg); } 60% { transform: translateX(0px) translateY(0px) rotate(0deg); } 80% { transform: translateX(0px) translateY(0px) rotate(0deg); } 100% { transform: translateX(0px) translateY(0px) rotate(180deg); } } @keyframes shadowAnimation { 0% { width: 150px; transform: translateX(-25px) translateY(0px) rotate(0deg); } 20% { width: 75px; transform: translateX(37.5px) translateY(0px) rotate(0deg); } 40% { width: 200px; transform: translateX(-25px) translateY(0px) rotate(0deg); } 60% { width: 75px; transform: translateX(37.5px) translateY(0px) rotate(0deg); } 80% { width: 75px; transform: translateX(37.5px) translateY(0px) rotate(0deg); } 100% { width: 150px; transform: translateX(-25px) translateY(0px) rotate(0deg); } } @keyframes float { 0% { top: 50%; } 50% { top: 51%; } 100% { top: 50%; } } // Styling html, body { height: 100%; } body { position: relative; background: rgb(153,210,228); background: linear-gradient(135deg, rgb(153,210,228) 0%,rgb(255,212,218) 100%); } .loader { position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; background-color: $main; transform: translateX(0px) translateY(0px) rotate(0deg); animation: mainAnimation 2.6s ease 0s infinite forwards; z-index: 2; &:after { content: ''; display: inline-block; position: absolute; width: 50px; height: 50px; top: 0; left: -50px; background-color: $main; transform-origin: top right; transform: translateX(0px) translateY(0px) rotate(0deg); animation: secundaryAnimation 2.6s ease 0s infinite forwards; } } .shadow { position: absolute; width: 100px; height: 10px; top: 50%; left: 50%; margin-top: 50px; margin-left: -75px; border-radius: 50%; background-color: #95a5a6; transform: translateX(0px) translateY(0px) rotate(0deg); animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards; z-index: 1; } // MD Logo - !click to see more awesome work! .logo { position: absolute; bottom: 20px; left: 50%; width: 42px; height: 42px; padding: 12px 5px; margin-left: -21px; box-sizing: border-box; background-color: white; border-radius: 50%; transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); &:hover { transform: scale(1.4); } img { width: 100%; height: auto; margin: 0 auto; } }
و شكرا
إرسال تعليق