新建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条纹进度条的更多相关文章

  1. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  2. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  4. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  5. css3实现进度条的模拟

    两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html>    <head>        < ...

  6. 学习 | css3实现进度条加载

    进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...

  7. css3彩色进度条

    <html>    <head>        <title>progress</title>        <script type=" ...

  8. css3圈圈进度条

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. css3实现进度条

    HTML 结构很简单,但不是 Single Element: <div class="spinner"><i></i></div> ...

随机推荐

  1. 用html写博客好麻烦

    <!DOCTYPE html> .margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-l ...

  2. go 学习Printf

    package main import "fmt" import "os" type point struct { x, y int } func main() ...

  3. CG-CTF web部分wp

    bin不动了,学学webWEB1,签到1f12,得到flag2,签到2给了输入窗口和密码,但输入后却显示错误,查看源码,发现对输入长度进行了限制,改下长度,得到flag3,md5 collision给 ...

  4. Failed! Error: Unknown error 1130

    如有需要可以加我Q群[308742428]大家一起讨论技术,有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. 在使用navicat远程连接mysql报了一个错误信息 Fail ...

  5. Python第九节 条件和循环

    while...else 当满足while循环条件的时候执行循环体内的语句,否则执行else的语句例如下面的例子: count = 1 while count <= 5: print(" ...

  6. 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 ...

  7. java中文乱码转换

    String str=URLDecoder.decode(String, "UTF-8")

  8. 深入理解Magento-第九章-修改、扩展、重写Magento代码

    (博主提示:本章应该不是原作者的第九章,仅作补充和参考) 作为一个开发者的你,肯定要修改Magento代码去适应你的业务需求,但是在很多时候我们不希望修改Magento的核心代码,这里有很多原因,例如 ...

  9. Yii2-rbac

    下面介绍一个 yii2.0 的 Rbac 权限设置,闲话少说,直接上代码,   1.首先我们要在组件里面配置一下 Rbac ,如下所示(common/config/main-local.php或者ma ...

  10. 【LeetCode 15】三数之和

    题目链接 [题解] 先把n个数字升序排个序. 然后枚举三元组最左边的那个数字是第i个数字. 之后用两个指针l,r移动来获取三元组的第2个和第3个数字. (初始值,l=i+1,r = n-1); 如果a ...