JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<!DOCTYPE html>
<html>
<head>
<style> 

</style>

</head>
<body>

Downloading progress:
<progress id="life" value="100" max="100">
</progress>




<script>
var life = document.getElementById("life");

setInterval(()=>{
	life.value -= 1;
    
}, 1000);

</script>

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

CSS

progress[value]::-webkit-progress-value {
  background-image:
	   linear-gradient(-45deg,  transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%);
                             
	   linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25));
                             
	   linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}