如何用纯CSS3制作进度条

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等。

以前如果想要创建一个进度条的动画效果,没有使用JavaScript是不可能实现的。然而感谢CSS3的出现,我们现在能够在div里执行动画,添加梯度和彩色元素。事实上,HTML5为实现此目的也创建了一个特殊的进度条元素。 当你看完这个教程,你将会知道怎样使用纯CSS创建一个有平面动画效果的进度条:无需Flash,无需图片,无需JavaScript。

让我们开始吧...

标签

我们应该写一个样式为.containerdiv用来包含我们的进度条,其次是用样式为.titlediv来包裹我们的标题。

接下来,我们将添加样式为.bardiv来包含填充和未填充的进度条样式。最后,我们将在.bar里添加样式为.bar-unfill.bar-fillspan标签。

<div class="container">
    <div class="title plain">Plain</div>
    <div class="bar">
        <span class="bar-unfill">
            <span class="bar-fill"></span>
        </span>
     </div>
</div>

简单的进度条的CSS代码

.container类里将width定义为30%使进度条能够自适应。我们也将放一些简单的border-radius之类的属性在我们的.title类里以修改顶部和底部的左边的边框弧度,创建一个简单明了的平板式设计。

.container {
    width:30%;
    margin:0 auto
}
.title {
    background:#545965;
    color:#fff;
    padding:15px;
    float:left;
    position:relative;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px
}

现在让我们来写未填充的的样式,首先给他一个白色的背景。

.bar-unfill {
    height:15px;
    display:block;
    background:#fff;
    width:100%;
    border-radius:8px
}

接下来,我们将定义进度条的样式,先令他的宽度为100%,因为这也会应用于定义和未定义的部分。所以在我们的.bar-fill的类里,我们将令他的宽度为0作为起始的宽度,添加CSS3的transition属性使我们的动画效果更加流畅,最后,我们将添加CSS3里的animation属性,定义动画的名字,和durationanimation-iteration-count 属性。

.bar-fill {
    height:15px;
    display:block;
    background:#45c9a5;
    width:0;
    border-radius:8px;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

制作这个动画,我们将使用CSS3里的@keyframe规则来设置宽度从0变化到100%。你也能定制你自己喜欢的变化。

/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar { 
    from {
        width:0
    }
    to {
        width:100%
    }
}
/* Standard syntax */
@keyframes progressbar {
    from {
        width:0
    }
    to {
        width:100%
    }
}

条纹进度条

若要制作一个条纹进度条,我们应该把.bar-fill重新命名为.bar-fill-stripes。我们将使用backgrou-image属性里的 linear-gradient同时声明它的颜色。剩余的CSS3动画效果也是和上述相同,看下面的代码:

.bar-fill-stripes {
    height:15px;
    display:block;
    background:#e74c3c;
    width:0;
    border-radius:8px;
    background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2)       50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

有追踪器的进度条

本教程的这部分,我们将为我们的进度条创建一个跟踪器,所以我们将调整一下我们的HTML标签和CSS部分,观察下面的标签。

<div class="container">
    <div class="title">Tracker</div>
    <div class="bar">
        <span class="bar-unfill">
            <span class="bar-fill-tracker"></span>
            <span class="track-wrap">
                <span class="track"></span>
            </span>
        </span>
    </div>
</div>

正如你所看到的那样,我们往类名为.bar-unfilldiv里添加了一个类名为.track-weapspan标签。他将包裹我们整个追踪器,然后使用另一个@keyframe规则来产生动画效果,让我们一起写一下.track-wrap.track的样式吧。

.track-wrap {
    position:relative;
    top:-18px;
    -webkit-animation:progressbar2 7s infinite;
    animation:progressbar2 7s infinite
}
.track {
    height:20px;
    display:block;
    background:#e74c3c;
    width:20px;
    border-radius:10px;
    position:relative;
    left:-12px
}
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar2 {
    from {
        left:0
    }
    to {
        left:100%
    }
}
/* Standard syntax */
@keyframes progressbar2 {
    from {
        left:0
    }
    to {
        left:100%
    }
}

正如上面所示,我在.track-wrap类里设置了positionrelativetop改为-18px,然后设置一个animation属性。接下来,我设置了追踪器的.track类,并且设置border-radius10pxleft-12px。另一方面我也通过重新命名为progressbar2@kyframe添加了动画效果。

HTML5 的进度条

在我们之前的例子里,我们都是使用div来创建一个进度条,但是这次我们将研究如何使用HTML5的进度条。

基础标签

HTML5进度条元素可以通过<progress>标签被添加,在这个标签里面,我们可以设置进度条的各种参数,如valueminmax等属性。请观察下面的基础标签。

<progress value="50" max="100"></progress>

现在将这些元素排成一列,我们可以用上述的便签将这些代码包裹起来,请看下面的代码。

<div class="title html5">HTML5</div>
<div class="bar">
    <span class="bar-unfill">
        <progress value="50" max="100"></progress>
    </span>
</div>

没有什么特别之处,我们只是改变了类名为bar-fillspan标签里的进度条标签。现在让我们试试HTML5的进度条。

progress, progress::-webkit-progress-bar{
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}
progress::-moz-progress-bar {
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
    }

改变进度条的样式,我们需要添加Webkit和Mozilla的伪类,使谷歌浏览器和火狐浏览器兼容。

progress::-webkit-progress-bar {
    /* style rules for Chrome */
}
progress::-moz-progress-bar {
    /* style rules for Firefox*/
}

为了完成HTML5进度条的设计,我想出了下面的CSS。

progress::-webkit-progress-bar{
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}
progress::-moz-progress-bar {
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

现在,使用我们第一个例子中的的@keyframe,你将得到相似的结果,如下图所示。 注意:请查看此页关于支持HTML5的进度条的浏览器。

本文根据@Sam Norton的《How to create a CSS3 progress bar》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.developerdrive.com/2015/05/how-to-create-a-css3-progress-bar/

栗子酱

在校学生,本科软件工程专业,重度拖延症患者QAQ ,热爱前端,喜欢设计,正朝着成为一名优秀的前端工程师努力中。微博@_栗子酱。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/how-to-create-a-css3-progress-bar.htmljordans for sale yellow

如需转载,烦请注明出处:https://www.w3cplus.com/css3/how-to-create-a-css3-progress-bar.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部