Simple and elegant CSS indeterminate progress bar
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need someone to build a simple "indeterminate" progress bar in HTML for a component for a webapp I'm building.

Should function just like this first progress element on this page:

https://elastic.github.io/eui/#/display/progress

You could literally just list the CSS off this page if you wanted as this is open source. You could just view source on the HTML.

I need it to support:

  • absolute / relative positioning
  • responsive / reflow (variable width, fixed width, etc)
  • support within a flex box
  • changing the foreground color
  • basically just like a normal progress element.

... just standard HTML delivery is fine.

I assume you will have to deliver a lot of this as CSS due to needing keyframes.

awarded to fabian muema

Crowdsource coding tasks.

2 Solutions

Winning solution

the HTML
<div class="progress-line"></div>
The css:
.progress-line, .progress-line:before {
height: 3px;
width: 100%;
margin: 0;
}
.progress-line {
background-color: #b3d4fc;
display: -webkit-flex;
display: flex;
}
.progress-line:before {
background-color: #3f51b5;
content: '';
-webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
0% { margin-left: 0px; margin-right: 100%; }
50% { margin-left: 25%; margin-right: 0%; }
100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
0% { margin-left: 0px; margin-right: 100%; }
50% { margin-left: 25%; margin-right: 0%; }
100% { margin-left: 100%; margin-right: 0; }
}


Here your go, check out this solution for a simple "indeterminate" progress bar.

You can use it in html like this, pass the color you want and it will use it in the progress bar component.

<div class="progress">
<div class="progress-bar-custom" style="--bg:  #337ab7;"></div>
</div>

The code is responsive and uses relative positioning, hope this works for you!

View Timeline