Breaking News: Grepper is joining You.com. Read the official announcement!

progress bar with width gradient

Aaron answered on July 11, 2022 Popularity 2/10 Helpfulness 1/10

answer progress bar with width gradient

progress bar with width gradient

Comment

.progress-bar-container {
  height: 50px;
  margin: 50px 0px;
  background: black;
  position:relative; /* relative here */
}

.progress-bar-indicator {
  height: 100%;
  border-radius: 25px;
   /* this will do the magic */
  -webkit-mask:linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0);
}
.progress-bar-indicator::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(to right, red, green, blue); /* your gradient here */
}

Popularity 2/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: css gradient progress-bar width

Link to this answer
Share Copy Link