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

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.
sagartomar9927
CSS-Properties
CSS-Questions
CSS-Selectors
HTML-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?