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

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

Last Updated : 30 Jul, 2024

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>

Output:

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

imsushant12

Improve

Article Tags :

Similar Reads

How to create a progress bar using HTML and CSS?

The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can useÂ HTMLÂ andÂ CSS. To make that progress bar responsive you will needÂ JavaScript.In this article, we will learn to create progr

How to Create a Dot loading Animation using HTML and CSS?

The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS. HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some spa

How to create Animated bars using HTML and CSS?

Dancing bars are one of the classical components that are used in making a good looking website. They are very simple to implement and can be used as a loader or an animation while recording sound. Approach: The approach is to use unordered list to create bars and then animate them using keyframes.

How to Create a Progress Bar using HTML?

To create the progress bar of a task by using a <progress> tag. It is used to represent the progress of a task. It is also defined as how much work is done and how much is left. It is not used to represent the disk space or relevant query. Syntax:<progress attributes...> </progress

How to Create Animation Loading Bar using CSS ?

Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s

Create a Circular Progress Bar using HTML and CSS

A circular progress bar is a visual representation that shows the progress of a task or operation in a circular form. It's a straightforward and useful way to represent progress and can enhance the appearance of your application or website. So, we will design a circular progress bar using HTML and C

How to Set Color of Progress Bar using HTML and CSS ?

The progress bar is an important element on the web, the progress bar can be used for downloading, marks obtained, skill measuring units, etc. To create a progress bar we can use HTML and CSS.Â The progress bar is used to represent the progress of a task. It also defines how much work is done and ho

How to Create Animated Loader Ring using HTML and CSS?

An Animated Loader Ring using HTML and CSS is a circular loading animation that visually indicates progress or loading status. It is created with a simple HTML structure and animated using CSS properties like border, transform, and @keyframes for rotation effects.ApproachHTML Structure: The code use

How to Create Border Animation using CSS?

Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction.

How to Create Jumping Text 3D Animation Effect using CSS ?

In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html