Membuat Spinner Gradient Loading Animation Menggunakan HTML dan CSS – Pada artikel hari ini kita akan membuat spinner gradient loading animation menggunakan HTML dan CSS. Menggunakan dua buah file yaitu index.html dan style.css, kita dapat membuat spinner gradient loading animation. Simak artikel ini lebih lanjut untuk mengetahui source code membuat spinner gradient loading animation menggunakan HTML dan CSS.
Daftar Isi
Kode File CSS
body {
min-height: 100vh;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
}
.spinner::before,
.spinner:after {
content: "";
position: absolute;
border-radius: inherit;
}
.spinner:before {
width: 100%;
height: 100%;
background-image: linear-gradient(0deg, blue 0%, #333333 100%);
animation: spin 0.5s infinite linear;
}
.spinner:after {
width: 85%;
height: 85%;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
Kode File HTML
<!DOCTYPE html>
<html>
<head>
<TITLE>Spinner Gradient Loading Animation</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="spinner"></div>
</body>
</html>
Temukan source code menarik lainnya mengenai HTML dan CSS hanya di Inpows.
Baca Juga
Show And Hide Password Menggunakan HTML dan CSS
Membuat Blur Loading Text Animation Menggunakan HTML & CSS
Konfigurasi Typescript dengan Babel, Mocha dan Webpack