CSS-only ProgressBar with gradient color that highlights current status

user_2384685 0
Viewed 7168

I was looking for CSS-only ProgressBar that shows such activity with a nice looking using gradients and animations.

I investigated <progress> tag but it's very limited in styling, so I looked for other solutions but I was able to find only static examples, or in which gradients are contracted within limits of lowest advance statuses, or in other case a complex markup with many nested DIV.

Desiderata should be:

  • CSS-only solution
  • Gradient background
  • Gradient should not be collapsed if progressbar is less than 100% of its completition
  • Animated status
  • Minimal markup

Could be interesting if it could have also an inderterminate status.

progress-bar css
2 Answers

You can use one element and simplify your code like below:

.progressbar {
    height: 15px;
    border-radius: 1em;
    margin:5px;
    background: 
      linear-gradient(-45deg,
        rgba(255, 255, 255, 0.15) 25%,transparent 25%, 
        transparent 50%, rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0.15) 75%,transparent 75%) 
      left/30px 30px repeat-x,
      linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
      lightgray;
  box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  animation: change 1s linear infinite;
}
@keyframes change {
  from {background-position:0 0,left}
  to {background-position:30px 0,left}
}
<div class="progressbar" style="width:80%;"></div>
<div class="progressbar" style="width:20%;"></div>
<div class="progressbar" style="width:90%;"></div>
<div class="progressbar" style="--p:0"></div>
<div class="progressbar" style="--p:0;width:60%;"></div>
<div class="progressbar" style="--p:0;width:30%;"></div>

user_86203330

I did not find any existing solution that correspond to all desiderata so I developed a possible solution.

HTML

Markup is simply (for indeterminate status):

<div class="progressbar"></div>

or (for a specific advancement status)

<div class="progressbar" style="width:75%"></div>

The idea is that advancement status is set via JS during process with a simple instruction such as (in jQuery):

$('.progressbar').width('75%')

CSS

For CSS part, apart cosmetich properties, the interesting thing is the use of generated content on :before and :after pseudo-elements to avoid additional markup, respectively to contain colored gradient and overlap zebra animated bars.

To allows gradient to be gradually shown increasing ProgressBar widh, original container has overflow:hidden property.

Finally, to have indeterminate status, background-color is forced in case style attribute is empty or missing.

.progressbar:not([style]):before,
.progressbar[style='']:before{
   background: lightgray;
}
user_23846850
Related