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 - body标签中相关标签
body标签中相关标签 今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- arcpy-栅格转其他格式
import arcpy in_format=arcpy.GetParameterAsText(0) out_format=arcpy.GetParameterAsText(1) out_folder ...
- 我的.eslintrc.js
module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/essential", &quo ...
- Python之在字符串中处理html和xml
需求:替换文本字符串中的 ‘<’ 或者 ‘>’ ,使用 html.escape() 函数 import html s="<div>你好<div>" ...
- 2018-5-28-WPF-popup置顶
title author date CreateTime categories WPF popup置顶 lindexi 2018-05-28 09:58:53 +0800 2018-2-13 17:2 ...
- 让Nginx路径中的子目录匹配文件夹的另一种写法
其实相当于对路径做一种通配符,根据路径名访问相应的文件夹.直接看高潮部分如下.. location /static { root /var/www/usmt; index index.html boa ...
- Thunar 右键菜单等自定义
Thunar 右键菜单等自定义 可以使用图形界面或者直接编辑配置文件,二者是等价的. 图形界面: 以给"zip,rar,7z"等文件添加"在此位置使用unar解压缩&qu ...
- 40th 要掀桌子么 还是尬坐吧
今日学习精华: 面向对象编程里面有一句 非常经典的描述:-----通过类实例化一个对象,通过对象调方法----- 注意:对象调用的 方法 ,即 函数一定要有 参数 def ...
- loj2064[HAOI2016]找相同字符
题意:给你两个字符串,问其中各取一个子串,有多少对相同?n<=20W. 标程: #include<bits/stdc++.h> using namespace std; typede ...
- mysql 日期函数大全
对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6 日期和时间类型. 这里是一个使用日期函数的例子.下面的查询选择了所有记录,其date_col的值是在最后30天以内: my ...