html5 progress bar not animating

Question

I have HTML5 tag, I added some styles for it and add animation for stripe but it doesn't work as I want. I'm not sure where is the error, can you check it for me?

Here is the codepen

html

<progress max="20" value="2" low="10">60%</progress>

css

progress[value]{
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
  position: relative;
}
progress[value]::-webkit-progress-bar{
    border-radius:0;
    background-color: #ccc;
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, .15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .15) 50%,
        rgba(255, 255, 255, .15) 75%,
        transparent 75%,
        transparent
    );
    animation: animate-stripes 0.6s linear infinite;
  -webkit-animation: animate-stripes 0.6s linear infinite;
  animation-direction: reverse;
  position: relative;
}

progress[value]::-webkit-progress-value{
    border-radius:0;
  position: relative;
}
@-webkit-keyframes animate-stripes {
   0% {background-position: 0 0;}
   100% {background-position: 60px 0;}
}
@keyframes animate-stripes {
   0% {background-position: 0 0;}
   100% {background-position: 60px 0;}
}

My idea is the making the background animate like this

Thank you for help

Answer 1

You could create a <div> and invoke it via JS,

$(document).ready(function(){
  
    var getMax = function(){
        return $(document).height() - $(window).height();
    }
  
    var getValue = function(){
        return $(window).scrollTop();
    }
  
    if('max' in document.createElement('progress')){
        // Browser supports progress element
        var progressBar = $('progress');
      
        // Set the Max attr for the first time
        progressBar.attr({ max: getMax() });

        $(document).on('scroll', function(){
            // On scroll only Value attr needs to be calculated
            progressBar.attr({ value: getValue() });
        });
    
        $(window).resize(function(){
            // On resize, both Max/Value attr needs to be calculated
            progressBar.attr({ max: getMax(), value: getValue() });
        });  
    }
    else {
        var progressBar = $('.progress-bar'),
            max = getMax(),
            value, width;
      
        var getWidth = function(){
            // Calculate width in percentage
            value = getValue();          
            width = (value/max) * 100;
            width = width + '%';
            return width;
        }
      
        var setWidth = function(){
            progressBar.css({ width: getWidth() });
        }
      
        $(document).on('scroll', setWidth);
        $(window).on('resize', function(){
            // Need to reset the Max attr
            max = getMax();
            setWidth();
        });
    }
});
$(document).ready(function(){

$('#flat').addClass("active");
$('#progressBar').addClass('flat');

$('#flat').on('click', function(){
$('#progressBar').removeClass().addClass('flat');
$('a').removeClass();
$(this).addClass('active');
$(this).preventDefault();
});

$('#multiple').addClass("active");
$('#progressBar').addClass('multiple');

$('#multiple').on('click', function(){
$('#progressBar').removeClass().addClass('multiple');
$('a').removeClass();    
$(this).addClass('active');
    $(this).preventDefault();    
  });

}); 
//]]>

/* reading position indicator */
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
z-index: 101;
/* Dimensions */
width: 100%;
height: 0.28125em;
/* Reset the apperance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* For Firefox/IE10+ */
background-color: transparent;
/* For IE10+, color of the progress bar */
color: red;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
.flat::-webkit-progress-value {
background-color: green;
}
.flat::-moz-progress-bar {
background-color: green;
}
.multiple::-webkit-progress-value {
background-image: -webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(left, red, orange, yellow, green);
}
.multiple::-moz-progress-bar {
background-image: -moz-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-moz-linear-gradient(left, red, orange, yellow, green,);
}
.progress-container {
width: 100%;
background-color: transparent;
position: fixed;
left: 0;
top: 0;
height: 0.28125em;
display: block;
z-index: 101;
}
.progress-bar {
background-color: green;
width: 50%;
display: block;
height: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<progress id="progressBar" value="0" class="flat multiple">
<div class="progress-container">
<span class="progress-bar"></span>
</div>
</progress>

and there is a non cool reading position indicator bar, with four colors. greets & luck

Answer 2

Please use div instead progress tag,

.progress-bar {
        -webkit-animation: progress-bar-stripes 2s linear infinite;
        -o-animation: progress-bar-stripes 2s linear infinite;
        animation: progress-bar-stripes 2s linear infinite;
        background-color: #2196F3;
        box-shadow: none;
        height:20px;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
        }
    
    
        @-webkit-keyframes progress-bar-stripes {
          from {
            background-position: 60px 0;
          }
          to {
            background-position: 0 0;
          }
        }
        @keyframes progress-bar-stripes {
          from {
            background-position: 60px 0;
          }
          to {
            background-position: 0 0;
          }
        }
    

<div role="progressbar progress-striped" style="width: 95%;" class="progress-bar">
</div>

Answer 3

The example you are citing uses a div as a container (like a main rectangle), another for stripes as a background and another for the blue animation. Your code is only using one element . The example has several class names (.stripes,.progress-bar-inner etc.) targeting different features of the rectangle while your css is only targeting the main rectangle.

You could also try experimenting with a less semantic element like instead of to see if that renders any difference.

Hope that helps a bit.