Loading animasi glowing ring dengan hanya menggunakan HTML dan CSS. Pertama-tama buat folder dengan nama glowing-ring dan buat file index.html. Buka file index.html dan masukkan kode berikut :

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Ring</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="loader"><span></span></div>
        <div class="loader"><span></span></div>
        <div class="loader"><i></i></div>
        <div class="loader"><i></i></div>
    </div>
</body>
</html>

Kemudian buat file style.css di folder glowing-ring dan masukkan kode berikut :

CSS

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

.container
{
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-reflect: below 0 linear-gradient(transparent,transparent, #0005);
}

.container .loader
{
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    animation: animate 2s linear infinite;
}

.container .loader:nth-child(2),
.container .loader:nth-child(4)
{
    animation-delay: -1s;
    filter: hue-rotate(290deg);
}

@keyframes animate {
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

.container .loader:nth-child(1)::before,
.container .loader:nth-child(2)::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to top, transparent, rgba(0,255,249,0.4));
    background-size: 100px 180px;
    background-repeat: no-repeat;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.container .loader i
{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #00fff9;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 0 0 10px #00fff9,
    0 0 20px #00fff9,
    0 0 30px #00fff9,
    0 0 40px #00fff9,
    0 0 50px #00fff9,
    0 0 60px #00fff9,
    0 0 70px #00fff9,
    0 0 80px #00fff9,
    0 0 90px #00fff9,
    0 0 100px #00fff9,
}

.container .loader span
{
    position: absolute;
    inset: 20px;
    background: #000;
    border-radius: 50%;
    z-index: 1;
}

Buka file index.html menggunakan browser dan lihat hasilnya