我如何对进度条执行此操作？（html-css）

Question

我如何对进度条执行此操作，如下所示：

 .detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { background: #904BFF; height: 100%; border-radius: 10px; } .detail-load-text { position: absolute; right: 0; left: 0; top: 10px; text-align: center; color: #fff; font-weight: 600; font-size: 17px; }

 <div class="detail-pop-item"> <div class="detail-load"> <div class="detail-loading" style="width: 80%;"></div> </div> <div class="detail-load-text">80%</div> </div>

我想做的进度条就像我上面分享的图片。 任何人都可以帮忙吗？

Answer 1

这是您想要完成的示例：

https://codepen.io/robinrendle/pen/wKqmbW

<div class="wrapper">
  <div class="bg">
    <div class="el"></div>
  </div>
</div>

$loadingTime: 10s;
$color: rgb(255,0,0);

body {
  background-color: white;
}

@keyframes loading {
  0% {
    width: 0;
  } 100% {
    width: 100%;
  }
}

@keyframes percentage { 
  @for $i from 1 through 100 {
    $percentage: $i + "%";
    #{$percentage} {
      content: $percentage;
    }
  }
}

.bg {
  background-color: $color;
  animation: loading $loadingTime linear infinite;
}

.el{
  color: $color;
  width: 200px;
  border: 1px solid $color;
  
  &:after {
    padding-left: 20px;
    content: "0%";
    display: block;
    text-align: center;
    font-size: 50px;
    padding: 10px 20px;
    color: rgb(0,255,255);
    mix-blend-mode: difference;
    animation: percentage $loadingTime linear infinite;
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

这里的关键项目是mix-blend-mode属性，它定义了元素的内容应该如何与其背景混合。

您可以在此处和此处了解更多信息。

Answer 2

按照 Veselin 的回答，您只需$color: rgb(255,0,0);如下方式更改颜色属性： $color: rgb(255,0,0); 变成$color: rgb(255,0,255); 和

.el{
  ...
  &:after {
    ...
    color: rgb(0,255,255);
  }
}

变成

.el{
  ...
  &:after {
    ...
    color: rgb(0,255,0);
  }
}

结果是：

$loadingTime: 10s;
$color: rgb(255,0,255);

body {
  background-color: white;
}

@keyframes loading {
  0% {
    width: 0;
  } 100% {
    width: 100%;
  }
}

@keyframes percentage { 
  @for $i from 1 through 100 {
    $percentage: $i + "%";
    #{$percentage} {
      content: $percentage;
    }
  }
}

.bg {
  background-color: $color;
  animation: loading $loadingTime linear infinite;
}

.el{
  color: $color;
  width: 200px;
  border: 1px solid $color;
  
  &:after {
    padding-left: 20px;
    content: "0%";
    display: block;
    text-align: center;
    font-size: 50px;
    padding: 10px 20px;
    color: rgb(0,255,0);
    mix-blend-mode: difference;
    animation: percentage $loadingTime linear infinite;
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Answer 3

您可以使用clip-path属性来实现您想要的结果。 我在代码段中包含了一些虚拟 javascript 来模拟加载。

 const front = document.getElementById('progress-front'); const back = document.getElementById('progress-back'); let progress = 0; setInterval(() => { front.style.webkitClipPath = `inset(0 0 0 ${progress}%)`; progress++; if(progress >= 100) { progress = 0; } front.innerHTML = back.innerHTML = progress + "%"; }, 50);

 .progress { position: relative; display: flex; font-size: 50px; border: 2px solid purple; overflow: hidden; width: 100%; } .back { display: flex; justify-content: center; align-items: center; width: 100%; background: purple; color: white; } .front { position: absolute; display: flex; justify-content: center; align-items: center; left: 0; width: 100%; right: 0; top: 0; bottom: 0; background: white; color: purple; }

 <div class="progress"> <div class="back" id="progress-back">0%</div> <div class="front" id="progress-front">0%</div> </div>

Answer 4

我使用了一种不同的方法，您可以在其中设置一个 CSS 变量来控制加载进度的长度以及显示值。

因为我使用了一个伪类来显示值，所以我需要使用数字破解，在::after伪元素上使用计数器重置。

至于让深色文字变成白色，你可以使用mix-blend-mode: color-dodge 。 正如您所看到的，它并不完美，但也许足够好？

 .detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { background: #904BFF; height: 100%; border-radius: 10px; /* ADDED */ width: calc(var(--progress) * 1%); position: relative; } .detail-load > .detail-loading::after { font-weight: 600; font-size: 17px; /* ADDED */ counter-reset: number-hack var(--progress); content: counter(number-hack)"%"; position: absolute; right: 0px; top: 50%; transform: translate(50%, -50%); color: #d2b6ff; mix-blend-mode: color-dodge; } .detail-load > .detail-loading.grey-text::after { color: #b5b5b5; }

 <div class="detail-pop-item"> <div class="detail-load"> <div class="detail-loading" style="--progress: 30"></div> </div> </div> <div class="detail-pop-item"> <div class="detail-load"> <div class="grey-text detail-loading" style="--progress: 60"></div> </div> </div>