How to Animate the Background of the Progress Bar

In this snippet, we’re going to animate the progress bar created with the HTML <progress> tag. In our example, we style Shadow DOM elements, but one thing that may cause difficulties is animating the background which is represented as a repeating linear-gradient.

To overcome this difficulty, you can add the animation on the main element and use a cascading inheritance, which can cross the shadow boundaries. But note that this won’t work with the background-color property, that’s why we use a gradient and animate the position, as well.

Here, to calculate the background-size and background-position, you’ll need to do some math. Let’s see the example.

1. Code Html

   <div class="blog">
    <progress max="150" value="125">125 / 150</progress>
   </div>

2. Code Css

   html {
     font-size: 62.5%;
     font-family: sans-serif;
   }
   body {
     font-size: 1.6rem;
   }
   progress[value] {
     display: block;
     width: 100%;
     min-height: 4rem;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: none;
     border-radius: 8px;
     box-shadow: inset 4px 4px 4px rgba(84, 30, 8, 0.2);
     background-color: rgba(149, 250, 61, 0.1);
     border: 1px solid #ccc;
     animation: colorrush 4s infinite linear;
   }
   progress[value]::-webkit-progress-inner-element {
     border-radius: 8px;
     overflow: hidden;
     background-position: inherit;
   }
   progress[value]::-webkit-progress-bar {
     border-radius: 8px;
     background-color: transparent;
     background-position: inherit;
   }
   progress[value]::-webkit-progress-value {
     border-radius: 10px 0 0 10px / 10px 0 0 10px;
     box-shadow: inset 2px 2px 2px rgba(90, 90, 92, 0.2);
     background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), linear-gradient(#4a54ba, #888ccf, #b8b9cc);
     background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/
     100% 800%;
     background-position: inherit;
   }
   progress[value]::-moz-progress-bar {
     border-radius: 10px 0 0 10px / 10px 0 0 10px;
     box-shadow: inset 2px 2px 2px rgba(90, 90, 92, 0.2);
     background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), linear-gradient(#4a54ba, #888ccf, #b8b9cc);
     background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/
     100% 800%;
     background-position: inherit;
   }
   @keyframes colorrush {
     0% {
       background-position: 0 0;
     }
     100% {
       background-position: calc(10*(12px/0.707)) 100%;
     }
   }