div+css实现双进度条代码-html代码-BFW代码库

div+css实现双进度条代码

代码语言：html

所属分类：进度条

代码描述：div+css实现双进度条代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
  
  
  
<style>
* {
  font: inherit;
}

html, body, [role=group], [for], [id=ruler] {
  display: grid;
}

html {
  min-height: 100%;
}

body {
  background: #ededed;
}

[role=group] {
  grid-gap: 0.5em;
  place-self: center;
  container-type: inline-size;
  margin: 0 auto;
  width: min(40em, 100%);
  color: #323232;
  font: 500 1em roboto, sans-serif;
}
[role=group]::before, [role=group] progress {
  grid-area: 3/1;
  border-radius: 5px;
}
[role=group]::before {
  background: repeating-linear-gradient(-45deg, #dadada 0 0.375em, #0000 0 0.75em);
  content: "";
}

[id=group-label] {
  grid-area: 2/1;
}

:is([for], progress):nth-of-type(1) {
  --v: var(--v0) ;
}

:is([for], progress):nth-of-type(2) {
  --v: var(--v1) ;
}

[for] {
  justify-self: start;
  translate: calc(var(--v)*1cqi - 50%);
}

label {
  grid-area: 1/1/span 3;
  grid-template-rows: subgrid;
  justify-items: center;
  color: #0000;
  pointer-events: none;
}
label span {
  grid-area: 1/1;
  width: 2em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}
label::before {
  grid-row: 2/span 2;
  width: 6px;
  background: radial-gradient(3px at 50% 3px, currentcolor 2px, #0000), linear-gradient(#0000 3px, currentcolor 0) 50%/2px no-repeat;
  color: #bfbfbf;
  content: "";
}
label::after {
  grid-area: 1/1;
  ali.........完整代码请登录后点击上方下载按钮下载查看