<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG实现圆形进度条</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: '微软雅黑', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #000;
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 60px;
flex-direction: column;
background: linear-gradient(to right, rgba(35, 35, 35, 0.2), #1e1d1e);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.box .percent {
position: relative;
width: 150px;
height: 150px;
}
.box .percent svg {
position: relative;
width: 150px;
height: 150px;
}
.box .percent svg circle {
width: 150px;
height: 150px;
fill: none;
stroke-width: 10;
stroke: #000;
transform: translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
stroke-linecap: round;
}
.box:nth-child(1) .percent svg circle:nth-child(1) {
stroke-dashoffset: 0;
stroke: #000
}
.box:nth-child(1) .percent svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 87)/100);
stroke: #00fe41;
}
.box:nth-child(2) .percent svg circle:nth-child(1) {
stroke-dashoffset: 0;
stroke: #000
}
.box:nth-child(2) .percent svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 85)/100);
stroke: #079eff;
}
.box:nth-child(3) .percent svg circle:nth-child(1) {
stroke-dashoffset: 0;
stroke: #000
}
.box:nth-child(3) .percent svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 60)/100);
stroke: #c304fe;
}
.box:hover {
transform: translateY(-20px);
transition: all 0.5s;
}
.box:hover .number {
transform: scale(1.2);
transition: all 0.5s;
color: #fff !important;
}
.box:hover .text {
transform: scale(1.2);
transition: all 0.5s;
color: #fff !important;
}
.box .percent .number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #767576;
}
.box .percent .number h2 {
font-size: 48px;
}
.box .percent .number span {
font-size: 24px;
}
.box .text {
padding: 10px 0 0;
color: #999;
font-weight: 700;
letter-spacing: 1px;
}
</style>
</head>
</head>
<body>
<div class="box">
<div class="percent">
<svg>
<circle cx='70' cy='70' r='70'></circle>
<circle cx='70' cy='70' r='70'></circle>
</svg>
<div class="number">
<h2>87<span>%</span></h2>
</div>
</div>
<h2 class="text">Progress</h2>
</div>
<div class="box">
<div class="percent">
<svg>
<circle cx='70' cy='70' r='70'></circle>
<circle cx='70' cy='70' r='70'></circle>
</svg>
<div class="number">
<h2>85<span>%</span></h2>
</div>
</div>
<h2 class="text">Progress</h2>
</div>
<div class="box">
<div class="percent">
<svg>
<circle cx='70' cy='70' r='70'></circle>
<circle cx='70' cy='70' r='70'></circle>
</svg>
<div class="number">
<h2>60<span>%</span></h2>
</div>
</div>
<h2 class="text">Progress</h2>
</div>
</body>
</html>
【前端素材】模板-多种实用环形.zip （21个子文件） 
环形 
svg2.html 2KB css.html 3KB line渐变.html 2KB index6.html 2KB index4.html 5KB
首尾为圆形的圆弧进度条.htm 2KB index2.html 2KB circleManyFun.html 5KB canvas.html 3KB svg4.html 1KB index7.html 2KB svg3.html 962B svg5.html 5KB index.html 2KB 半圆环.htm 2KB svg.html 624B index3.html 2KB purecss.html 2KB svg6.html 1KB index5.html 4KB svg渐变.html 3KB资源评论
