Create Circle Progress Bar Use Only SVG and CSS

This tutorial blog can help you to create Circle Progress Bar using only HTML and CSS. Without any script you can create this circle progress bar with percentage value. There we use CSS calculation function for circle progressing value.

Video tutorial of Create Circle Progress Bar Use Only SVG and CSS | progress bar with percentage

This tutorial video can help you to create Circle Progress Bar using only HTML and CSS. Without any script you can create this circle progress bar with percentage value. There we use CSS calculation function for circle progressing value.

Create Circle Progress Bar Use Only SVG and CSS | progress bar with percentage [Source Codes]

This source code can help you to create Circle Progress Bar Use Only SVG and CSS | progress bar with percentage

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


<div class="circle_box">
	<div>
		<svg>
			<circle cx="100" cy="100" r="95"/>
		  <circle cx="100" cy="100" r="95"/>
		</svg>
		<span>80%</span>
	</div>	
	<strong>Web Development</strong>
</div>
<div class="circle_box">
	<div>
		<svg>
			<circle cx="100" cy="100" r="95"/>
		  <circle cx="100" cy="100" r="95"/>
		</svg>
		<span>60%</span>
	</div>	
	<strong>App Development</strong>
</div>
<div class="circle_box">
	<div>
		<svg>
			<circle cx="100" cy="100" r="95"/>
		  <circle cx="100" cy="100" r="95"/>
		</svg>
		<span>50%</span>
	</div>	
	<strong>Digital Marketing</strong>
</div>



</body>
</html>

CSS Code

Copy

*,*: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) * 80) / 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) * 60) / 100);
	stroke: #0f0;  
}
.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) * 50) / 100);
	stroke: #00f;  
}
.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;
}

Create Circle Progress Bar Use Only SVG and CSS

Video tutorial of Create Circle Progress Bar Use Only SVG and CSS | progress bar with percentage

Create Circle Progress Bar Use Only SVG and CSS | progress bar with percentage [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS