进度条-颜色变化

Question

我向网页添加了进度条，现在尝试更改指示器的颜色（渐变：

hsl(6, 100%, 80%)

到

hsl(335, 100%, 65%)

）。有人可以帮我怎么做吗？

这是 HTML：

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

当前视图：

所需景观：

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

Answer 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 允许您输入将对齐以创建消息形状的坐标。绝对定位将允许您将消息放在进度条上。 此外，我建议根据您的喜好更改字体并自定义颜色。