Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 03 Sep, 2021

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 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 border box design to each component and assign orange color to beautify the design.

Example:

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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :