How to create a progress bar animation using HTML and CSS ?

Last Updated : 08 May, 2023

In this mini Web Development project we will utilize CSS animations and create a progress bar using them. The progress bar will start from zero and go to a certain extent as we want. The progress bar is basically showing the expertise of a programmer in different languages in animated form.

Prerequisite: Basics of HTML like tags, div, id, class and basics of CSS like margin, padding, color, font, and animations, etc.

Approach:

First, we will create a basic structure using HTML. Inside the body tag, we will create a division and give it a class so that later it can be targeted using CSS. Inside that div, we will create several divs for each language that we want to showcase and use <h2> tag to name them e.g. HTML, CSS, C/C++, Java, etc.
In the CSS section, initially, we will give margin, padding, and background color to the body. After that, we will target each h2 tag and give animation effect, font size, font color etc.
In the CSS section, we will also give a border box design to each component and assign an orange color to beautify the design.

Example: In this article, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        /* Styling the body of the page */
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #010101;
        }
 
        /* Stylingthe last h2 tag by giving margin bottom */
        .progress-bar-container:not(:last-child) {
            margin-bottom: 50px;
        }
 
        /* Styling the h2 tag by giving color, 
        letter spacing, font-size etc.*/
        .progress-bar-container h2 {
            font-family: Arial, Helvetica, sans-serif;
            color: #eee;
            letter-spacing: 1px;
            font-size: 20px;
        }
 
        /* Styling the border and box
        effect of the progress bar*/
        .progress-bar {
            width: 800px;
            height: 5px;
            margin-top: 10px;
            border: 1px solid #565656;
            border-radius: 5px;
            box-shadow: 0 0 10px rgb(245, 159, 0);
        }
 
        /* Stylingthe background color of each 
        animation and border radius */
        .percentage {
            display: block;
            height: 100%;
            background-color: orange;
            border-radius: 5px;
            animation: progress 1500ms ease-in 1;
        }
 
        /* Assigning width of each languages*/
        .c {
            width: 85%;
        }
 
        .java {
            width: 70%;
        }
 
        .python {
            width: 55%;
        }
 
        .html {
            width: 75%;
        }
 
        .css {
            width: 65%;
        }
 
        .javascript {
            width: 55%;
        }
 
        /* Animating the progress bar by 
        initially starting from 0*/
        @keyframes progress {
            from {
                width: 0;
            }
        }
    </style>
</head>
 
<body>
    <div class="skills">
        <div class="progress-bar-container">
            <h2>C/C++</h2>
            <div class="progress-bar">
                <span class="percentage c"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>Java</h2>
            <div class="progress-bar">
                <span class="percentage java"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>Python</h2>
            <div class="progress-bar">
                <span class="percentage python"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>HTML</h2>
            <div class="progress-bar">
                <span class="percentage html"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>CSS</h2>
            <div class="progress-bar">
                <span class="percentage css"></span>
            </div>
        </div>
 
        <div class="progress-bar-container">
            <h2>JavaScript</h2>
            <div class="progress-bar">
                <span class="percentage javascript"></span>
            </div>
        </div>
    </div>
</body>
</html>