纯CSS创建各类进度条的 N 种方式-猿码集

1. 简介

进度条是Web前端中常见的一种交互效果，可以直观地展示某个操作的进度，提高用户的交互体验。在本文中，我们将介绍纯CSS创建各类进度条的N种方式，供Web前端开发者学习和参考。

2. 垂直进度条

垂直进度条是在网页中垂直方向上展示进度的一种进度条。

2.1 方式一

这种方式使用CSS的transform属性控制进度条的高度。


.vertical-progress-bar1 {
  width: 8px;
  height: 100px;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #f5f5f5;
}
.vertical-progress-bar1 span {
  position: absolute;
  bottom: 0;
  height: 0;
  width: 8px;
  border-radius: 10px;
  background-color: #4caf50;
  animation: progress1 3s ease-out forwards;
}
@keyframes progress1 {
  0% {
    height: 0;
  }
  100% {
    height: 100px;
  }
}

上面的代码中，.vertical-progress-bar1是整个进度条的样式，span是进度条的进度条样式。设置height:0，会将进度条隐藏，当通过animation实现进度条的动画效果时，将height设置成相应的高度即可。

注意：animation需要兼容不同的浏览器，我们可以使用autoprefixer等工具自动生成兼容的CSS代码。

2.2 方式二

这种方式使用CSS的linear-gradient属性和background-position属性控制进度条的高度。


.vertical-progress-bar2 {
  width: 8px;
  height: 100px;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #f5f5f5;
  background-image: linear-gradient(#4caf50 0%, #4caf50 100%);
  background-size: 8px 0%;
  background-position: center bottom;
  transition: background-size .5s ease-out;
}
.vertical-progress-bar2:hover {
  background-size: 8px 100%;
}

上面的代码中，.vertical-progress-bar2是整个进度条的样式，transition属性控制鼠标悬浮与否时的进度条过渡效果，background-size控制进度条的高度，background-position控制进度条在垂直方向上的位置。

3. 水平进度条

水平进度条是在网页中水平方向上展示进度的一种进度条。

3.1 方式一

这种方式使用div的宽度和margin属性控制进度条的宽度和位置。


.horizontal-progress-bar1 {
  width: 100%;
  height: 20px;
  margin: 50px 0;
  border-radius: 20px;
  background-color: #f5f5f5;
}
.horizontal-progress-bar1 div {
  width: 50%;
  height: 20px;
  border-radius: 20px;
  background-color: #4caf50;
  transition: width 1s ease-in-out;
}
.horizontal-progress-bar1:hover div {
  width: 100%;
}

上面的代码中，.horizontal-progress-bar1是整个进度条的样式，div是进度条的进度条样式。通过控制div的width，实现进度条的动画效果。

3.2 方式二

这种方式使用box-shadow属性控制进度条的宽度和位置。


.horizontal-progress-bar2 {
  width: 100%;
  height: 20px;
  border-radius: 20px;
  background-color: #f5f5f5;
  overflow: hidden;
}
.horizontal-progress-bar2::after {
  content: "";
  display: block;
  height: 56px;
  border-radius: 20px;
  background-color: #4caf50;
  box-shadow: 0 0 0 100vw #4caf50;
  animation: progress2 3s ease-out forwards;
}
@keyframes progress2 {
  from {
    width: 0;
    height: 56px;
  }
  to {
    width: 100%;
    height: 56px;
  }
}

上面的代码中，.horizontal-progress-bar2设置了进度条的基本样式，而通过在::after中，设置背景色和box-shadow达到了进度条动画的效果。

4. 圆形进度条

圆形进度条采用圆形样式来展示进度的一种进度条。

4.1 方式一

这种方式通过使用border-radius、border和transform属性来控制进度条和进度条的位置。


.circle-progress-bar1 {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 50px auto;
  border-radius: 50%;
  background-color: #f5f5f5;
}
.circle-progress-bar1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  border-radius: 50% 50% 0 0;
  border: 1px solid #4caf50;
  transform-origin: bottom center;
  transform: rotate(94deg);
}
.circle-progress-bar1::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  border-radius: 0 0 50% 0;
  border: 1px solid #4caf50;
  transform-origin: bottom center;
  transform: rotate(90deg);
}
.circle-progress-bar1 span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0px, 75px, 150px, 75px);
  animation: progress3 3s linear forwards;
  background-color: #4caf50;
}
@keyframes progress3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

上面的代码中，圆形进度条按照标准的HTML文件结构设计，添加before和after标签，使用CSS设置圆形进度条和圆环部分的样式。同时，样式中的clip属性对圆环进行了剪裁，搭配transform实现进度条的动画效果。

4.2 方式二

这种方式主要通过使用CSS3的animation属性来实现圆形进度条的动画效果。


.circle-progress-bar2 {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 50px auto;
  border-radius: 50%;
  background-color: #f5f5f5;
}
.circle-progress-bar2 span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0px, 75px, 150px, 75px);
  background-color: transparent;
  border-left: 5px solid #4caf50;
  border-bottom: 5px solid #4caf50;
  transform: rotate(-90deg);
  animation: progress4 3s linear forwards;
}
@keyframes progress4 {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

上面的代码中，圆形进度条按照标准的HTML文件结构设计，使用CSS设置圆形进度条和圆环部分的样式。同时，样式中的clip属性和borderLeft/borderBottom属性搭配transform实现圆环动画效果。

5. 结语

本文介绍了纯CSS创建各类进度条的N种方式，涵盖了最常见和最基本的进度条类型。希望对Web前端开发者们有所帮助。

纯CSS创建各类进度条的 N 种方式