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
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)