Bootstrap条纹进度条
条纹进度条
只需给进度条的容器元素追加一个 .progress-bar-striped
类,就可以创建出带条纹的进度条。并且,这种进度条还能根据进度条的颜色,自动显示不同的条纹颜色:
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%">40%</div>
</div>
效果如图 3‑79所示:
图3-79 条纹进度条
如果给条纹进度条的容器元素再追加一个.active
类,就可以让条纹进度条从右向左旋转起来,就像理发店门口的转花筒一样。如:
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%"></div>
</div>
效果如图 3‑80所示:
条纹进度条及它的动画效果,要依赖于CSS3的渐变、过度和动画特性,而IE9及以下版本均不支持这些新特性。因此,这些浏览器中将看不到的动画效果。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap条纹进度条相关推荐
- Bootstrap 条纹进度条
条纹进度条 只需给进度条的容器元素追加一个 .progress-striped 类,就可以创建出带条纹的进度条,并且不同颜色的进度条,可以显示不同的条纹: <div class="pr ...
- 利用 element ui 进度条实现渐变 条纹进度条
首先 我们看下需要完成的效果 首先可以看到是一个有白色条纹,以及一个渐变色的条纹的进度条 第一部分呢 我们可以先写出这个白色的条纹 我们可以利用以下代码实现白色条纹 .el-progress-bar_ ...
- android 动态改变进度条,Android条纹进度条的实现(调整view宽度仿进度条)
Android条纹进度条的实现(调整view宽度仿进度条) 发布时间:2020-10-03 16:14:24 来源:脚本之家 阅读:89 作者:RustFisher 前言 本文主要给大家介绍了关于An ...
- 【Vue】条纹进度条
一.效果演示及使用 作为组件引入到项目(引入地址修改为自己实际的存放地址),注册到components import stripeloading from "@/components/LSU ...
- Bootstrap中的条纹进度条使用案例
创建一个条纹的进度条的步骤如下: 1.添加一个带有 class .progress 和 .progress-striped 的 <div> 2.接着在上面的 <div> 内, ...
- bootstrap 滚动 进度条_bootstrap动态进度条怎么搞
在本教程中,您将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前 ...
- Bootstrap(10) 进度条媒体对象和 Well 组件
一.Well 组件 这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --><div class="well">Bootstrap</div& ...
- bootstrap 滚动 进度条_bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 保存中:{{length}}% PS: ...
- android 进度条图标方形_Android - 条纹进度条实现,调整view宽度仿进度条
相关代码请参阅: https://github.com/RustFisher/aboutView/blob/master/app/src/main/java/com/rust/aboutview/ac ...
最新文章
- USTC并行计算复习
- 惊了,AI已经学会刷LeetCode了!
- python3语法糖------装饰器
- jquery 和js 还有 jq 挂事件
- mysql集群会备份数据吗_mysql ndb集群备份数据库和还原数据库的方法
- 导购的路上,媒体向左,社区向右
- 计算机本地用户删除后怎么恢复,Default User文件夹被删了怎样恢复
- 史无前例! 中国学者一天发6篇Nature,在多领域取得重大进展
- 判断连个单链表是否交叉,并找到交叉点
- 十款大名鼎鼎的开源软件
- AWS SageMaker机器学习训练营听课总结
- c语言中自定义函数的流程图这么画,c语言流程图怎么画?
- PICKIT3与ICD2比较。正在等待PICKIT3到货。
- linux vi输入日历,linux下Vi编辑器命令大全(上)
- powerVR使用说明
- 忘记背后 努力面前 向着标杆直跑!(转)
- Jquery获取选中复选框的值(checkBox)
- 从我的角度体会平安车险的服务
- 手机屏幕常见故障_手机触摸屏常见问题及解决方法
- C++中sprintf_s与sprintf的不同