CSS - 进度条没有出现在 Safari 中，也没有在 Firefox 上动画答案

【问题标题】：CSS - Progress bar not appearing in Safari and not animated on FirefoxCSS - 进度条没有出现在 Safari 中，也没有在 Firefox 上动画
【发布时间】：2014-06-05 17:35:04
【问题描述】：

我制作了一个带有样式和动画的进度条。它在 Opera 和 Chrome 上看起来不错，但是我在 Firefox 和 Safari 上遇到了两个问题：

动画效果在 Firefox 上不起作用
Safari 上根本没有显示进度条

有人可以帮忙吗？我在下面写代码。提前致谢！

鲍比

HTML 代码

<progress value="67" min="0" max="100"></progress>

CSS 代码

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}
}

【问题讨论】：

标签： css firefox safari progress-bar

【解决方案1】：

这不完全是一个答案，而是一个建议。

你为什么不使用引导程序？它会为您处理一切：

正常进度条：

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

条纹：

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

还有更多……检查一下：http://getbootstrap.com/2.3.2/components.html#progress

要包含引导程序，请执行以下操作：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

【讨论】：

【解决方案2】：

HTML <progress> 元素用于查看任务的完成进度。虽然显示方式的细节由浏览器开发人员决定，但它通常显示为进度条，但在每个浏览器中看起来都不同。 JavaScript 可以用来操作进度条的值。

Chrome：按您的预期工作

Firefox：组件实现是这样的。

Safari：检查您的浏览器版本

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

【讨论】：

OP 询问的是关于渲染进度条的特定浏览器行为，而不是关于它们的一般教程。