Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Progress Bar

Progress Bar Different Colors

Post a Comment
how would you make progress bar in CSS that would have colours based on values etc. from 0% to 20% red colour, 20% to 40% blue... Also, I would want to show the colours all the tim

Solution 1:

If you are trying to achieve a gradient progress bar as per the current progress, then try linear-gradient() property in CSS.

Here is a working model:

#prog-bar-cont {
  width: 75vw;
  height: 2.5em;
}
#prog-bar-cont #prog-bar {
  background: #ffff;
  width: 100%;
  height: 100%;
  border-color: #000;
  border-style: solid;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}
#prog-bar-cont #prog-bar #background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  /*Actual Stuff*/
  background: linear-gradient(-90deg, violet, #30b3fc, #70dc23, yellow, orange, #ff1076);
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: all 3s;
  -webkit-transition: all 3s;
}

#prog-bar-cont:hover #prog-bar #background {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
<h1>Rainbow Progress Bar</h1>
<p>Try hovering over the bar</p>
<div id='prog-bar-cont'>
  <div id="prog-bar">
    <div id="background"></div>
  </div>
</div>

Solution 2:

You can accomplish that by nesting the progress bar in a parent element and applying the css property overflow: hidden.

You can change the width of the class bar-clipper to the desired percentage. i.e. calc(300px * 0.6) will show 60% of the bar.

.bar-clipper {
    width: calc(300px * 0.8);
    height: 20px;
    overflow: hidden;
    position: absolute;
}

.bar-wrapper {
    width: 300px;
    height: 20px;
    display: flex;
    position: absolute;
}

.bar-wrapper span {
    width: 100%;
    height: 100%;
}

.bar-wrapper .bar1 {
    background-color: #163f5f;
}

.bar-wrapper .bar2 {
    background-color: #21639b;
}

.bar-wrapper .bar3 {
    background-color: #3caea3;
}

.bar-wrapper .bar4 {
    background-color: #f6d65b;
}

.bar-wrapper .bar5 {
    background-color: #ed543b;
}
<body>
    <div class="bar-clipper">
        <div class="bar-wrapper">
            <span class="bar1"></span>
            <span class="bar2"></span>
            <span class="bar3"></span>
            <span class="bar4"></span>
            <span class="bar5"></span>
        </div>
    </div>
</body>

Link to fiddle: https://jsfiddle.net/L13yrgbm/


Post a Comment for "Progress Bar Different Colors"