Cara Membuat Animasi Loading Spinner dengan CSS
Hallo semua kali ini saya ingin berbagi ilmu kepada kalian tentang cara Membuat Animasi Loading Spin dengan CSS, Terkadang kita terasa ada yang kurang dari tampilan kita saat kita melakukan load data atau action pada button. Dengan adanya animasi loading bisa membuat tampilan lebih elegant dan enak dipandang.
Membuat Animasi Loading Spinner dengan CSS
Dibagian ini silahkan kalian membuat file html untuk menampung animasi loading dengan beri nama index.html untuk source codenya kalian bisa meniru dibawah ini.
Source Code :
<html>
<head><title>Membuat Animasi Loading Spinner Dengan CSS</title>
<style>
.loadingcss {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
border-left: 5px solid #fb8500;
border-right: 5px solid #ffb703;
border-top: 5px solid #023047;
border-bottom: 5px solid #219ebc;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loadingcss"></div>
</body>
</html>
<head><title>Membuat Animasi Loading Spinner Dengan CSS</title>
<style>
.loadingcss {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent;
border-left: 5px solid #fb8500;
border-right: 5px solid #ffb703;
border-top: 5px solid #023047;
border-bottom: 5px solid #219ebc;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loadingcss"></div>
</body>
</html>
Hasilnya :
Source Code :
<html>
<head><title>Membuat Animasi Loading Spinner Dengan CSS</title>
<link href="loading.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="loadingcss"></div>
</body>
</html>
<head><title>Membuat Animasi Loading Spinner Dengan CSS</title>
<link href="loading.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="loadingcss"></div>
</body>
</html>
Nah itulah cara membuat animasi loading spinner dengan css, semoga bisa bermanfaat untuk anda dan bisa menambah wawasan anda, Terima kasih sudah berkunjung
