Progress bar counting from 0 to widht set

Asked

Viewed 96 times

1

I have a progress bar and am using Keyframe

@keyframes animaUm{
    0% { width: 0%; }
    
    100% { width: 25%}
    
}
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

It is working perfectly, but I would like to insert progress counter below. For example: 1 of 10 % until I reach the size of my widht.

javascript html css

  • The maximum value is 100%, 25% or 10%?

  • Actually I have 3 progress bars, each I put a maximum value, one of 25%, another of 50% and another of 100%

1 answer

1


In a simple but practically unfeasible way:

@keyframes progress-content {
  0% {
    content: '0 de 100%';
  }
  10% {
    content: '10 de 100%';
  }
  20% {
    content: '20 de 100%';
  }
  30% {
    content: '30 de 100%';
  }
  40% {
    content: '40 de 100%';
  }
  50% {
    content: '50 de 100%';
  }
  60% {
    content: '60 de 100%';
  }
  70% {
    content: '70 de 100%';
  }
  80% {
    content: '80 de 100%';
  }
  90% {
    content: '90 de 100%';
  }
  100% {
    content: '100 de 100%';
  }
}
@keyframes progress-bar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%
  }
}

body { margin: 0; padding: 0; }

.progress {
  width: 100%;
  height: 24px;
  position: absolute;
  background-color: orange;
  animation: progress-bar 1s linear
}
.progress::after {
  content: '100 de 100%';
  position: absolute;
  width: 100vw;
  height: 24px;
  text-align: center;
  line-height: 24px;
  animation: progress-content 1s linear;
}
<div class="progress"></div>

Use of the pseudo element ::after to define the content X de 100% and I use animation to determine the value of X, but I only put it down from 10 to 10, because putting 1 to 1 is practically unfeasible

Using JS:

const progressBar = document.querySelector('.progress');

setTimeout(function increment() {
  let valuenow = Number.parseInt(progressBar.getAttribute('aria-valuenow'));

  if (valuenow < Number.parseInt(progressBar.getAttribute('aria-valuemax'))) {
    valuenow++;
    progressBar.setAttribute('aria-valuenow', valuenow);
    progressBar.style.width = valuenow+'%';
    setTimeout(increment, 500);
  }
}, 500)
body { margin: 0; padding: 0; }
.progress {
  width: 100%;
  height: 24px;
  position: absolute;
  background-color: orange;
}
.progress::after {
  content: attr(aria-valuenow);
  position: absolute;
  width: 45vw;
  height: 24px;
  text-align: right;
  line-height: 24px;
}
.progress::before {
  content: 'de 100%';
  position: absolute;
  width: calc(55vw - 6px);
  height: 24px;
  left: 45vw;
  line-height: 24px;
  padding-left: 6px;
}
<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>

JS increments the attribute aria-valuenow defining progress with the ::after and the ::before add the maximum value ("of 100%").

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.