Inpows

Code & Solve

About Me

Profile
Inpows

Welcome to inpows.

Membuat Efek Ripple Pada Loading Screen Menggunakan HTML dan CSS
CSS HTML

Membuat Efek Ripple Pada Loading Screen Menggunakan HTML dan CSS
Inpows
No Comments

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.

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.

Share :