进度条 - 颜色变化答案

【问题标题】：Progress bar - color change进度条 - 颜色变化
【发布时间】：2020-06-25 21:02:46
【问题描述】：

我在网页中添加了一个进度条，现在我正在尝试将指示器的颜色（渐变：hsl(6, 100%, 80%) 更改为 hsl(335, 100%, 65%)）。有人可以帮助我怎么做吗？

这是 HTML：

<progress value = "815" max = "1000" > </progress>

当前视图：

所需视图：

也不太清楚如何在顶部添加显示“185 GB LEFT”的白框，有什么想法吗？

【问题讨论】：

分享你的代码
请将您尝试的代码添加到问题中。
您可以使用渐变作为背景颜色，例如background-image: linear-gradient(to right, red , yellow);。
这里有一个很好的解决方案。我谷歌 1 分钟！ ^^codepen.io/ronarr/pen/LYYBOJP

标签： html css progress

【解决方案1】：

HTML：

<div id="container">
    <p>You have used 815 gb!</p>
    <progress color="red" value = "815" max = "1000" > </progress>
</div>

CSS：

:root{
    --progColor: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    --progHeight: 20px;
}

#container{
  width: fit-content;
  height: fit-content;
  background-color: #172657;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  color: white;
}

progress, progress::-webkit-progress-value {
    width: 500px;
    border: 0;
    height: var(--progHeight);
    border-radius: 20px;
    background: var(--progColor);
}
progress::-webkit-progress-bar {
    width: 500px;
    border: 0;
    height: var(--progHeight);
    border-radius: 20px;
    background: white;
}

progress::-moz-progress-bar {
    width: 500px;
    border: 0;
    height: var(--progHeight);
    border-radius: 20px;
    background: var(--progColor);
}

为了在不同的浏览器上工作，重复了很多进度条代码。对于右上角的白框，我建议查看绝对定位并在 CSS 中查找 SVG。 SVG 将允许您输入将对齐以创建消息形状的坐标。绝对定位将允许您将消息放在进度条上。此外，我建议您更改字体并根据自己的喜好自定义颜色。

【讨论】：