How to change progress bar process colour - HTML5 progress tag.

Facing the issues of how to change progress bar process colour in HTML5 progress tag.

How to change the colour of progress bar demo not shown in any demo examples. I got trouble at UI level due to that my site colour button was in light red colour and progress bar colour needed in light red colour.

So I have applied progress bar colour but it was working in Firefox only and facing the issues in chrome browser that processing colour not changed.

Just refer the my previous post for uploading video/file using ajax.Where I need to implement this feature like when upload the video need to display progress bar with preferred colour of theme.

For uploading video displaying progress bar of html5 latest tag of process tag.

While uploading video displaying process bar for progress of how much time left for completion of upload the video.

You can refer previous post whole HTML with ajax call for video upload with progress bar.

For progress bar processing colour you need to set colour code(#ff5a5f) in background colour please apply below css and check it is working in all browser.

Please find attached image of progress colour.

CSS for progress bar

progress {background:#ccc; border: 1px solid #ff5a5f; border-radius: 5px; color: #ff5a5f; font-size: 0.6em; height: 3.8em;line-height: 1.5em;text-indent: 0.5em;}
progress[value]::-webkit-progress-bar {background-color:#ff5a5f;}
progress::-moz-progress-bar { background:#ff5a5f; }
progress::-webkit-progress-value { background:#ff5a5f; }
progress { color:#ff5a5f; }

/* Background Colors  */ 
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ccc !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #ccc !important;
}
/* Foreground Colors   */ 
/* IE10 */
progress {
    color:#ff5a5f;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: #ff5a5f;   
}
/* Chrome */
progress::-webkit-progress-value {
    background:#ff5a5f;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: #ff5a5f;
}