CODEWITHSUNDEEP
htmlcss
erosman
erosman

Reputation: 7741

Pure CSS HTML5 Progress Element Animation

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>

Upvotes: 5

Views: 5416

Answers (3)

Reed
Reed

Reputation: 1642

Obviously you can tweak this a bit, I just threw it together from a code sample... But I think this sort of qualifies?

div {
    width: 100px;
    height: 50px;
    background: gray;
    position :relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}


/* Standard syntax */
@keyframes mymove {
    from   {width: 0px;}
    to  {width: 500px;}
}
<body>
  <div></div>
</body>

Upvotes: 2

D0man
D0man

Reputation: 21

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>

Upvotes: 2

powerbuoy
powerbuoy

Reputation: 12848

It is indeed:

// The value needs to change for the animation to trigger of course
setTimeout(function () {
   document.getElementsByTagName('progress')[0].value = 100; 
});
progress {
	appearance: none;
	display: block;
	width: 100%;
	height: 1rem;
	border: 0;
}

progress::-webkit-progress-bar {
	background: lightgray;
}

progress::-webkit-progress-value {
	background: #06c;
	transition: width 2.5s ease-in-out;
}
<progress value="10" max="100"></progress>

You'll have to look into the Mozilla/IE pseudo element names though.

Edit: Without changing the value some way the element of course won't move. So I guess you have to use JS to change it, but the animation itself is handled completely by CSS.

Upvotes: 9

Related Questions