Question

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

动画效果不适用于Firefox
Safari

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

巴比

HTML CODE

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

Answer 1

这不是一个答案，而是更多的建议。

为什么不使用bootstrap？它会照顾你的一切：

正常进度条：

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

Answer 2

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

Chrome：按预期工作

Firefox：组件实现就是这样的。

Safari：检查您的浏览器版本

获取更多详细信息：

http://www.w3schools.com/tags/tag_progress.asp

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

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

2 个答案: