bootstrap 进度条样式

最新推荐文章于 2023-05-21 23:36:32 发布
最新推荐文章于 2023-05-21 23:36:32 发布
阅读量2.7k 收藏 3
点赞数
分类专栏： bootstrap

Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度，如下：

实现方法如下：

（1）引入bootrap文件，

[html]  view plain  copy
  1. <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">  

（2）添加一个<div class="progress">；

（3）在<div class="progress">中添加一个<div class="progress-bar">

[html]  view plain  copy
  1. <div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;">  
其中，

aria-valuenow="40"——进度条目前进度值。

aria-valuemax="100"——最大进度值。

aria-valuemin=“0”——最小进度值。

style="width:40%;"——让进度条指在40%的位置。

完整代码如下：

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>进度条</title>  
  6.     <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">  
  7. </head>  
  8. <body>  
  9. <div class="container" style="width: 600px">  
  10.     <p>默认的进度条</p>  
  11.     <div class="progress">  
  12.         <div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;">  
  13.         </div>  
  14.     </div>  
  15. </div>  
  16. </body>  
  17. </html>  
以上是实现一个默认进度条，底色的灰色，进度颜色是蓝色，我们还可以在默认进度条的基础上，通过加入不同的样式来实现丰富多彩的进度条。

（1）交替进度条：在<div class="progress-bar">中加入.progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger。

[html]  view plain  copy
  1. <p>交替的进度条</p>  
  2. <div class="progress">  
  3.     <div class="progress-bar progress-bar-info" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60"  
  4.          style="width:60%"></div>  
  5. </div  

（2）条纹进度条：在<div class="progress-bar"> 加入.progress-striped。

[html]  view plain  copy
  1. <div class="progress progress-striped">  
  2.        <div class="progress-bar progress-bar-info" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"  
  3.             style="width:40%">  
  4.        </div>  
  5.    </div>  

（3）动画进度条：在条纹进度条的基础上，在<div class="progress progress-striped">中加入.active。

[html]  view plain  copy
  1. <p>动画进度条</p>  
  2.     <div class="progress progress-striped active">  
  3.         <div class="progress-bar progress-bar-warning" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"  
  4.              style="width:40%">  
  5.         </div>  
  6.     </div>  

（4）堆叠进度条： 把多个进度条放在相同的 <div class="progress">  中。

[html]  view plain  copy
  1.   
[html]  view plain  copy
  1. <p>堆叠进度条</p>  
  2.     <div class="progress">  
  3.         <div class="progress-bar progress-bar-info" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"  
  4.              style="width:40%"></div>  
  5.         <div class="progress-bar progress-bar-success" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20"  
  6.              style="width:20%"></div>  
  7.     </div>  

 

 
 

 
效果如下： 

 

 

 
 

 

                

        

        

    




    

      

        

            

              
                
                  小发发吖
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
BootStrap 实现各种样式的进度条效果

				
			

			

				

					11-29
				

			

		

		

			
				
Bootstrap提供了各式各样的进度条效果，下面通过实例代码给大家详细介绍，具体详情如下所示：
看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.

			
		

	



                

              
                



	

		

			

				
					
Bootstrap实现各种进度条样式详解

				
			

			

				

					08-30
				

			

		

		

			
				
本篇文章主要介绍了Bootstrap实现各种进度条样式详解 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	



                


  
              

                


	

		

			

				
					
Bootstrap4 进度条

				
			

			

				

					12-13
				

			

		

		

			
				
Bootstrap4 进度条

进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
添加一个带有 .progress 类的 
。
接着，在上面的 
 内，添加一个带有 class .progress-bar 的空的 
。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”width:70%” 表示进度条在 70% 的位置。
实例







进度条高度
进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：
实例







进度条标签
可以在进度条内添加文本，如进度的百分比：
实例


70%




不同颜色的进度条
默

			
		

	





	

		

			

				
					
Bootstrap进度条动画样式

				
			

			

				

					12-13
				

			

		

		

			
				
这是一款炫酷的Bootstrap进度条动画样式。该进度条在原生bootstrap进度条的基础上，通过简单的CSS代码来进行美化，制作出炫酷的进度条动画样式效果。

			
		

	



		

			
		



	

		

			

				
					
Bootstrap源码学习笔记之bootstrap进度条

				
			

			

				

					08-31
				

			

		

		

			
				
本文通过源码给大家解析bootstrap进度条样式，分为条纹进度条，动态条纹进度条，层叠进度条和带Label的进度条，下面通过代码给大家简单介绍下，感兴趣的朋友一起看看吧

			
		

	





	

		

			

				
					
bootstrap 表格列格式为进度条，并从后台获取进度的数据

				
			

			

				

					YiWait的专栏
				

				

					01-17
					
					6747
					
				

			

		

		

			
				
效果如图：

    @ApiOperation(value = "获取进度", notes = "获取进度")
    @RequestMapping(value = "/getProcess", method = RequestMethod.GET)
    @ResponseBody
    public Map getProcessValues(@RequestParam(value

			
		

	





	

		

			

				
					
Bootstrap系列之进度条（Progress）

				
			

			

				

					老__L的博客
				

				

					06-18
					
					4306
					
				

			

		

		

			
				
进度条（Progress）

			
		

	





	

		

			

				
					
进度条_Bootstrap进度条样式

				
			

			

				

					weixin_39875419的博客
				

				

					12-31
					
					183
					
				

			

		

		

			
				
运行原理使用 .progress 容器来指定进度条的最大值。使用 .progress-bar 来表示当前的进度。.progress-bar 要求的内嵌样式，使用全局实用CSS或自定义CSS来设置其宽度。.progress-bar 还需要一些 role and 与属性，使其访问友好（无障碍）。高度：我们只在.progress上设置了一个height值，所以如果你改变了这个值，那么内部的.progre...

			
		

	





	

		

			

				
					
35个美观的进度条风格

				
			

			

				

					taoxugang2012的专栏
				

				

					06-09
					
					6086
					
				

			

		

		

			
				
网页中常常会在页面/内容没有完整加载前给一个进度提示，通常最简单的做法是给一个loading的gif动画图片，比如最常用的“菊花图”。进度条是另一种表现方式，比菊花图提供更多的信息，也有更丰富的表现。



通常，之前进度条会更多的用在桌面程序或网页中flash加载过程中显示，而现在，基于HTML5的web app特别是web game有时候也需要使用进度条来表现加载状态，它的最大作用是给

			
		

	





	

		

			

				
					
html 进度条 样式_使用HTML5创建和样式化进度栏

				
			

			

				

					cune1359的博客
				

				

					07-02
					
					2529
					
				

			

		

		

			
				
HTML5引入了进度条元素，该元素使我们能够显示某些任务的进度 ，例如上载或下载，基本上是任何正在进行的事情 
 在这篇文章中，我们将讨论如何在文档中添加此元素，如何与CSS 样式它和动画进度条计。 
 让我们开始吧。 
 推荐读物： 35种精美的进度条设计 
 基本用法 
 进度条可以用<progress>添加； 进度值由value ， min和max属性确定，如下所示。 

&...

			
		

	





	

		

			

				
					
bootstrap多种样式进度条展示

				
			

			

				

					08-31
				

			

		

		

			
				
主要为大家展示了bootstrap多种样式进度条，默认进度条、条纹进度条等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
css3静态进度条,CSS3+jQuery Progress Bars(CSS3进度条)

				
			

			

				

					weixin_36448411的博客
				

				

					08-03
					
					194
					
				

			

		

		

			
				
主要运动到的css3属性有：border-radius(设置圆角)、box-shadow(阴影)、transition(过渡效果)。body,div,p{ margin:0; padding:0;}body{font:13px Tahoma,Arial,sans-serif;background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSU...

			
		

	





	

		

			

				
					
Android中常用基本控件的使用方法和步骤（.txt）

				
			

			

				

					The blog of CSDN in 杨天福
				

				

					02-21
					
					8553
					
				

			

		

		

			
				
一、Progressbar的用法：ProgressBar主要是用来实现处理或加载进度的显示或者提示用户正在处理或加载数据。基本来说就两种情况，一种是转圈的小圆圈，一种是水平的进度条。style="?android:attr/progressBarStyle" 
style="?android:attr/progressBarStyleHorizontal”Progressbar的常用属性：
andr

			
		

	





	

		

			

				
					
使用ProgressBar.js创建时尚且响应Swift的进度条

				
			

			

				

					代码教主
				

				

					06-19
					
					245
					
				

			

		

		

			
				
网络上没有任何事情会立即发生。 唯一的区别是完成一个过程所需的时间。 有些过程可能在几毫秒内发生，而其他过程可能需要几秒钟或几分钟。 例如，您可能正在编辑用户上传的非常大的图像，此过程可能需要一些时间。 在这种情况下，最好让访问者知道该网站并未停留在某处，但实际上它正在处理您的图像并取得了一些进展。 
 向读者显示一个过程已进行了多少的最常见方法之一是使用进度条。 在本教程中，您将学习如何使用...

			
		

	





	

		

			

				
					
[前端案例]用HTML、JS、CSS实现一个进度条，加上动画效果

					
最新发布

				
			

			

				

					小张Python
				

				

					05-21
					
					1489
					
				

			

		

		

			
				
进度条最终效果如下，上面是一个进度条进度，进度通过线条颜色来控制：蓝色表示已达到该进度，黑色表示未达到；下方是两个按钮来控制整体进度条的进度：点击Prev按钮减少进度，Next来增加进度；首先创建一个  index.html，补充页面中的标签元素</</</</</</</</</</</</</</</</</

			
		

	





	

		

			

				
					
定义进度条样式

				
			

			

				

					weixin_43800535的博客
				

				

					01-27
					
					297
					
				

			

		

		

			
				
布局

要想在布局文件中声明圆形进度条，可以添加 style 属性值为 style="?android:progressBarStyle"


<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match

			
		

	





	

		

			

				
					
进度条ProgressBar样式设计

				
			

			

				

					qq_36403434的博客
				

				

					07-07
					
					1107
					
				

			

		

		

			
				
Android 进度条的样式


 
例1：（默认样式(中等圆形)）
Xml代码 

    android:id="@+id/progressBar1" 
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    /> 
例2：（超大圆形）
Xml代码 

			
		

	





	

		

			

				
					
24个最新创意进度条设计，分分钟让你灵感爆表！！！

				
			

			

				

					设计“1+2”，摹客就够了！
				

				

					10-30
					
					2648
					
				

			

		

		

			
				
现今，Web或App 软件设计中，除却常见的加载动画，另一种时常出现在加载、下载，导航以及播放等页面中的组件设计——进度条设计。也能够有效地可视化等待，及时给予用户反馈和提示，缓解用户负面情绪，提升用户体验的同时，降低跳出率。

然而，进度条的设计究竟如何才能提升用户体验的同时，利用精美炫酷的色彩，图片，动画，亦或是故事主题，提供与众不同的视觉效果，树立企业品牌形象，为公司软件产品锦上添花呢？

...

			
		

	





	

		

			

				
					
模拟制作文件下载bootstrap进度条。要求使用jquery控制进度条的增长

				
			

			

				

					03-16
				

			

		

		

			
				
可以使用jQuery来模拟制作文件下载bootstrap进度条。具体步骤如下：

1. 在HTML文件中添加进度条的HTML代码，如下所示：

```
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
```

2. 在jQuery中使用ajax请求来模拟文件下载的过程，并控制进度条的增长。代码如下：

```
$(document).ready(function() {
  var progress = $('.progress-bar');
  var width = 0;
  var interval = setInterval(function() {
    width += 10;
    progress.css('width', width + '%');
    progress.attr('aria-valuenow', width);
    if (width >= 100) {
      clearInterval(interval);
    }
  }, 1000);
});
```

在这段代码中，我们首先获取进度条的jQuery对象和初始宽度为0。然后使用setInterval函数来模拟文件下载的过程，每隔1秒钟增加进度条的宽度10%，直到达到100%为止。在每次增加进度条宽度时，我们还需要更新进度条的aria-valuenow属性，以便屏幕阅读器能够正确地读取进度条的进度。

3. 最后，我们需要在CSS文件中设置进度条的样式，如下所示：

```
.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.progress-bar {
  background-color: #337ab7;
  transition: width 0.6s ease;
}
```

在这段代码中，我们设置进度条的高度、背景颜色和边框半径等样式，以及进度条的背景颜色和宽度变化的过渡效果。

通过以上步骤，我们就可以成功地模拟制作文件下载bootstrap进度条，并使用jQuery控制进度条的增长。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值