文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >复杂的比例三元进度条设计仅使用CSS

问复杂的比例三元进度条设计仅使用CSS
EN

Stack Overflow用户
提问于 2021-05-14 23:26:19
回答 4查看 1.1K关注 0票数 10

我已经做了一个自定义进度条，包括三个分隔部分(一个独特的可定制的中心部分，一个左部分和一个右侧部分)，但我在所有阶段都很难正确地对齐中心块。

首先，我将使用三种图形布局显示所需的结束状态，然后我将描述当前的问题，最后我将提供我当前的解决方案，这是错误的，需要某种类型的修复。

三种理想状态：

显示1%左对齐的起始状态的期望结果：

​

50%中心阻滞中段理想效果

​

想要的端sate与中心块完美地停止在100%右对齐：

​

​

代码语言：javascript
复制
body{margin: 100px; background: #CCC}

.fullbar{
    background-color: blue;
    width: 100%;
}

.progress{
    background: green;
  margin: 10px 0 0 0;
    text-align: right;
    padding: 0 0px 1px 0px;
    line-height: 5px;
}

.number{
  background: inherit;
  color: #FFF;
    padding: 4px;
    padding: 0 2px 1px 3px;
 
}
代码语言：javascript
复制
<div class="fullbar">
<div class="progress" style="width:50%">
    <div class="number">50%</div>
</div>
</div>

​

问题

当状态为50%时，中间块应在中间完全水平地对齐。但事实并非如此。行的末尾居中，而不是包含实际数字"50%“的div。

​

​

PS。由于一个未知的原因，代码视图中没有正确地呈现中间块的主体。也许我广泛的css重置使我的进度条看起来与这里的普通代码不同。但是，与类名为number的div有关，它需要正确地居中，而现在不是这样。

我的Hacky解决方案，不正确工作，也不优雅的

我尝试用width:112%将中间块包装到进度条上，以使中间块达到完美的中间位置，如下所示：

代码语言：javascript
复制
<div class="fullbar">
  <div style="width:112%">
    <div class="progress" style="width:50%">
      <div class="number">50%</div>
    </div>
  </div>
</div>

然而，虽然这确实使50%看起来完全以时间为中心，但最终状态100%现在被推到右边的div边界之外，这使得解决方案不正确且不可用。

主要问题和第一篇(50分)

最好能找到另一个CSS (flex或calc)解决方案，在这个解决方案中，所有三种理想的状态(见上面的三幅图)都完美地对齐，其中的状态符合起始状态、结束状态以及“比例”之间的所有内容。

奖金问题和第二局(100分)

A部分)一个优雅的方式来动画的进度(中间部分和左彩色栏)，只有CSS，一个轻松-轻松的运动，延迟1秒后的页面加载。

部分B)动画(和数字)应该从0%开始，然后在动画中显示的数字在动画中增长到XX% (在html中设置为%)，并以正确的进度号和正确的水平进度位置结束。

html
css
flexbox
progress-bar
css-calc
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2021-05-15 08:12:57

你可以像下面这样做。我用不同的颜色来更好地看到结果。

​

代码语言：javascript
复制
body {
  margin: 100px;
  background: #CCC
}

.fullbar {
  background-color: blue;
}

.progress {
  background: lightgreen;
  margin: 10px 0 0 0;
  height: 5px;
  position:relative; /* relative here */
  width:var(--p);
}

.number {
  position:absolute; /* absolute here */
  background: rgba(255,0,0,0.5);
  left:100%; /* push to the right side */
  transform:translateX(calc(-1*var(--p))); /* offset to the left based on --p */
  top:-10px;
  bottom:-10px;
  color: #FFF;
  padding: 0 2px 1px 3px;
}
代码语言：javascript
复制
<div class="fullbar">
  <div class="progress" style="--p:0%">
    <div class="number">0%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:20%">
    <div class="number">20%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:50%">
    <div class="number">50%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:80%">
    <div class="number">80%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:100%">
    <div class="number">100%</div>
  </div>
</div>

​

另一个只使用一个div的想法：

​

代码语言：javascript
复制
body {
  margin: 100px;
  background: #CCC
}

.progress {
  margin: 20px 0;
  height: 10px;
  position: relative;
  background: linear-gradient(lightgreen 0 0) 0/var(--p) 100% no-repeat blue;
}

.progress::before {
  content: attr(style);
  font-family: monospace;
  font-size:20px;
  white-space:nowrap;
  text-indent: -4ch;
  overflow: hidden;
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  border:5px solid transparent;
  top:50%;
  left: var(--p);
  transform: translate(calc(-1*var(--p)),-50%);
  color: #FFF;
}
代码语言：javascript
复制
<div class="progress" style="--p:0%"></div>

<div class="progress" style="--p:20%"></div>

<div class="progress" style="--p:50%"></div>


<div class="progress" style="--p:80%"></div>

<div class="progress" style="--p:100%"></div>

​

更新

动画：

​

代码语言：javascript
复制
body {
  margin: 100px;
  background: #CCC
}

.progress {
  margin: 20px 0;
  height: 10px;
  position: relative;
  background: linear-gradient(lightgreen 0 0) 0/var(--p) 100% no-repeat blue;
  animation:p1 1s 1s both;
}

.progress::before {
  content: attr(style);
  font-family: monospace;
  font-size:20px;
  white-space:nowrap;
  text-indent: -4ch;
  overflow: hidden;
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  border:5px solid transparent;
  top:50%;
  left: var(--p);
  transform: translate(calc(-1*var(--p)),-50%);
  color: #FFF;
  animation:p2 1s 1s both;
}
@keyframes p1 {from {background-size:0 100%}}
@keyframes p2 {from {left:0;transform: translate(0%,-50%)}}
代码语言：javascript
复制
<div class="progress" style="--p:0%"></div>

<div class="progress" style="--p:20%"></div>

<div class="progress" style="--p:50%"></div>

<div class="progress" style="--p:80%"></div>

<div class="progress" style="--p:100%"></div>

​

对于数字动画，我会使用@property，但它现在只能在铬边上使用：

​

代码语言：javascript
复制
body {
  margin: 100px;
  background: #CCC
}

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --s {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

.progress {
  margin: 20px 0;
  height: 10px;
  position: relative;
  background: linear-gradient(lightgreen 0 0) 0/calc(var(--p,0)*1%) 100% no-repeat blue;
  animation:p1 1s 1s both;
  --s:var(--p);
  counter-set:num var(--s);
}

.progress::before {
  content: counter(num) "%";
  font-family: monospace;
  font-size:20px;
  white-space:nowrap;
  overflow: hidden;
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  border:5px solid transparent;
  top:50%;
  left: calc(var(--p)*1%);
  transform: translate(calc(-1%*var(--p)),-50%);
  color: #FFF;
}
@keyframes p1 {from {--p:0;--s:0}}
代码语言：javascript
复制
<div class="progress" style="--p:0"></div>

<div class="progress" style="--p:20"></div>

<div class="progress" style="--p:50"></div>


<div class="progress" style="--p:80"></div>

<div class="progress" style="--p:100"></div>

​

在得到更多支持之前，您可以假装如下所示：

​

代码语言：javascript
复制
body {
  margin: 100px;
  background: #CCC
}

.progress {
  margin: 20px 0;
  height: 10px;
  position: relative;
  background: linear-gradient(lightgreen 0 0) 0/var(--p) 100% no-repeat blue;
  animation:p1 1s 1s both;
}

.progress::before {
  content: attr(style);
  font-family: monospace;
  font-size:20px;
  white-space:nowrap;
  text-indent: -4ch;
  overflow: hidden;
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  border:5px solid transparent;
  top:50%;
  left: var(--p);
  transform: translate(calc(-1*var(--p)),-50%);
  color: #FFF;
  animation:p2 1s 1s both,p3 0.8s 1s both;
}
@keyframes p1 {from {background-size:0% 100%}}
@keyframes p2 {from {left:0%;transform: translate(0%,-50%)}}
@keyframes p3 { /* put some randome number to fake the animation*/
  0%  {content:"--p:0%"}
  15% {content:"--p:5%"}
  30% {content:"--p:9%"}
  45% {content:"--p:10%"}
  60% {content:"--p:11%"}
  75% {content:"--p:40%"}
  90% {content:"--p:20%"}
}
代码语言：javascript
复制
<div class="progress" style="--p:0%"></div>

<div class="progress" style="--p:20%"></div>

<div class="progress" style="--p:50%"></div>


<div class="progress" style="--p:80%"></div>

<div class="progress" style="--p:100%"></div>

​

或者一些疯狂的想法，比如：

​

代码语言：javascript
复制
body {
  margin: 100px;
  background: #CCC
}

.progress {
  margin: 20px 0;
  height: 10px;
  position: relative;
  background: linear-gradient(lightgreen 0 0) 0/calc(var(--p)*1%) 100% no-repeat blue;
  animation:p1 1s 1s both;
}

.progress::before {
  content: "0% \A 1% \A 2% \A 3% \A 4% \A 5% \A 6% \A 7% \A 8% \A 9% \A 10% \A 11% \A 12% \A 13% \A 14% \A 15% \A 16% \A 17% \A 18% \A 19% \A 20% \A 21% \A 22% \A 23% \A 24% \A 25% \A 26% \A 27% \A 28% \A 29% \A 30% \A 31% \A 32% \A 33% \A 34% \A 35% \A 36% \A 37% \A 38% \A 39% \A 40% \A 41% \A 42% \A 43% \A 44% \A 45% \A 46% \A 47% \A 48% \A 49% \A 50% \A 51% \A 52% \A 53% \A 54% \A 55% \A 56% \A 57% \A 58% \A 59% \A 60% \A 61% \A 62% \A 63% \A 64% \A 65% \A 66% \A 67% \A 68% \A 69% \A 70% \A 71% \A 72% \A 73% \A 74% \A 75% \A 76% \A 77% \A 78% \A 79% \A 80% \A 81% \A 82% \A 83% \A 84% \A 85% \A 86% \A 87% \A 88% \A 89% \A 90% \A 91% \A 92% \A 93% \A 94% \A 95% \A 96% \A 97% \A 98% \A 99% \A 100%";
  font-family: monospace;
  font-size:20px;
  width:4ch;
  line-height:1em;
  height:1em;
  text-align:center;
  overflow: hidden;
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  border:5px solid transparent;
  top:50%;
  left: calc(var(--p)*1%);
  transform: translate(calc(-1%*var(--p)),-50%);
  color: #0000;
  text-shadow:0 calc(var(--p)*-1em) 0 #fff;
  animation:p2 1s 1s both,p3 1s 1s steps(var(--p)) both;
}
@keyframes p1 {from {background-size:0% 100%}}
@keyframes p2 {from {left:0%;transform: translate(0%,-50%)}}
@keyframes p3 {from {text-shadow:0 0 0 #fff}}
代码语言：javascript
复制
<div class="progress" style="--p:0"></div>

<div class="progress" style="--p:20"></div>

<div class="progress" style="--p:50"></div>

<div class="progress" style="--p:80"></div>

<div class="progress" style="--p:100"></div>

​

票数 13
EN

Stack Overflow用户

发布于 2021-06-02 10:41:53

@Temani的钉牢给出了他的解决方案，他完成了所有的工作，我在这里补充他的最后一个解决方案。

我改变的是：

  • 进度栏的左侧和右侧现在是两个独立的(伪)元素，并使用flex-grow来增长到正确的比例--而calc的比例更少。
  • 拇指不再需要手动定位了。它通过使用flex-box和伪元素来正确定位。
  • 拇指又是自己的一种元素。这样，我可以使数字再次成为真实的文本，而不是text-shadow的。如果你想把这个东西变成滑块，你也可以用JS来捕捉事件。
  • 移除透明边框。我觉得有点太刻薄了。只是增加了线的高度从1em到2em，并增加了一个偏移的(2em - 1em) * -0.5 = -0.5em。

​

代码语言：javascript
复制
body {
  margin: 0;
  padding: 20px;
  background: #EEE;
  font-family: sans-serif;
}

.progress {
  display: flex;
  align-items: center;
  margin: 20px;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.progress::before, .progress::after {
  content: '';
  height: 10px;
  animation: inherit;
}

.progress::before {
  background-color: #1306F8;
  flex-grow: 0;
  animation-name: p_before;
}

.progress::after {
  background-color: #E1E1E1;
  flex-grow: 100;
  animation-name: p_after;
}

.progress .thumb {
  height: 1em;
  padding: .3em .4em;
  font-size: 20px;
  line-height: 2em;
  text-align: center;
  color: #FFF;
  background-color: #1306F8;
  overflow: hidden;
  z-index: 1;
  animation: inherit;
}

.progress .thumb::before {
  content: "0% \A 1% \A 2% \A 3% \A 4% \A 5% \A 6% \A 7% \A 8% \A 9% \A 10% \A 11% \A 12% \A 13% \A 14% \A 15% \A 16% \A 17% \A 18% \A 19% \A 20% \A 21% \A 22% \A 23% \A 24% \A 25% \A 26% \A 27% \A 28% \A 29% \A 30% \A 31% \A 32% \A 33% \A 34% \A 35% \A 36% \A 37% \A 38% \A 39% \A 40% \A 41% \A 42% \A 43% \A 44% \A 45% \A 46% \A 47% \A 48% \A 49% \A 50% \A 51% \A 52% \A 53% \A 54% \A 55% \A 56% \A 57% \A 58% \A 59% \A 60% \A 61% \A 62% \A 63% \A 64% \A 65% \A 66% \A 67% \A 68% \A 69% \A 70% \A 71% \A 72% \A 73% \A 74% \A 75% \A 76% \A 77% \A 78% \A 79% \A 80% \A 81% \A 82% \A 83% \A 84% \A 85% \A 86% \A 87% \A 88% \A 89% \A 90% \A 91% \A 92% \A 93% \A 94% \A 95% \A 96% \A 97% \A 98% \A 99% \A 100%";
  position: relative;
  display: block;
  text-align: center;
  white-space: pre-line;
  margin-top: -0.5em;
  top: 0;
  animation: inherit;
  animation-timing-function: steps(var(--p));
  animation-name: p_thumb;
}

@keyframes p_before { to { flex-grow:             var(--p)  } }
@keyframes p_after  { to { flex-grow: calc( 100 - var(--p)) } }
@keyframes p_thumb  { to { top:       calc(-2em * var(--p)) } }
代码语言：javascript
复制
<div class="progress" style="--p:0"><div class="thumb"></div></div>
<div class="progress" style="--p:20"><div class="thumb"></div></div>
<div class="progress" style="--p:40"><div class="thumb"></div></div>
<div class="progress" style="--p:60"><div class="thumb"></div></div>
<div class="progress" style="--p:80"><div class="thumb"></div></div>
<div class="progress" style="--p:100"><div class="thumb"></div></div>

​

就像我说的，Temani做了腿活，可能会按计划得到赏金(奖励现有的答案)。

票数 2
EN

Stack Overflow用户

发布于 2021-06-05 21:49:41

到目前为止，答案真的很棒，特别是特玛尼·阿菲夫的文本缩进技巧。

我最初考虑做一些类似的事情，但想走一个不同的方向。最后，我确定了一个解决方案，利用新的CSS @property定义和一些counter-reset技巧将数值CSS自定义属性转换为字符串，然后我们可以在我们添加的伪选择器的content属性中引用这些字符串。

TL;DR

这里是我的解决方案的完整代码片段，也在下面的详细说明中。

​

代码语言：javascript
复制
@property --progress-value {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
:root {
  --progress-bar-color: #cfd8dc;
  --progress-value-color: #2196f3;
  --progress-empty-color-h: 4.1;
  --progress-empty-color-s: 89.6;
  --progress-empty-color-l: 58.4;
  --progress-filled-color-h: 122.4;
  --progress-filled-color-s: 39.4;
  --progress-filled-color-l: 49.2;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  margin: 0;
  font-family: "Roboto Mono", monospace;
}

progress[value] {
  display: block;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 6px;
  border: 0;
  --border-radius: 10px;
  border-radius: var(--border-radius);
  counter-reset: progress var(--progress-value);
  --progress-value-string: counter(progress) "%";
  --progress-max-decimal: calc(var(--value, 0) / var(--max, 0));
  --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0));
  --progress-value-percent: calc(var(--progress-value-decimal) * 100%);
  --progress-value-color: hsl(
    calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg)
    calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%)
    calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%)
  );
  -webkit-animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress;
          animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress;
}
@supports selector(::-moz-progress-bar) {
  progress[value] {
    --progress-value-decimal: calc(var(--value, 0) / var(--max, 0));
  }
}

progress[value]::-webkit-progress-bar {
  background-color: var(--progress-bar-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

progress[value]::-webkit-progress-value {
  width: var(--progress-value-percent) !important;
  background-color: var(--progress-value-color);
  border-radius: var(--border-radius);
}

progress[value]::-moz-progress-bar {
  width: var(--progress-value-percent) !important;
  background-color: var(--progress-value-color);
  border-radius: var(--border-radius);
}

progress[value]::after {
  display: flex;
  align-items: center;
  justify-content: center;
  --size: 32px;
  width: var(--size);
  height: var(--size);
  position: absolute;
  left: var(--progress-value-percent);
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--progress-value-color);
  border-radius: 50%;
  content: attr(value);
  content: var(--progress-value-string, var(--value));
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

@-webkit-keyframes progress {
  from {
    --progress-value: 0;
  } to {
    --progress-value: var(--value);
  }
}

@keyframes progress {
  from {
    --progress-value: 0;
  } to {
    --progress-value: var(--value);
  }
}
代码语言：javascript
复制
<progress value="0" max="100" style="--value: 0; --max: 100;"></progress>
<progress value="25" max="100" style="--value: 25; --max: 100;"></progress>
<progress value="50" max="100" style="--value: 50; --max: 100;"></progress>
<progress value="75" max="100" style="--value: 75; --max: 100;"></progress>
<progress value="100" max="100" style="--value: 100; --max: 100;"></progress>

​

CodePen Link: Cdpn.io/e/

最后的产品(屏幕截图，点击上面附加代码片段底部的“运行片段”，查看动画的动作)。

​

​

详细解释

HTML已经有了一个内置的元素，其中包含了几个伪元素，所以我真的很想继续使用它，并围绕它进行样式化。与combined的新@property定义相结合，这在很大程度上是成功的，它允许我们在其他方面创建更多的动态动画。

事实上，在这个问题上发布了另一个伟大答案的Temani Afif在这里写了一篇很棒的文章(我们最终可以动画CSS梯度。，Temani Afif)。

使用新的@property定义不仅允许我们动画进度条的实际值，我们可以使用它来更改进度条内进度值的宽度和%标签，而且它还允许我们在进度变化时生成动态的颜色变化。

在下面的示例中，我选择从红色过渡到绿色，以代表进展。如果您希望使用单一颜色而不是这种变化的颜色，只需将所有--progress-value-color HSL值替换为单个颜色值即可。

类似地，我在animation行中使用一个animation来调整每个进度条的动画的animation-duration以相同的速度移动，这样与所有进度条同时启动和完成它们的动画相比，每个进度条同时传递相同的值。这意味着，如果两个进度条达到50%，而其中一个的值为50%，该进度条将停止动画，而另一个将继续动画到其新值。

如果希望所有进度条的开始和结束同步，只需将该calc()替换为单个值(例如750ms、3s等)。

​

代码语言：javascript
复制
@property --progress-value {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
:root {
  --progress-bar-color: #cfd8dc;
  --progress-value-color: #2196f3;
  --progress-empty-color-h: 4.1;
  --progress-empty-color-s: 89.6;
  --progress-empty-color-l: 58.4;
  --progress-filled-color-h: 122.4;
  --progress-filled-color-s: 39.4;
  --progress-filled-color-l: 49.2;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  margin: 0;
  font-family: "Roboto Mono", monospace;
}

progress[value] {
  display: block;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 6px;
  border: 0;
  --border-radius: 10px;
  border-radius: var(--border-radius);
  counter-reset: progress var(--progress-value);
  --progress-value-string: counter(progress) "%";
  --progress-max-decimal: calc(var(--value, 0) / var(--max, 0));
  --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0));
  --progress-value-percent: calc(var(--progress-value-decimal) * 100%);
  --progress-value-color: hsl(
    calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg)
    calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%)
    calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%)
  );
  -webkit-animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress;
          animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress;
}
@supports selector(::-moz-progress-bar) {
  progress[value] {
    --progress-value-decimal: calc(var(--value, 0) / var(--max, 0));
  }
}

progress[value]::-webkit-progress-bar {
  background-color: var(--progress-bar-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

progress[value]::-webkit-progress-value {
  width: var(--progress-value-percent) !important;
  background-color: var(--progress-value-color);
  border-radius: var(--border-radius);
}

progress[value]::-moz-progress-bar {
  width: var(--progress-value-percent) !important;
  background-color: var(--progress-value-color);
  border-radius: var(--border-radius);
}

progress[value]::after {
  display: flex;
  align-items: center;
  justify-content: center;
  --size: 32px;
  width: var(--size);
  height: var(--size);
  position: absolute;
  left: var(--progress-value-percent);
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--progress-value-color);
  border-radius: 50%;
  content: attr(value);
  content: var(--progress-value-string, var(--value));
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

@-webkit-keyframes progress {
  from {
    --progress-value: 0;
  } to {
    --progress-value: var(--value);
  }
}

@keyframes progress {
  from {
    --progress-value: 0;
  } to {
    --progress-value: var(--value);
  }
}
代码语言：javascript
复制
<progress value="0" max="100" style="--value: 0; --max: 100;"></progress>
<progress value="25" max="100" style="--value: 25; --max: 100;"></progress>
<progress value="50" max="100" style="--value: 50; --max: 100;"></progress>
<progress value="75" max="100" style="--value: 75; --max: 100;"></progress>
<progress value="100" max="100" style="--value: 100; --max: 100;"></progress>

​

CodePen Link: Cdpn.io/e/

当然，对于每个进度条，我们都需要同时声明value和max属性和CSS自定义属性(变量)，这并不理想。但是，CSSWG目前正在对attr()进行一些不同的改进，这将允许我们很快以任何指定的格式访问这些属性值，而不需要像我在上面的示例中那样额外地使用CSS自定义属性。

浏览器对attr()的支持

​

​

正如您在官方attr()中的浏览器支持部分中所看到的那样，当前对于attr()的这些附加特性(如回退和类型或单元)的浏览器支持非常少。我们还需要能够在任何CSS属性中使用attr()，特别是CSS自定义属性，而不仅仅是content属性，这样才能完全不使用CSS自定义属性。

这些改进目前处于“编辑器草稿”的状态，没有生产浏览器支持，但这种情况最早可能会在明年发生变化。所以现在，除了属性之外，我们还需要使用CSS自定义属性。此外，火狐还不支持这个新的属性定义，但是我的解决方案包括一个@supports查询回退，它仍然可以确保进度条是正确的宽度，并根据它们的值使用正确的颜色。

一旦所有这些CSS和Houdini更新都可以在所有主要浏览器上使用，希望在明年，所有这些都可以用以下的本地HTML属性实现：

代码语言：javascript
复制
<progress value="0" max="100"></progress>
<progress value="25" max="100"></progress>
<progress value="50" max="100"></progress>
<progress value="75" max="100"></progress>
<progress value="100" max="100"></progress>

此时，与其使用CSS自定义属性值--value和--max，不如以这种方式在CSS中设置它们：

代码语言：javascript
复制
progress[value] {
  --value: attr(value number);
}
progress[max] {
  --max: attr(max number);
}

其余的逻辑将保持不变。有关attr()的更多详细信息，请参阅MDN文档(此处：attr() )

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67541996

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档