CSS实现进度条
进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等。
以前如果想要创建一个进度条的动画效果,没有使用JavaScript是不可能实现的。然而感谢CSS3的出现,我们现在能够在div
里执行动画,添加梯度和彩色元素。事实上,HTML5为实现此目的也创建了一个特殊的进度条元素。 当你看完这个教程,你将会知道怎样使用纯CSS创建一个有平面动画效果的进度条:无需Flash,无需图片,无需JavaScript。
让我们开始吧...
标签
我们应该写一个样式为.container
的div
用来包含我们的进度条,其次是用样式为.title
的div
来包裹我们的标题。
接下来,我们将添加样式为.bar
的div
来包含填充和未填充的进度条样式。最后,我们将在.bar
里添加样式为.bar-unfill
和 .bar-fill
的span
标签。
<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
属性,定义动画的名字,和duration
和 animation-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-unfill
的div
里添加了一个类名为.track-weap
的span
标签。他将包裹我们整个追踪器,然后使用另一个@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
类里设置了position
为relative
,top
改为-18px
,然后设置一个animation
属性。接下来,我设置了追踪器的.track
类,并且设置border-radius
为10px
,left
为-12px
。另一方面我也通过重新命名为progressbar2
的@kyframe
添加了动画效果。
HTML5 的进度条
在我们之前的例子里,我们都是使用div
来创建一个进度条,但是这次我们将研究如何使用HTML5的进度条。
基础标签
HTML5进度条元素可以通过<progress>
标签被添加,在这个标签里面,我们可以设置进度条的各种参数,如value
、min
、max
等属性。请观察下面的基础标签。
<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-fill
的span
标签里的进度条标签。现在让我们试试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/。
CSS实现进度条的更多相关文章
- CSS实现进度条和订单进度条
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- css 实现进度条
<select id="progress" onchange="changeProgress(this)"> <option value=&q ...
- Css静态进度条
图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...
- CSS 静态进度条效果
今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...
- 纯CSS打造进度条
进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...
- 不可思议的纯 CSS 滚动进度条效果
结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...
- css绘制进度条,持续转动的进度条
//只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...
- CSS+DIV进度条
<style type="text/css"> .Bar { position: relative; width: 200px; /* 宽度 */ border: 1p ...
随机推荐
- 好1.1.4 PTA提交列表及说明
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 我在这个课程的目标是 这个作业在那个具体方面帮助我实现目标 概括本周的学习以及更加熟练本周的代码 参考文献 C语言程序设计 百度文献 (h ...
- ORCAL 数据库的约束以及SQL语言的四种类型
oracle数据库约束: 定义:要输入的这个值是一个什么样的值, 或者是哪个范围内的值 作用: 确保完整性, 确保精确性 1, 非空约束(not null) 记录一条信息的时候如果用户名和密码没有被记 ...
- MSF——基本使用和Exploit模块(一)
MSF系列: MSF——基本使用和Exploit模块(一) MSF——Payload模块(二) MSF——Meterpreter(三) MSF——信息收集(四) MSF——Metasploit Fra ...
- (4.10)sql server导入导出
SQL Server快速导入数据分享 核心参考:官网~~https://docs.microsoft.com/zh-cn/sql/relational-databases/import-export/ ...
- *arg,**kwargs的参数作用的疑惑
先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...
- Liunx平台安装MySQL操作步骤
使用yum安装MySQL 第一步 第二步 第三步 数据库安装成功 修改数据库密码,并且删除匿名用户.禁止root远程登录.删除test数据库.刷新权限. 使用命令进入后,找到自己的临时密码,并且修改 ...
- JS高级程序随笔一
function Aarguments(x,y){ for(var i=0;i<arguments.length;i++){ alert(arguments[i]); }; }; Aargume ...
- [Java 教程 00] 计算机基础
前言 我想,来到这的朋友肯定是想学习JAVA或者想要进入IT这个行业的.考虑到大家的基础可能不一样,有些人可能还是用着新买的电脑,为了让大家在后续的学习中更加顺畅.在学习一门全新的计算机语言之前,我需 ...
- java 深入剖析ThreadLocal
一.对ThreadLocal中的理解 ThreadLocal的,很多地方叫做线程本地变量,也有些地方叫做线程本地存储,其实意思差不多.可能很多朋友都知道的ThreadLocal为变量在每个线程中都创建 ...
- setbuf, setbuffer, setlinebuf, setvbuf - 流缓冲操作
SYNOPSIS 总览 #include <stdio.h> void setbuf(FILE *stream, char *buf); void setbuffer(FILE *stre ...