Membuat Glowing Loader Rings dengan Animate CSS

Hallo, pada artikel kali ini kita akan belajar membuat loader ring yang glowing dengan menggunakan property animate CSS. kalian bisa memakai loader rings ini pada website kalian.

Pertama kita mulai membuat striktur HTML nya, disini kita memakai div container yang didalamnya ada div untuk loader luar dan loader dalam. dimasing-masing div loader kita tambahkan div untuk membuat lingkaran loadernya. berikut code HTML nya.

HTML CODE

<div class="container">
  <div class="loader loader1">
    <div class="circle"></div>
  </div>
  <div class="loader loader2">
    <div class="circle"></div>
  </div>
</div>

Selanjutnya kita tambahkan CSS berikut:

CSS CODE

body{
  background:black;
}
.container{
    position:absolute;
    left: 40%;
    top:20%;
    height: 250px;
    width: 250px;
    transform: translate(-50%,-50%);
    transform: scale(0.5);
    box-sizing: border-box;
  }
.container .loader{
    position: absolute;
    border: 2px solid #121212;
}
.container .loader.loader1{
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 50%;
    background: #090909;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    border-left: 2px solid #ffff00;
    border-top: 2px solid #ffff00;
    animation: animate1 2.5s linear infinite;
}
.container .loader.loader2{
    top: 30px;
    right: 30px;
    left: 30px;
    bottom: 30px;
    border-radius: 50%;
    background: #090909;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    border-left: 2px solid #03a9f4;
    border-top: 2px solid #03a9f4;
    animation: animate2 2.5s linear infinite;
}
.container .loader .circle{
    position: absolute;
    top: calc(50% - 1px);
    left: 50%;
    width: 50%;
    height: 2px;
    transform-origin: left;
}
.container .loader .circle::before{
    content: '';
    position: absolute;
    top: -4px;
    right: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
}
.container .loader.loader1 .circle{
    transform: rotate(-45deg);
}
.container .loader.loader2 .circle{
    transform: rotate(-45deg);
}
.container .loader.loader1 .circle::before{
    background: #ffff00;
    box-shadow: 0 0 20px #ff0,
                0 0 40px #ff0,
                0 0 60px #ff0,
                0 0 80px #ff0,
                0 0 100px #ff0,
                0 0 0 5px rgba(255, 255, 0, .1);
}
.container .loader.loader2 .circle::before{
    background: #ffff00;
    box-shadow: 0 0 20px #ff0,
                0 0 40px #ff0,
                0 0 60px #ff0,
                0 0 80px #ff0,
                0 0 100px #ff0,
                0 0 0 5px rgba(3, 169, 244, .1);
}
@keyframes animate1 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes animate2 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}

dan berikut saya lampirkan hasil dari kode diatas, kalian bisa mencoba juga di codepen

See the Pen Untitled by erick sutedy (@erickstdy) on CodePen.

Sekian tutorial kali ini, jangan lupa baca juga artikel menarik lain nya ya. Happy Coding!