Pure CSS HTML5 Progress Element Animation

user_3529456 0
Viewed 3815

Is it possible to animate HTML5 progress Element just with CSS? I know how to do it with JS. I was wondering of it is possible with CSS only.

<progress value="0" max="100"></progress>
css html
3 Answers

Is it impossible to animate HTML5 progress element just with CSS because you need to manipulate pseudo elements with don't work with animation, although you can animate parent element to make it look like progress animation.

 <style>
    .progress-container{
      background: lightgray;
      display: inline-block;
      width: 300px;
      overflow-x: hidden;
      animation: moveInRight 3s ease-in 1s ;
     }
    progress{
     width:100%;
     display: inline-block;
     height: 25px; 
    }

    progress[value] {
     vertical-align: middle;
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
     border: none;
     }

    progress[value]::-webkit-progress-bar {
      background-color: lightgray;
    }
    @keyframes moveInRight {
      0%{
      text-indent: -100%;
      }

      100% {
       text-indent: 0;
      }
}
   </style>
    <div class="progress-container"><progress max="100" value="70"> 
    </progress> 
    </div>

user_105178130
Related