css实现进度条效果代码-html代码-BFW代码库

代码语言：html
所属分类：进度条
代码描述：css实现进度条效果代码，包含长条与圆环进度条，无js代码。纯粹通过div+css实现。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
progress {
  border: 0;
  block-size: 24px;
}

progress::-webkit-progress-bar {
  background-color: var(--color-aux-700);
}

progress::-webkit-progress-value {
  background-color: var(--color-core-secondary);
}

.progress-container {
  text-align: center;
  font-weight: 600;
}

.progress-bar {
  block-size: 24px;
  background-color: var(--color-aux-700);
  border-radius: var(--space-base-1x);
  overflow: hidden;
  position: relative;
}
.progress-bar::after {
  content: " ";
  block-size: 100%;
  inline-size: calc(var(--current-progress) * 1%);
  background-color: var(--color-core-secondary);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

progress {
  inline-size: 100%;
}

/* Start Radial Progress From: https://codepen.io/keithpickering/pen/JjowRo */
.progress--circle {
  position: relative;
  display: inline-block;
  margin: 1rem;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--color-aux-700);
}
.progress--circle:before {
  content: "";
  position: absolute;
  top: 12.5px;
  left: 12.5px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: var(--color-aux-950);
}
.progress--circle:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-core-secondary);
}

.progress__number {
  position: absolute;
  top: 50%;
  width: 100%;
  line-height: 1;
  text-align: center;
  color: var(--color-aux-100);
  transform: translateY(-50%);
}

/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/
.progress--bar.progress--0:after {
  width: 0%;
}

.progress--circle.progress--0:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(90deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--5:after {
  width: 5%;
}

.progress--circle.progress--5:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(108deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--10:after {
  width: 10%;
}

.progress--circle.progress--10:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(126deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--15:after {
  width: 15%;
}

.progress--circle.progress--15:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(144deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--20:after {
  width: 20%;
}

.progress--circle.progress--20:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(162deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--25:after {
  width: 25%;
}

.progress--circle.progress--25:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(180deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--30:after {
  width: 30%;
}

.progress--circle.progress--30:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(198deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--35:after {
  width: 35%;
}

.progress--circle.progress--35:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(216deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--40:after {
  width: 40%;
}

.progress--circle.progress--40:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(234deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--45:after {
  width: 45%;
}

.progress--circle.progress--45:after {
  background-image: linear-gradient(90deg, var(--color-aux-700) 50%, transparent 50%, transparent), linear-gradient(252deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--50:after {
  width: 50%;
}

.progress--circle.progress--50:after {
  background-image: linear-gradient(-90deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--55:after {
  width: 55%;
}

.progress--circle.progress--55:after {
  background-image: linear-gradient(-72deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--60:after {
  width: 60%;
}

.progress--circle.progress--60:after {
  background-image: linear-gradient(-54deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--65:after {
  width: 65%;
}

.progress--circle.progress--65:after {
  background-image: linear-gradient(-36deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--70:after {
  width: 70%;
}

.progress--circle.progress--70:after {
  background-image: linear-gradient(-18deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--75:after {
  width: 75%;
}

.progress--circle.progress--75:after {
  background-image: linear-gradient(0deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--80:after {
  width: 80%;
}

.progress--circle.progress--80:after {
  background-image: linear-gradient(18deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--85:after {
  width: 85%;
}

.progress--circle.progress--85:after {
  background-image: linear-gradient(36deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--90:after {
  width: 90%;
}

.progress--circle.progress--90:after {
  background-image: linear-gradient(54deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--95:after {
  width: 95%;
}

.progress--circle.progress--95:after {
  background-image: linear-gradient(72deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

.progress--bar.progress--100:after {
  width: 100%;
}

.progress--circle.progress--100:after {
  background-image: linear-gradient(90deg, var(--color-core-secondary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--color-core-secondary) 50%, var(--color-aux-700) 50%, var(--color-aux-700));
}

/* End Radial Progress From: https://codepen.io/keithpickering/pen/JjowRo */
/**********
*** SETUP
**********/
/***** Propert.........完整代码请登录后点击上方下载按钮下载查看