Question 43907 in Html Question posted in
Some basic documentation can be found here.

Make css html progress bar goes from bottom to top

Hello this might be a simple for some. But I could not find how to solve it.
I have a progress bar that uses two images, and the colored image fills the background grayscale image with the percentual value.
The code below works, but it is filling the image from top to bottom, I want to fill from bottom to top. I’ve tried using flexbox, switch from top 0, to bottom 0, but didn’t work. Could someone give some help?

Thanks in advance.

function setProgress(percent) {
  var progressBar = document.getElementById('progress');
  progressBar.style.height = percent + '%';
}
setProgress(90);
.progress-container {
  width: 268px;
  height: 608px;
  background-image: url('https://i.imgur.com/jl6OFd6.png');
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
  margin-right: 20px;
  bottom:0;
  position: relative;
  top:0;

}

.progress {
  width: 100%;
  height: 0%;
  background-image: url('https://i.imgur.com/Xv6WaQ5.png');
  background-size: cover;
  background-position: top;
  position: relative;
  bottom: 0;
  left: 0;
  transition: height 0.2s ease-out;  

}
<div class="progress-container">
  <div class="progress" id="progress"></div>
</div>
Tags:

2

Answers


  1. 0

    Just change ‘background-position / position’.

    .progress {
  width: 100%;
  height: 0%;
  background-image: url('https://i.imgur.com/Xv6WaQ5.png');
  background-size: cover;
  background-position: bottom;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: height 0.2s ease-out;  
}
    Login or Signup to reply.
  2. 0

    Try this !!!

    In html:

    <div class="progress-bar">
  <div class="progress"></div>
</div>

    In your CSS

    .progress-bar {
  background-color: #ddd;
  border-radius: 5px;
  height: 20px;
  width: 100%;
}

.progress {
  background-color: #007bff;
  border-radius: 5px;
  height: 100%;
  width: 50%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search