Fraction of Animation

Open In Editor Video Publish Your Code

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateBgColor 4s linear infinite;
}
.loader{
    position: relative;
}
.loader span{
    position: absolute;
    top: 0;
    left: -200px;
    width: 200px;
    transform-origin: right;
    transform: rotate(calc(18deg * var(--i)));
}
.loader span::before{
    content: '';
    position: absolute;
    left: 0;
    width: 150px;
    height: 15px;
    background: hsl(0, 100%, 50%);
    border-radius: 50%;
    animation: animate 5s linear infinite;
    animation-delay: calc(-0.1s * var(--i));
    box-shadow: 0 0 20px #00ff0a,
                0 0 40px #00ff0a,
                0 0 60px #00ff0a,
                0 0 80px #00ff0a,
                0 0 100px #00ff0a,
                0 0 120px #00ff0a;
}

@keyframes animate{
    0%
    {
        transform: translateX(0) scale(0.5);
    }
    50%
    {
       transform: translateX(200px) scale(1);  
    }
    100%
    {
        transform: translateX(0) scale(0.5); 
    }    
}

Fraction of Animation

Recommended

Hover effect of drinking soda

CSS Loading Spinner Animation

Mon portofolio

HTML

CSS

JS

Recommended

Hover effect of drinking soda

CSS Loading Spinner Animation

Mon portofolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS