Pure CSS Progress Chart
2024-10-21 06:08:56
Pure CSS Progress Chart
CSS Progress Circle
SCSS
.example {
text-align: center;
padding: 4em;
}
.pie {
width: 60px;
height: 60px;
border-radius: 50%;
background: #eee;
background-image: linear-gradient(to right, transparent 50%, #4CC9D8 0);
position: relative;
display: inline-block;
margin: 10px;
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}
.pie::after {
content: attr(data-value);
position: absolute;
width: 70%;
height: 70%;
margin: auto;
border-radius: 50%;
background-color: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
font: 900 20px/41px Tahoma;
}
@for $i from 0 through 50 {
.pie[data-value="#{$i}"]:before {
transform: rotate(#{$i/100}turn);
}
}
@for $i from 51 through 100 {
.pie[data-value="#{$i}"]:before {
background-color: #4CC9D8;
transform: rotate(#{$i/100 - .5}turn);
}
}
See the Pen Pure CSS Progress Chart by xgqfrms
(@xgqfrms) on CodePen.
refs
https://codepen.io/xgqfrms/pen/bGwGVOR?editors=1010
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- 一篇很好的Java、C、PHP、前端、Android、IOS的文章
- 关于scale和zoom的区别
- 《Continuous Integration》读书笔记
- C#6.0新特性的尝试
- uva 10246（最短路变形）
- urlscan使用详解
- uva 10152 ShellSort
- Thinking in java——Generics
- Silverlight OOB 程序自动更新
- 虚拟器运行iOS8地图提示错误
- netcat
- TaskTracker执行map或reduce任务的过程2
- eclipse中git提交冲突问题
- ognl版本错误
- ORA-00904: "WMSYS"."WM_CONCAT": invalid identifier
- Python中的鸡肋多线程
- 故事描述SVM----支持向量机/support vector machine (SVM)
- js针对数组的操作
- try finally 执行顺序问题
- 配置Jenkins的slave节点的详细步骤适合windows等其他平台