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(0100%00);
  clip-path: inset(0100%00);
  transition: all 3s;
  -webkit-transition: all 3s;
}

#prog-bar-cont:hover#prog-bar#background {
  -webkit-clip-path: inset(0000);
  clip-path: inset(0000);
}
<h1>Rainbow Progress Bar</h1><p>Try hovering over the bar</p><divid='prog-bar-cont'><divid="prog-bar"><divid="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-wrapperspan {
    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><divclass="bar-clipper"><divclass="bar-wrapper"><spanclass="bar1"></span><spanclass="bar2"></span><spanclass="bar3"></span><spanclass="bar4"></span><spanclass="bar5"></span></div></div></body>

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

Post a Comment for "Progress Bar Different Colors"