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(-.........完整代码请登录后点击上方下载按钮下载查看