Membuat Efek Ripple Pada Loading Screen Menggunakan HTML dan CSS – Pada artikel ini akan membahas bagaimana membuat efek ripple pada loading screen menggunakan HTML dan CSS. Pembuatan efek ini membutuhkan dua buah file yang perlu disiapkan. Diantaranya adalah satu file dengan nama style.css dan satu file dengan nama index.html. Pembuatan animasi ripple menggunakan @keyframes yang akan terdapat pada style.css. Perhatikan dibawah ini untuk membuat efek ripple pada loading screen menggunakan HTMl dan CSS.
Daftar Isi
Membuat Efek Ripple Pada Loading Screen Menggunakan HTML dan CSS
File style.css
Berikut ini source code pada style.css untuk membuat efek ripple pada loading screen menggunakan HTML dan CSS.
body{
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
}
span{
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 5px;
position: relative;
}
span::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
border-radius: 50%;
z-index:-1;
animation: ripple 1.5s ease-out infinite;
}
span:first-child{
background-color: #6730EC;
}
span:first-child::before{
animation-delay: 0.2s;
}
span:nth-child(2){
background-color: #7984EE;
transform: scale(0.9);
}
span:nth-child(2)::before{
animation-delay: 0.4s;
}
span:nth-child(3){
background-color: #A9D2FF;
transform: scale(0.8);
}
span:nth-child(3)::before{
animation-delay: 0.6s;
}
span:nth-child(4){
background-color: #D2F6FC;
transform: scale(0.7);
}
span:nth-child(4)::before{
animation-delay: 0.8s;
}
span:last-child{
background-color: #FFFFFF;
transform: scale(0.6);
}
span:last-child::before{
animation-delay: 1s;
}
@keyframes ripple{
from{
opacity: 1;
transform: scale(0);
}
to{
opacity: 0;
transform: scale(3);
}
}
File index.hml
Source code pada index.html untuk menampilkan efek ripple pada loading screen pada web browser anda.
<!DOCTYPE html> <html> <head> <TITLE>Efek Ripple Loader</TITLE> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
Video hasil
Berikut ini video hasil dari membuat efek ripple pada loading screen menggunakan HTML dan CSS.
Temukan source code menarik lainnya hanya di inpows.