how to create a progress bar in CSS by transition element-CodePudding

Hello How can I create a progress bar in CSS by transition element.

.pro {
    height: 2px;
    width: 100vw;
    transition: width 2s ease-in-out;
    background-color: red;
  }

CodePudding user response：

You could use keyframes for this.

const btn = document.querySelector('.btn'), pro = document.querySelector('.pro')

btn.addEventListener('click', function() {
  
  pro.classList.remove('progress');
  
  addPro();
  
});

function addPro() {
  setTimeout(function() {
    pro.classList.add('progress');
  }, 200)
}

*{
  box-sizing: border-box;
}

.wrapper {
  width: 95%;
  margin: 50px auto;
}
.pro {
  height: 2px;
  width: 0;
  max-width: 100%;
  background-color: red;
}

.pro.progress {
  animation: progress 1.75s ease-in-out forwards;
}

@keyframes progress {
  from{
    width: 0;
  }to {
    width: 100vw;
  }   
}
  
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: red;
  color: #fff;
  cursor: pointer;
}

<div class="wrapper">
  <div class="pro progress"></div>
</div>

<div class="btn">show animation again</div>

CodePudding user response：

It will not a progress bar but kind of progress bar .
It will extend to 90vw when hovered on red pill

.pro {
  height: 20px;
  width: 10vw;
  border-radius: 20px;
  transition: width 2s linear;
  background-color: red;
}

.pro:hover {
  width: 90vw
}

<div class="pro"></div>