css实现圆形进度条

先来看一下效果图：

具体实现步骤：

先画一个大圆，底色为#ffffff;

 <div class="third"> </div>

.third{background-color: #FFFFFF;width: 182px;height: 182px;border-radius: 50%;position: relative;
}

再画一个浅绿色的圆和一个与与第一个圆一样的圆

<div class="third"><div class="second"></div><div class="first"></div>
</div>

.second{background-color: #6ED4BF;width: 182px;height: 182px;border-radius: 50%;clip:rect(0,91px,auto,0);position: absolute;
}
.first{background-color: #FFFFFF;width: 182px;height: 182px;border-radius: 50%;clip:rect(0,auto,auto,91px)；
}

3.将second圆根据百分比旋转

.second{background-color: #6ED4BF;width: 182px;height: 182px;border-radius: 50%;clip:rect(0,91px,auto,0);position: absolute;transform: rotate(30deg);  //旋转30度
}

最后再画一个小圆，写上百分比

 <div class="third"><div class="second"></div><div class="first"></div><div class="mask"><span>68%</span></div></div>

.third *{position: absolute;top: 0;right: 0;bottom: 0;left: 0;
}

这样圆就是在中心了

.mask>span{display: block;font-size: 44px;color: white;line-height: 150px;
}

css实现圆形进度条相关推荐

圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
纯css制作圆形进度条
效果图大概是这样的第一步先定义出一个方形盒子 <!DOCTYPE html> <html lang="en"> <head><meta ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
HTML + CSS 实现矩形/圆形进度条效果 - SVG
本文记录通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果,效果图如下:(实际运行效果是进度条从 0 过渡到一个目标值比如 100% ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
html5圆形提交按钮样式,HTML5 SVG带圆形进度条动画的提交按钮特效
这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效.该提交按钮在被点击之后,按钮变形为一个圆形的进度条,当进度条运行一周之后,可以设置提交成功和提交失败的两种按钮状态. 制作方法 HT ...
CSS3+JS实现静态圆形进度条【清晰、易懂】
在写这篇文章之前,笔者查看了多篇博客,无奈前辈大多只是贴了代码,没有清晰明了的注释,所以容易让新人看得云里雾里.这里,笔者在弄明白原理后,对代码进行了优化,决定写(总结)一篇清晰.明了的圆形进度条的实 ...
使用CSS3实现圆形进度条
使用CSS3实现圆形进度条导语: 一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到100%:但是很少有圆形的进度条,本篇文章稍微讲解下如何使用CSS3实现圆形进度条一般我们见到的进度条通 ...

css实现圆形进度条

css实现圆形进度条

css实现圆形进度条相关推荐

最新文章

热门文章