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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 常用的几种数据存储方式有什么，有何区别

  这篇文章主要介绍了数据存储的三种方式 cookie sessionstorage localstorage 异同，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

• 用CSS怎么样做滚动表格的效果？

  这篇文章给大家分享的是用CSS怎么样做滚动表格的效果的示例。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 在CSS中让表格的文本居上对齐的方法是什么

  在css中，可以利用“vertical-align”属性设置td元素的文本靠上显示，该属性用于设置元素的垂直对齐方式，当属性的值为“text-top”时，会使文本靠上显示，语法为“td{vertical-align:text-top;}”。

• CSS3中设置第一个字母字体颜色的方法是什么

  在css3中，可用“:first-letter”选择器和color属性来修改首字母颜色，语法“元素:first-letter{color:颜色值;}”；“:first-letter”可选中元素的首字母，color可给选中的字母设置文本颜色。

• 如何对HTML性能优化，有哪些技巧

  页面优化是对网页中的HTML代码进行必要的调整，可以有效地精简页面中的冗余代码，加快网页显示速度，减少网页占用搜索引擎服务器的存储空间，提高用户体验和搜索引擎友好性，当然也可以更好的突出页面的主题，提高页面的相关性。下面是我总结出来的编写html代码时需要注意的，仅供参考。 1、HTML标