Create a Circular Progress Bar using HTML and CSS - GeeksforGeeks

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.
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

CSS-Properties


CSS-Questions


CSS-Selectors


HTML-Questions


CSS


HTML


Web Technologies

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Making a div vertically scrollable using CSS
Build a Survey Form using HTML and CSS
CSS | Text Formatting
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
Hide or show elements in HTML using display property
How to Insert Form Data into Database  using PHP ?