Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Create a Circular Progress Bar using HTML and CSS

  • Last Updated : 24 Jun, 2021

A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. So, today 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.

A sample Picture is provided to understand today’s task with more clarity.

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

Step by Step Implementation:



Step 1: First, we will design a basic progress bar structure using HTML. First, we will create a container div that holds both progress bars. After that, we will create another div inside the container div that creates the circular div element. Here we have added some comments that will help readers to understand easily.

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>
</head>
  
<body>
  
    <!-- Added heading of the page -->
    <h1>GeeksForGeeks Circular Progress Bars</h1>
  
    <!-- Creating a container class that 
        hold 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>

Step 2: Next, we will use some CSS properties to design the progress bar. The container class sets the position of the div element. Other CSS classes are used to create the circular progress bar and added CSS styles. 

CSS




/* 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;
}

Complete Code: In this section, we will combine the above two sections to create a circular 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :