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实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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为SHOPEX增加日志功能代码
2010/07/02 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python线程锁(thread)学习示例
2013/12/04 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
2014年党建工作汇报材料
2014/11/02 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
Python os和os.path模块详情
2022/04/02 Python