For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

4 contoh Animasi Preloader CSS Bergerak

Kali ini saya akan memberikan informasi mengenai Animasi loading preloader lagi nih, yaitu Empat Animasi preloader yang dibuat dengan menggunakan CSS Terbaru 2021

Kalau kamu ahli kamu bisa mengembangkan Kode CSS Animasi preloader yang saya berikan ini untuk berbagai keperluan terutama pada situs blog untuk memperbagus tampilannya semakin keren

Sebagai informasi untuk menggunakan Atau memunculkan tampilan gunakan kode Html yang dimulai dari <div> Sampai kode </div> kamu bisa juga menggabungkan antara Kode CSS beserta html jika ingin menampilkannya pada halaman artikel atau saat menambahkan widget Html

Jika ingin mengbungkannya antara CSS dan kode html nya, gunakan kode <style></style> dan himpit kode CSS nya ditengah, seperti contoh perhatikan kode berikut

<style> kode CSS disini </style><div>Kode html nya disni</div>
Bagaimana sudah paham ya, tambahkan kode seperti contoh diatas

Oke kami akan menyajikan Tampilan Animasi preloader yang dibuat dengan menggunakan CSS berikut beserta kodenya

1. Loading Content


Berikut kode CSS pada Tampilan Animasi preloader diatas
.cssload-content {

 margin: auto;

 display: box;

  display: -o-box;

  display: -ms-box;

  display: -webkit-box;

  display: -moz-box;

 display: flex;

  display: -o-flex;

  display: -ms-flex;

  display: -webkit-flex;

  display: -moz-flex;

 box-orient: vertical;

  -o-box-orient: vertical;

  -ms-box-orient: vertical;

  -webkit-box-orient: vertical;

  -moz-box-orient: vertical;

 box-direction: normal;

  -o-box-direction: normal;

  -ms-box-direction: normal;

  -webkit-box-direction: normal;

  -moz-box-direction: normal;

 flex-direction: column;

  -o-flex-direction: column;

  -ms-flex-direction: column;

  -webkit-flex-direction: column;

  -moz-flex-direction: column;

 box-align: center;

  -o-box-align: center;

  -ms-box-align: center;

  -webkit-box-align: center;

  -moz-box-align: center;

 align-items: center;

  -o-align-items: center;

  -ms-align-items: center;

  -webkit-align-items: center;

  -moz-align-items: center;

 box-pack: center;

  -o-box-pack: center;

  -ms-box-pack: center;

  -webkit-box-pack: center;

  -moz-box-pack: center;

 justify-content: center;

  -o-justify-content: center;

  -ms-justify-content: center;

  -webkit-justify-content: center;

  -moz-justify-content: center;

}

.cssload-l1, .cssload-l2, .cssload-l3 {

 background: rgb(0,0,0);

 height: 5px;

 width: 29px;

 margin: 5px;

 animation: cssload-loading1 1.15s 0s infinite ease-in-out;

  -o-animation: cssload-loading1 1.15s 0s infinite ease-in-out;

  -ms-animation: cssload-loading1 1.15s 0s infinite ease-in-out;

  -webkit-animation: cssload-loading1 1.15s 0s infinite ease-in-out;

  -moz-animation: cssload-loading1 1.15s 0s infinite ease-in-out;

}

.cssload-l2 {

 animation: cssload-loading2 0.58s 0s infinite ease-in-out alternate;

  -o-animation: cssload-loading2 0.58s 0s infinite ease-in-out alternate;

  -ms-animation: cssload-loading2 0.58s 0s infinite ease-in-out alternate;

  -webkit-animation: cssload-loading2 0.58s 0s infinite ease-in-out alternate;

  -moz-animation: cssload-loading2 0.58s 0s infinite ease-in-out alternate;

}

.cssload-l3 {

 animation: cssload-loading1 1.15s 0s infinite ease-in-out reverse;

  -o-animation: cssload-loading1 1.15s 0s infinite ease-in-out reverse;

  -ms-animation: cssload-loading1 1.15s 0s infinite ease-in-out reverse;

  -webkit-animation: cssload-loading1 1.15s 0s infinite ease-in-out reverse;

  -moz-animation: cssload-loading1 1.15s 0s infinite ease-in-out reverse;

}

@keyframes cssload-loading1 {

 0% {

  transform: rotate(0deg);

 }

 50% {

  transform: rotate(180deg);

 }

 100% {

  transform: rotate(360deg);

 }

}

@-o-keyframes cssload-loading1 {

 0% {

  -o-transform: rotate(0deg);

 }

 50% {

  -o-transform: rotate(180deg);

 }

 100% {

  -o-transform: rotate(360deg);

 }

}

@-ms-keyframes cssload-loading1 {

 0% {

  -ms-transform: rotate(0deg);

 }

 50% {

  -ms-transform: rotate(180deg);

 }

 100% {

  -ms-transform: rotate(360deg);

 }

}

@-webkit-keyframes cssload-loading1 {

 0% {

  -webkit-transform: rotate(0deg);

 }

 50% {

  -webkit-transform: rotate(180deg);

 }

 100% {

  -webkit-transform: rotate(360deg);

 }

}

@-moz-keyframes cssload-loading1 {

 0% {

  -moz-transform: rotate(0deg);

 }

 50% {

  -moz-transform: rotate(180deg);

 }

 100% {

  -moz-transform: rotate(360deg);

 }

}

@keyframes cssload-loading2 {

 0% {

  transform: translateX(10px);

 }

 100% {

  transform: translateX(-10px);

 }

}

@-o-keyframes cssload-loading2 {

 0% {

  -o-transform: translateX(10px);

 }

 100% {

  -o-transform: translateX(-10px);

 }

}

@-ms-keyframes cssload-loading2 {

 0% {

  -ms-transform: translateX(10px);

 }

 100% {

  -ms-transform: translateX(-10px);

 }

}

@-webkit-keyframes cssload-loading2 {

 0% {

  -webkit-transform: translateX(10px);

 }

 100% {

  -webkit-transform: translateX(-10px);

 }

}

@-moz-keyframes cssload-loading2 {

 0% {

  -moz-transform: translateX(10px);

 }

 100% {

  -moz-transform: translateX(-10px);

 }

}

Kode HTML

Gunakan kode html berikut jika ingin menggunakannya

<div class="cssload-content">

 <div>

  <div class="cssload-l1"></div>

  <div class="cssload-l2"></div>

  <div class="cssload-l3"></div>

 </div>

</div>

2. Loading Coffee


Berikut kode CSS pada Tampilan Animasi preloader diatas
.cssload-coffee {
 text-align:left;
 height: 50px;
 width: 40px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 position: absolute;
 left: 50%;
 z-index: 999;
 background: linear-gradient(to bottom left, rgba(26,115,232,0.98), rgb(26,115,232));
  background: -o-linear-gradient(to bottom left, rgba(26,115,232,0.98), rgb(26,115,232));
  background: -ms-linear-gradient(to bottom left, rgba(26,115,232,0.98), rgb(26,115,232));
  background: -webkit-linear-gradient(to bottom left, rgba(26,115,232,0.98), rgb(26,115,232));
  background: -moz-linear-gradient(to bottom left, rgba(26,115,232,0.98), rgb(26,115,232));
}
.cssload-coffee:before {
 position: absolute;
 content: "";
 right: -15px;
 top: 5px;
 height: 24px;
 width: 10px;
 background: transparent;
 border: 5px solid rgb(26,115,232);
 border-left: 5px solid transparent;
 border-bottom: 5px solid rgb(26,115,232);
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 z-index: 1;
}
.cssload-coffee:after {
 position: absolute;
 content: "";
 width: 5px;
 height: 29px;
 background: rgb(0,0,0);
 border-radius: 4px;
 top: -29px;
 box-shadow: 34px 0px 0 rgb(0,0,0), 17.5px -15px 0 rgb(225,225,225);
 opacity: 1;
 animation: cssload-steam 3.45s ease infinite;
  -o-animation: cssload-steam 3.45s ease infinite;
  -ms-animation: cssload-steam 3.45s ease infinite;
  -webkit-animation: cssload-steam 3.45s ease infinite;
  -moz-animation: cssload-steam 3.45s ease infinite;
}



@keyframes cssload-steam {
 100% {
  top: -39px;
  background: rgb(238,238,238);
  box-shadow: 34px 0px 0 rgb(238,238,238), 17.5px -15px 0 rgb(0,0,0);
  opacity: 0.25;
 }
}

@-o-keyframes cssload-steam {
 100% {
  top: -39px;
  background: rgb(238,238,238);
  box-shadow: 34px 0px 0 rgb(238,238,238), 17.5px -15px 0 rgb(0,0,0);
  opacity: 0.25;
 }
}

@-ms-keyframes cssload-steam {
 100% {
  top: -39px;
  background: rgb(238,238,238);
  box-shadow: 34px 0px 0 rgb(238,238,238), 17.5px -15px 0 rgb(0,0,0);
  opacity: 0.25;
 }
}

@-webkit-keyframes cssload-steam {
 100% {
  top: -39px;
  background: rgb(238,238,238);
  box-shadow: 34px 0px 0 rgb(238,238,238), 17.5px -15px 0 rgb(0,0,0);
  opacity: 0.25;
 }
}

@-moz-keyframes cssload-steam {
 100% {
  top: -39px;
  background: rgb(238,238,238);
  box-shadow: 34px 0px 0 rgb(238,238,238), 17.5px -15px 0 rgb(0,0,0);
  opacity: 0.25;
 }
}

Kode HTML

Gunakan kode html berikut jika ingin menggunakannya

<div class="cssload-coffee"></div>

3. Loading Wrench

Berikut kode CSS pada Tampilan Animasi preloader diatas

.cssload-wrench {
 background: rgba(255,255,255,0.98);
 color: rgb(26,115,232);
 font: 16px "Helvetica Neue", sans-serif;
 line-height: 97px;
 margin: 97px auto;
 text-align: center;
 position: relative;
 width: 100%;
 display: block;
 height: 14px;
 position: relative;
 width: 14px;
}
.cssload-wrench::before, .cssload-wrench::after {
 position: absolute;
 font-smoothing: none;
  -o-font-smoothing: none;
  -ms-font-smoothing: none;
  -webkit-font-smoothing: none;
  -moz-font-smoothing: none;
}
.cssload-wrench::before {
 animation: cssload-spin 1.15s linear infinite;
  -o-animation: cssload-spin 1.15s linear infinite;
  -ms-animation: cssload-spin 1.15s linear infinite;
  -webkit-animation: cssload-spin 1.15s linear infinite;
  -moz-animation: cssload-spin 1.15s linear infinite;
 box-shadow: 0 0 0 1px rgb(26,115,232);
 color: rgb(255,255,255);
 content: "+";
 font-size: 103px;
 height: 25px;
 line-height: 0;
 left: 0;
 top: 0;
 text-indent: -17px;
 transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
 width: 25px;
}
.cssload-wrench::after {
 content: "";
 background: rgb(26,115,232);
 height: 14px;
 width: 14px;
 position: absolute;
 top: 6px;
 left: 6px;
}

@keyframes cssload-spin {
 0% {
  transform: scale(1) rotate(0deg) translateZ(0);
 }
 10%, 20% {
  transform: scale(1.4) rotate(0deg) translateZ(0);
 }
 30%, 45% {
  transform: scale(1.4) rotate(-90deg) translateZ(0);
 }
 55%, 100% {
  transform: scale(1) rotate(-90deg) translateZ(0);
 }
}

@-o-keyframes cssload-spin {
 0% {
  -o-transform: scale(1) rotate(0deg) translateZ(0);
 }
 10%, 20% {
  -o-transform: scale(1.4) rotate(0deg) translateZ(0);
 }
 30%, 45% {
  -o-transform: scale(1.4) rotate(-90deg) translateZ(0);
 }
 55%, 100% {
  -o-transform: scale(1) rotate(-90deg) translateZ(0);
 }
}

@-ms-keyframes cssload-spin {
 0% {
  -ms-transform: scale(1) rotate(0deg) translateZ(0);
 }
 10%, 20% {
  -ms-transform: scale(1.4) rotate(0deg) translateZ(0);
 }
 30%, 45% {
  -ms-transform: scale(1.4) rotate(-90deg) translateZ(0);
 }
 55%, 100% {
  -ms-transform: scale(1) rotate(-90deg) translateZ(0);
 }
}

@-webkit-keyframes cssload-spin {
 0% {
  -webkit-transform: scale(1) rotate(0deg) translateZ(0);
 }
 10%, 20% {
  -webkit-transform: scale(1.4) rotate(0deg) translateZ(0);
 }
 30%, 45% {
  -webkit-transform: scale(1.4) rotate(-90deg) translateZ(0);
 }
 55%, 100% {
  -webkit-transform: scale(1) rotate(-90deg) translateZ(0);
 }
}

@-moz-keyframes cssload-spin {
 0% {
  -moz-transform: scale(1) rotate(0deg) translateZ(0);
 }
 10%, 20% {
  -moz-transform: scale(1.4) rotate(0deg) translateZ(0);
 }
 30%, 45% {
  -moz-transform: scale(1.4) rotate(-90deg) translateZ(0);
 }
 55%, 100% {
  -moz-transform: scale(1) rotate(-90deg) translateZ(0);
 }
}

Kode HTML

Gunakan kode html berikut jika ingin menggunakannya

<div class="cssload-wrench"></div>

4. Loading Loader

Berikut kode CSS pada Tampilan Animasi preloader diatas

.cssload-loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg);
 display: block;
 margin: auto;
}
.cssload-loader:before, .cssload-loader:after {
 content: "";
 position: absolute;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}
.cssload-loader:before {
 animation: before 2.3s infinite;
  -o-animation: before 2.3s infinite;
  -ms-animation: before 2.3s infinite;
  -webkit-animation: before 2.3s infinite;
  -moz-animation: before 2.3s infinite;
}
.cssload-loader:after {
 animation: after 2.3s infinite;
  -o-animation: after 2.3s infinite;
  -ms-animation: after 2.3s infinite;
  -webkit-animation: after 2.3s infinite;
  -moz-animation: after 2.3s infinite;
}




@keyframes before {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
 }
 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
 }
 100% {
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
}

@-o-keyframes before {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
 }
 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
 }
 100% {
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
}

@-ms-keyframes before {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
 }
 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
 }
 100% {
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
}

@-webkit-keyframes before {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
 }
 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
 }
 100% {
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
}

@-moz-keyframes before {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
 }
 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
 }
 100% {
  box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
 }
}

@keyframes after {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
 }
 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
 }
 100% {
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
}
@-o-keyframes after {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
 }
 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
 }
 100% {
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
}
@-ms-keyframes after {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
 }
 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
 }
 100% {
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
}

@-webkit-keyframes after {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
 }
 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
 }
 100% {
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
}

@-moz-keyframes after {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
 }
 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
 }
 100% {
  box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
 }
}

Kode HTML

Gunakan kode html berikut jika ingin menggunakannya

<div class="cssload-loader"></div>

Sekian informasi kita ksli ini jika dalam penyampaian diatas belum mengerti gunakan form komentar untuk bertanya, Terimakasih atas perhatiannya

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.