css3进度条代码-CSS3放射状（环形）进度条[演示/源代码]

本文介绍了CSS3实现的放射状（环形）进度条。

效果图

演示下载

实例介绍

进度以放射状显示，比例以圆圈表示。

HTML代码

HTML代码结构如下：

    
25%

代码比较简单，一个div包含一个div，外层div的class值为progress-radialprogress-25。 注意数字25是进度比例的值，进度为时写上对应的数字。

CSS代码

主要CSS代码如下（部分）：

/* -------------------------------------
 * 进度条容器
 * ------------------------------------- */
.progress-radial {
  float: left;
  margin-right: 30px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #2f3439;
  background-color: tomato;
}

/* -------------------------------------
 * 中心圆 文字
 * ------------------------------------- */
.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;
}

/* -------------------------------------
 * 百分比类：progress-%
 * ------------------------------------- */
.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-radial 是进度条容器样式。

.overlay是中心圆，文字样式。

.progress-% 是径向进度条样式。

总结

本文介绍CSS3实现的放射状（环形）进度条css3进度条代码，主要是介绍样式。 实际场景中css3进度条代码，可能需要配合JavaScript来完成（动态）进度条的显示效果。

您可能还对以下文章感兴趣