HTML CSS examples for CSS Animatable Property:background
CSS3 progress-bar to animate background-position
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- w w w . j a va 2s . c o m--> -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-appearance: none !important; } progress[value] { width: 100%; background: transparent; border: none; border-radius: 0; height: .4rem; display: block; position: relative; } progress[value]::after { content: ""; width: 100%; height: 100%; display: block; top: 0; position: absolute; -webkit-animation: moveBackground 2s steps(30) infinite; background-image: repeating-linear-gradient(to right, green 0%, orange 50%, blue 100%); background-size: 30rem; } @-webkit-keyframes moveBackground { 0% { background-position: 0 0; } 100% { background-position: -50rem 0; } } </style> </head> <body> <progress max="100" value="0"></progress> </body> </html>