CSS - Progress bar not appearing in Safari and not animated on Firefox - css

Question

I made a progress bar which is styled and animated. It is looking good on Opera and Chrome, however I have 2 problems with Firefox and Safari:
The animation effect is not working on Firefox
The progress bar is not appearing at all on Safari
Can anyone help? I write the code below.
Thanks in advance!
Bobby
HTML CODE
<progress value="67" min="0" max="100"></progress>
CSS CODE
progress {
width: 400px;
height: 14px;
/*margin: auto;*/
display: block;
padding: 1px;
appearance:none;
-moz-appearance:none;
-webkit-appearance: none;
border: none;
background-size:auto;
border-radius:15px;
background: -moz-linear-gradient(top, #747467, #515145 49%, #414137 50%, #54544B);
/*background: -ms-linear-gradient(top, #747467, #515145 49%, #414137 50%, #54544B);
background: -o-linear-gradient(top, #747467, #515145 49%, #414137 50%, #54544B);
background: linear-gradient(to bottom, #747467, #515145 49%, #414137 50%, #54544B);*/
/*background-image: none;*/
}
progress::-webkit-progress-bar {
background: -webkit-linear-gradient(top, #747467, #515145 49%, #414137 50%, #54544B);
border-radius: 15px;
padding: 1px;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
text-align:left;
}
progress::-moz-progress-bar {
background:
-moz-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-moz-linear-gradient(top, #70AAE2, #4791DA 49%, #3385D6 50%, #4791DA);
/*-moz-linear-gradient(left, #70AAE2, #4791DA);*/
border-radius: 15px;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
text-align:left;
background-size: 25px 14px, 100% 100%, 100% 100%;
-moz-animation: move 5s linear 0 infinite;
}
progress::-webkit-progress-value {
border-radius: 15px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background:
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-webkit-linear-gradient(top, #70AAE2, #4791DA 49%, #3385D6 50%, #4791DA);
/*-webkit-linear-gradient(left, #70AAE2, #4791DA);*/
background-size: 25px 14px, 100% 100%, 100% 100%;
-webkit-animation: move 5s linear 0 infinite;
}
#-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: -100px 0px, 0 0, 0 0}
}
#-moz-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: -100px 0px, 0 0, 0 0}
}

Answer 1

Its not exactly an answer but more of a suggestion.
Why dont you use bootstrap? It takes care of everything for you:
Normal Progress Bar:
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
Striped:
<div class="progress progress-striped">
<div class="bar" style="width: 20%;"></div>
</div>
and much more.. Check this: http://getbootstrap.com/2.3.2/components.html#progress
To include bootstrap, do:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Answer 2

The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar but looks differently in every browser. JavaScript can be used to manipulate the value of progress bar.
Chrome: works as you expect it to
Firefox: component implementation is like this way.
Safari: check your browser version
for more detailed info:
http://www.w3schools.com/tags/tag_progress.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress