Home » CSS Glowing Circle Loading Animation

CSS Glowing Circle Loading Animation

by techmidpoint
CSS Glowing Circle Loading Animation

CSS Glowing Circle Loading Animation

We can create awesome animations for web applications without using JavaScript. CSS works like JavaScript and from time to time coming to its different frameworks, so developers like to use CSS. In this tutorial, I am going to create CSS Glowing Circle Loading Animation 

CSS Glowing Circle Loading Animation

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS Glowing Circle Loading Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
    <body>
     <div class="loader">
    </div>
    </body>
    </html>

CSS

body
{
    margin: 0;
    padding: 0;
    background: #000;
    
}
.loader
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
    box-sizing: border-box;
}
.loader:before
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 0%;
    height: 0%;
    border-radius: 50%;
    box-sizing: border-box;
    animation: animate 2s linear infinite;
}
.loader:after
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    animation: animate 2s linear infinite;
    animation-delay: 1s;
}
@keyframes animate
{
    0%
    {
        width: 0;
        height: 0;
        border: 4px solid #00e250;
        box-shadow: 0 0 10px #00e250;
        opacity: 1;
    }
    70%
    {
        opacity: 1; 
    }
    100%
    {
        width: 100%;
        height: 100%;
        border: 4px solid #00e250;
        box-shadow: 0 0 100px #00e250;
        opacity: 0;
    }   
         
}

For More Tutorials Please Click Here

You may also like

Leave a Comment