Open In App

How to create circular progress bar using SVG ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to create a circular progress bar using SVG.

Let us begin with the HTML part. In the SVG circle, the cx and cy attributes define the x and y coordinates of the circle. If cx and cy are not taken to the circle’s center, it is set to (0,0). The r attribute defines the radius of the circle. Span is an inline character container used to mark up a part of a text. It can be easily styled by CSS. Span is much like an HTML div element, but div is a block-level element. The div block visually isolates a section of a document on the page and may contain other block-level components.

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">
    <link rel="stylesheet" href="style.css" />
    <title>Circle progress bar</title>
</head>
  
<body>
  
  
    <div class="circle_box">
        <div>
            <svg>
                <circle cx="100" cy="100" r="95" />
                <circle cx="100" cy="100" r="95" />
            </svg>
            <span>90%</span>
        </div>
        <strong>c++ developer</strong>
    </div>
    <div class="circle_box">
        <div>
            <svg>
                <circle cx="100" cy="100" r="95" />
                <circle cx="100" cy="100" r="95" />
            </svg>
            <span>75%</span>
        </div>
        <strong>python developer</strong>
    </div>
    <div class="circle_box">
        <div>
            <svg>
                <circle cx="100" cy="100" r="95" />
                <circle cx="100" cy="100" r="95" />
            </svg>
            <span>40%</span>
        </div>
        <strong>php developer</strong>
    </div>
</body>
  
</html>


The CSS box-sizing allows us to include padding and border in an element’s total width and height. The CSS transform property gives a 2D or 3D transformation to an element. The property allows to rotate, move, etc. The overflow property helps to clip the content. The stroke-width is used for setting the width of the border on SVG shapes. 

Nth-child matches every element that is the nth child of its parent. N can be a number, a keyword, or a formula. The stroke-dash-offset defines the location along an SVG path where the dash of a stroke will begin. The stroke-dash-array property is used for creating dashes in the stroke of SVG Shapes. The CSS calc() function performs calculations when specifying CSS property values. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

style.css




*,*:after,*:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    font-family: arial;
    font-size: 16px;
    margin: 0;
    background: #122325;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
}
  
svg{
    width: 200px;
    height: 200px;    
    transform: rotate(-90deg);
    overflow: initial;
  
circle{
    stroke-width:20px;
    fill:none;    
}
circle:nth-child(1){ stroke: #fff }
circle:nth-child(2){
    stroke: #f00
    position: relative;
    z-index: 1;    
}
.circle_box:nth-child(1) circle:nth-child(2){
    stroke-dashoffset:calc(100 * 6);
    stroke-dasharray:calc(100 * 6);
    stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 90) / 100); 
    stroke-position: inside;
}
.circle_box:nth-child(2) circle:nth-child(2){
    stroke-dashoffset:calc(100 * 6);
    stroke-dasharray:calc(100 * 6);
    stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 75) / 100);
    stroke: rgb(37, 224, 109);  
}
.circle_box:nth-child(3) circle:nth-child(2){
    stroke-dashoffset:calc(100 * 6);
    stroke-dasharray:calc(100 * 6);
    stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 40) / 100);
    stroke: rgb(227, 241, 25);  
}
.circle_box{
    font-size: 36px;
    color: #fff;
    text-align: center;
}
.circle_box div{
    position: relative;
}
.circle_box span{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 40px;
}


Output: Now, as you can see in the output, we have created a beautiful progress chart, which will attract readers to read the progress of a person in a programming language.



Last Updated : 28 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads