bootstrap-进度条--动态条纹进度条

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>进度条--动态条纹进度条</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" style="width:40%"></div>
    </div> 
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-info" style="width:60%"></div>
    </div> 
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-warning" style="width:80%"></div>
    </div> 
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-danger" style="width:50%"></div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-12-18 04:37:57

bootstrap-进度条--动态条纹进度条的相关文章

Bootstrap <基础二十六>进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

bootstrap-层叠条纹进度条

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>层叠条纹进度条</title> <!-- 最新版本的 Boo

bootstrap-进度条--条纹进度条

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>进度条--条纹进度条</title> <!-- 最新版本的

C#PDA智能程序图片动态变化进度条设计及实现

前言:SmartProject 项目是C#桌面程序的精简版,很多属性和事件可能都没有设置进SDK中.在最近的PDA程序中,我没用使用进度条.为了防止用户乱点,最开始想使用windows提供的进度条,但是觉得又不适合,所以就试图用图片切换的方式来实现. 原理:开启线程切换图片实现显示(子线程不影响主线程而继续往下执行). 1.进度界面设计效果 2.界面切换效果点击质检按钮后跳转(during the new thread running the UI will be changed): 等待业

JS框架_(JQbar.js)柱状图动态百分比进度条特效

柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</title> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/jqbar.css" /

CSS实现进度条和订单进度条

原文:CSS实现进度条和订单进度条最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果图如下: CSS实现进度条: html结构: <div id="progress"> <span>70%</span> </div> css样式: #progress{ width: 50%; height

097在进度条中显示进度百分比

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 #import "KMProgressViewWithLabel.h" 3 4 @interface ViewController : UIViewController 5 @property (strong, nonatomic) KMProgressViewWithLabel *progressViewCustom; 6 7 @end ViewController.m

iOS自定义进度条高度(UIProgressView进度条高度改变的实现)

今天自定义了iOS中的进度条,发现系统的进度条高度无法改变, 现在自己封装了一种进度条(实际是是UIView而不是UIProgressView),可以改变进度条的高度,非常好用,分享给大家,直接上代码: // CTWBProgress.h // Created by WBapple on 16/7/31. // Copyright © 2016年王彬. All rights reserved. // #import <UIKit/UIKit.h> @interface CTWBProg

自定义圆形进度条自定义倒计时进度条

自定义圆形进度条自定义倒计时进度条版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 此控件源码已开源到Github:https://github.com/yanzhenjie/CircleTextProgressbar,欢迎Star. 欢迎加入我博客左侧的QQ交流群一起探讨. 效果预览源代码传送门:https://github.com/yanzhenjie/CircleTextProgressbar 实现与原理这个文字圆