Loading animation using HTML, CSS, and Js | Animated progress bar

loading preview

Hello there, Today’s blog will teach you How To Make a custom loading animation (animated progress bar) Using HTML, CSS, and a little bit of JavaScript as you can see in the preview image above.

You may also view the entire video tutorial.

Source Code

To begin, you must create three files: one HTML file, one CSS file, and one Js file. After you’ve created these files, simply copy and paste the following codes into your file.

HTML Code

First, create an HTML file called index.html and paste the following codes into it.

<!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>Loading Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider">
        <p class="count">0%</p>
        <div class="line"></div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS Code

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Great Vibes', cursive;
}
*html{
    display: grid;
    background: #edf7fa;
}
.slider{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.count{
    font-size: 5rem;
    color: rgba(51,51,51);
    margin-bottom: 15px;
}
.line{
    width: 500px;
    height:12px;
    background-color: rgb(243,243,243);
    border-radius: 50px;
    position: relative;
}
.line::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100% ;
    background: #8e2de2;
    border-radius: 50px;
    background: linear-gradient(to right, #4a00e0,#be2de2);
    animation: anim 2s;
}
@keyframes anim{
    0%{
        width: 0%;
    }
    20%{
        width: 5%;
    }
    50%{
        width: 40%;
    }
    60%{
        width: 55%;
    }
    100%{
        width: 100%;
    }
}

JS Code

Third, create a JS file with the name of main.js and paste the given codes into your JS file.

const op=setInterval(changeNum,20);
function changeNum(){
    const count=document.getElementsByClassName("count")[0];
    const line=document.getElementsByClassName("line")[0];
    let a=window.getComputedStyle(line,':before').getPropertyValue('width');
    a=Math.floor((parseInt(a)/10)*2);
    count.innerHTML=a+'%';
    if(a==100)
    {
        clearInterval(op);
    }
}

Thank you!!

I hope this post will be helpful in saving you time ️✌️and creating a nice loading animation (animated progress bar) for your website. If you like, please share with others ️❤️️ and let me know the topic you want to code for.

Read other posts