css3条纹进度条
新建div,取名progress,如下
<div class="progress"></div>
在里面插入条纹进度条,以及进度显示文本进度:
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 75%;">
<div class="progress-value">75%</div>
</div>
添加样式
.progress{
height: 25px;
background: #262626;
padding: 5px;
overflow: visible;
border-radius: 20px;
border-top: 1px solid #000;
border-bottom: 1px solid #7992a8;
margin-top: 50px;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-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 .progress-bar{
border-radius: 20px;
position: relative;
animation: animate-positive 2s;
}
.progress .progress-value{
display: block;
padding: 3px 7px;
font-size: 13px;
color: #fff;
border-radius: 4px;
background: #191919;
border: 1px solid #000;
position: absolute;
top: -40px;
right: -10px;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress .progress-value:after{
content: "";
border-top: 10px solid #191919;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
bottom: -6px;
left: 26%;
}
.progress-bar-striped {
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: 20px 20px;
background-size: 20px 20px;
}
@-webkit-keyframes animate-positive{
0% { width: 0; }
}
@keyframes animate-positive{
0% { width: 0; }
}
最后效果如下:
这里需要注意的是css3,keyframes的兼容性如下,ie9及以下就别用了:
css3条纹进度条的更多相关文章
- CSS3动画进度条
CSS3动画进度条 CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...
- 纯CSS3制作进度条源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- css3实现进度条的模拟
两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html> <head> < ...
- 学习 | css3实现进度条加载
进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...
- css3彩色进度条
<html> <head> <title>progress</title> <script type=" ...
- css3圈圈进度条
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- css3实现进度条
HTML 结构很简单,但不是 Single Element: <div class="spinner"><i></i></div> ...
随机推荐
- 用html写博客好麻烦
<!DOCTYPE html> .margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-l ...
- go 学习Printf
package main import "fmt" import "os" type point struct { x, y int } func main() ...
- CG-CTF web部分wp
bin不动了,学学webWEB1,签到1f12,得到flag2,签到2给了输入窗口和密码,但输入后却显示错误,查看源码,发现对输入长度进行了限制,改下长度,得到flag3,md5 collision给 ...
- Failed! Error: Unknown error 1130
如有需要可以加我Q群[308742428]大家一起讨论技术,有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. 在使用navicat远程连接mysql报了一个错误信息 Fail ...
- Python第九节 条件和循环
while...else 当满足while循环条件的时候执行循环体内的语句,否则执行else的语句例如下面的例子: count = 1 while count <= 5: print(" ...
- 2018-3-5-安装-pip
title author date CreateTime categories 安装 pip lindexi 2018-3-5 19:4:4 +0800 2018-03-05 18:57:15 +08 ...
- java中文乱码转换
String str=URLDecoder.decode(String, "UTF-8")
- 深入理解Magento-第九章-修改、扩展、重写Magento代码
(博主提示:本章应该不是原作者的第九章,仅作补充和参考) 作为一个开发者的你,肯定要修改Magento代码去适应你的业务需求,但是在很多时候我们不希望修改Magento的核心代码,这里有很多原因,例如 ...
- Yii2-rbac
下面介绍一个 yii2.0 的 Rbac 权限设置,闲话少说,直接上代码, 1.首先我们要在组件里面配置一下 Rbac ,如下所示(common/config/main-local.php或者ma ...
- 【LeetCode 15】三数之和
题目链接 [题解] 先把n个数字升序排个序. 然后枚举三元组最左边的那个数字是第i个数字. 之后用两个指针l,r移动来获取三元组的第2个和第3个数字. (初始值,l=i+1,r = n-1); 如果a ...