CSS 圆形进度栏


Posted in HTML / CSS onApril 06, 2021

实现效果

CSS 圆形进度栏

实现代码

html

<div class="wrap">
  
<div class="progress-radial progress-25">
  <div class="overlay">25%</div>
</div>

<div class="progress-radial progress-50">
  <div class="overlay">50%</div>
</div>

<div class="progress-radial progress-75">
  <div class="overlay">75%</div>
</div>

<div class="progress-radial progress-90">
  <div class="overlay">90%</div>
</div>
  
</div>

css

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
  padding: 30px 0;
  background-color: #2f3439;
  font-family: "Noto Sans", sans-serif;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial {
  float: left;
  margin-right: 30px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #2f3439;
  background-color: tomato;
}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial .overlay {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #fffde8;
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 20px;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.progress-0 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-5 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-10 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-15 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-20 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-25 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-30 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-35 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-40 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-45 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-50 {
  background-image: linear-gradient(-90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-55 {
  background-image: linear-gradient(-72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-60 {
  background-image: linear-gradient(-54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-65 {
  background-image: linear-gradient(-36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-70 {
  background-image: linear-gradient(-18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-75 {
  background-image: linear-gradient(0deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-80 {
  background-image: linear-gradient(18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-85 {
  background-image: linear-gradient(36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-90 {
  background-image: linear-gradient(54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

以上就是CSS实现的圆形进度栏的详细内容,更多关于CSS实现圆形进度栏的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
css3 选择器
May 11 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
html+css合并表格边框的示例代码
使用HTML+Css+transform实现3D导航栏的示例代码
z-index不起作用
Mar 31 #HTML / CSS
元素水平垂直居中的方式
Mar 31 #HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
You might like
php二分查找二种实现示例
2014/03/12 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
js实现查询商品案例
2020/07/22 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python算法应用实战之栈详解
2017/02/04 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
基于python操作ES实例详解
2019/11/16 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
学python爬虫能做什么
2020/07/29 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
学校募捐倡议书
2014/05/14 职场文书
环保倡议书300字
2014/05/15 职场文书
2016猴年春节问候语
2015/11/11 职场文书
公司与个人合作协议书
2016/03/19 职场文书