• 前几天我们讲了一下用多种(4种)方式实现任意角度扇形
  1. CSS 绘制任意角度扇形--遮盖/旋转
  2. CSS 绘制任意角度扇形--clip-path
  3. CSS 绘制任意角度扇形-渐变图像(css)
  4. CSS 绘制任意角度扇形-SVG
• 其实通过扇形很容易就可以生成一个环(圆)形进度条
  

扇形 => 环(圆)形进度

• 新增一个 div 元素, 并且根据扇形的大小设置进度(如:25%) 即可完成
• 通过在父元素设置以下样式, 让新增的元素保持居中显示

display: flex;
align-items: center;
justify-content: center;

• 在新增的元素上设置以下样式

/* 设置背景大小、形状和颜色 */
width: 90%;
height: 90%;
background: #fff;
border-radius: 50%;
/* 让文字显示在中间 */
display: flex;
align-items: center;
justify-content: center;

• 如果想要优化展示效果可以参考：1.环(圆)形进度条 2.CSS 实现环(圆)形进度条(渐变效果)
• 通过以上的两篇文章: 1.环形两端圆角处理, 2.背景透明处理, 3.渐变效果实现, 4.模拟进度效果

优劣对比

• 由扇形转换成进度条的方式用上面的方法基本上就可以了
• 使用 svg 其实可以一步到位实现进度条, 参考文档: 使用 SVG 实现圆(环)形 进度条

方式	设置角度/百分比	角度计算	过渡效果	渐变效果	内部透明	两端圆角
遮盖/旋转	支持	--	不支持	不支持	支持	复杂
clip-path	不支持	复杂	不支持	不支持	支持	复杂
渐变图像	支持	--	不支持	支持	支持	复杂
SVG直接实现	不支持	简单	支持	支持	支持	简单

小结

• 通过上表可以看出来 SVG 在实现上会更简单一些, 能达到的效果也更好一些
• 如果你真的不想研究 SVG, 其实复制一下代码也是可以支持用的
• 假如你还是不想用 SVG, 那另外的3种处理方式也不错; 但作为一个前端开发了解一些 SVG 的知识也是应该的
• 最近写了很多关于 css 实现扇形和进度条的文章, 基本上也说的差不多了, 本文算是一个小总结吧.

相关文章

CSS 绘制任意角度扇形(第一种)--遮盖/旋转
CSS 绘制任意角度扇形(第二种)--clip-path
CSS 绘制任意角度扇形(第三种)-渐变图像(css)
CSS 绘制任意角度扇形(第三种)-渐变图像-示例
CSS 绘制任意角度扇形(第四种)-SVG
CSS 绘制任意角度扇形-总结
使用 SVG 实现圆(环)形 进度条
环(圆)形进度条
CSS 实现环(圆)形进度条(渐变效果)
CSS 实现关闭(close) Icon