进度条-颜色变化

Question

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

这里是 HTML:

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

当前视图：

所需视图：

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

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

进度条-颜色变化

Progress bar - color change

html

css

progress