Create a Circular Progress Bar using HTML and CSS

Last Updated : 30 Jan, 2024

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 CSS. By using HTML, we will design the different components for that progress bar, and then by using the properties of CSS, we can style the progress bar.

Preview:

Approach:

Create a centered container in CSS using properties like 'position: absolute;, 'text-align: center;', and 'transform: translate(-50%, -50%);'.
Design circular progress bars by defining a class 'ui-widgets' with dimensions, border-radius, and box-shadow, adjusting border colors.
Duplicate this structure for each progress bar, customizing values and labels.
Style values and labels within the bars using classes like `ui-values` and `ui-labels`, adjusting font size, position, and colors.
Easily adapt by modifying values and labels for each progress bar, offering a visually appealing and customizable design for different tasks or skills.

Example: In this article, we will design the citculat progress bar using HTML and CSS .

HTML

<!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">

    <!-- Set title of web page -->
    <title>GFG Circular progress Bar</title>

    <style>
        /* Apply css properties to h1 element */
        h1 {
            text-align: center;
        }

        /* Create a container using CSS properties */
        .container {
            top: 30%;
            left: 50%;
            position: absolute;
            text-align: center;
            transform: translate(-50%, -50%);
        }

        /* Apply CSS properties to ui-widgets class */
        .ui-widgets {
            position: relative;
            display: inline-block;
            width: 10rem;
            height: 10rem;
            border-radius: 9rem;
            margin: 1.5rem;
            border: 1.2rem solid palegreen;
            box-shadow: inset 0 0 7px grey;
            border-left-color: palegreen;
            border-top-color: chartreuse;
            border-right-color: darkgreen;
            border-bottom-color: white;
            text-align: center;
            box-sizing: border-box;
        }

        /*  Apply css properties to the second 
            child of ui-widgets class */
        .ui-widgets:nth-child(2) {
            border-top-color: chartreuse;
            border-right-color: white;
            border-left-color: palegreen;
            border-bottom-color: white;
        }

        /*  Apply css properties to ui-widgets class 
            and ui-values class*/
        .ui-widgets .ui-values {
            top: 40px;
            position: absolute;
            left: 10px;
            right: 0;
            font-weight: 700;
            font-size: 2.0rem;

        }

        /*  Apply css properties to ui-widgets 
            class and ui-labels class*/
        .ui-widgets .ui-labels {

            left: 0;
            bottom: -16px;
            text-shadow: 0 0 4px grey;
            color: black;
            position: absolute;
            width: 100%;
            font-size: 16px;
        }
    </style>
</head>

<body>

    <!-- Add heading of the page -->
    <h1>GeeksforGeeks Circular Progress Bar</h1>

    <!-- Creating of a container class that 
        store other useful classes -->
    <div class="container">

        <!-- Creating a ui-widgets classes that 
            store other useful classes like 
            ui-values and ui-labels -->
        <div class="ui-widgets">
            <div class="ui-values">85%</div>
            <div class="ui-labels">Java</div>
        </div>

        <div class="ui-widgets">
            <div class="ui-values">50%</div>
            <div class="ui-labels">HTML</div>
        </div>
    </div>
</body>

</html>

Output:

Create a Circular Progress Bar using HTML and CSS

riyamathur

Improve

Article Tags :

Create a Circular Progress Bar using HTML and CSS

Preview:

Approach:

Similar Reads

Thank You!

What kind of Experience do you want to share?