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.

Membuat Blur Loading Text Animation Menggunakan HTML & CSS

Konfigurasi Typescript dengan Babel, Mocha dan Webpack

Membuat Icon Pulse Animation Menggunakan HTML dan CSS

Membuat Algoritma Insertion Sort di Kotlin