Open In App

Create a Circular Progress Bar using HTML and CSS

Last Updated : 30 Jan, 2024
Like Article

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.



  • 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 .


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <!-- Set title of web page -->
    <title>GFG Circular progress Bar</title>
        /* 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;
    <!-- 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 class="ui-widgets">
            <div class="ui-values">50%</div>
            <div class="ui-labels">HTML</div>


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads