Animate the background of the Progress bar using CSS

We can change the background of the webpage by animating the progress bar using CSS

we’re going to animate the progress bar created with the HTML <progress> tag, background

Sample code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      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%;
        }
      }
    </style>
  </head>
  <body>
    <progress max="150" value="125">125 / 150</progress>
  </body>
</html>

Leave a comment Cancel reply