Progress bar HTML5

Progress bar HTML5

HTML

<div class="wrapper-bar">
   <progress class="progress-bar" value="99" max="196"> 
    </progress>
   <p class="progress-value">50,5%</p>
</div>

CSS

.wrapper-bar {
  margin-top: 50px;
  text-align: right;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #aaa;
  padding: 10px;
}

.wrapper-bar p {
  padding: 10px 0;
}

.wrapper-bar progress {
  display: block;
  width: 100%;
  height: 20px;
  border: none;
  border-radius: 100px;
  -webkit-appearance: none;
}

/* Style the background */
.wrapper-bar progress::-moz-progress-bar {
  background-color: #333;
  padding: 3px;
  border-radius: 100px;
}

.wrapper-bar progress::-webkit-progress-bar {
  background-color: #333;
  padding: 3px;
  border-radius: 100px;
}

.wrapper-bar progress::-webkit-progress-value { 
  border-radius: 50px;

  /* Set background color of the gradient */
  background-color: #36D7B7;

  /* Set size of the square */
  background-size: 15px 15px;

  /*0% - 25% - start with some transparence rgba(255,255,255,.2), 
    25% - 50% - transparent, which is the background color set,
    50% - 75% - rgba(255,255,255,.2),
    75% - 100% - transparent, which is the background color set.*/

background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%); 

background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%);  

background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%);  

background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 100%); 

/* Apply animation */
-webkit-animation: animation 4s linear infinite;
   -moz-animation: animation 4s linear infinite; 
    -ms-animation:...