Search code examples
htmlcssprogress

Progress bar - color change

I added a progress bar to a webpage and now am trying to change indicator's color (Gradient: hsl(6, 100%, 80%) to hsl(335, 100%, 65%)). Can someone help how I can do it?

Here is the HTML:

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

Current view:

enter image description here

Desired View:

enter image description here

Also not quite sure how to add the white box on top that shows "185 GB LEFT", any ideas?

Solution

  • 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);
}

    A lot of the code for the progress bar is repeated to work on different browsers. For the white box at the top-right, I would recommend looking into absolute positioning and looking up SVGs in CSS. An SVG will allow you to put in coordinates that will align to create the message shape. Absolute positioning will allow you to put the message over the progress bar. Additionally, I would recommend changing the font and customizing the colors to your preference.