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