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的内容，大家可以关注群英网络其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何说明CSS圣杯布局双飞翼布局的差异

  今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别，这两个三行布局一直是一些大厂前端面试的高频考点，带你走进大厂面试题，活不多说，

• CSS盒子模型分类怎么分，包括哪些类型

  本篇文章给大家带来了关于css的相关知识，其中主要介绍了css盒子模型以及box-sizing属性的相关问题，box-sizing属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等，下面一起来看一下，希望对大家有帮助。

• 基于JS实现时序图的思路有哪些，有什么优缺点

  这篇文章主要介绍了原生 JS+CSS+HTML 实现时序图的方法，本文通过实例代码图文介绍的非常详细,需要的朋友可以参考下

• 用CSS写多列等高布局的方法及代码是什么

  这篇文章主要介绍了css设置多列等高布局的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS3设置animation动画停止的属性是什么

  在css3中，可用animation-play-state属性来让运行的animation动画停止，该属性的作用就是规定动画正在运行还是暂停，只需要给应用了动画的元素添加“animation-play-state:paused;”样式即可。