一个漂亮的进度条
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
⼀个漂亮的进度条
在今年上半年的项⽬中⽤div做过⼀个进度条，动态显⽰库存情况，展⽰⽅式有点像win10风格的磁盘空间，简洁明了，那个进度条也是来⾃⼏年前的收藏。
这⼏年为了更好的适应移动端，响应式布局成为主流，下⾯这个进度条除了有动态的效果，还具备⾃适应能⼒，美观⼤⽅的同时更加适合于执⾏具体任务的场景，留作备⽤。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress</title>
<style type="text/css">
.main {
padding: 20px 28px;
margin: 0 auto;
}
.progressNum {
text-align: center;
font-size: 12px;
font-family: 'microsoft yahei';
color: #000;
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress {
height: 22px;
margin-bottom: 22px;
overflow: hidden;
background-color: #e4eaec;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 22px;
color: #fff;
text-align: center;
background-color: #62a8ea;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar-striped, .progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress-bar.active, .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
</style>
</head>
<body>
<div class="main">
<div class="progress">
<div class="progress-bar progress-bar-striped active" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 35.5%" role="progressbar">
</div>
</div>
完成进度:<span id="progressNum">35.5% </span>
</div>
</body>
</html>。