使用Bootstrap实现动画进度条

创建一个动画的进度条的步骤如下:

1.添加一个带有 class .progress 和 .progress-striped 的
。同时添加 class .active

2.接着,在上面的
内,添加一个带有 class .progress-bar 的空的

3.添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置
这将会使条纹具有从右向左的运动感。

让我们看看下面的实例:
  1. >  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 动画的进度条title>  
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="/scripts/jquery.min.js">script>  
  7.    <script src="/bootstrap/js/bootstrap.min.js">script>  
  8. head>  
  9. <body>  
  10.   
  11. <div class="progress progress-striped active">  
  12.    <div class="progress-bar progress-bar-success" role="progressbar"   
  13.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"   
  14.       style="width: 40%;">  
  15.       <span class="sr-only">40% 完成span>  
  16.    div>  
  17. div>  
  18.   
  19. body>  
  20. html> 
结果如下所示:



堆叠的进度条

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠,如下面的实例所示:
  1. >  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 堆叠的进度条title>  
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="/scripts/jquery.min.js">script>  
  7.    <script src="/bootstrap/js/bootstrap.min.js">script>  
  8. head>  
  9. <body>  
  10.   
  11. <div class="progress">  
  12.    <div class="progress-bar progress-bar-success" role="progressbar"   
  13.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"   
  14.       style="width: 40%;">  
  15.       <span class="sr-only">40% 完成span>  
  16.    div>  
  17.    <div class="progress-bar progress-bar-info" role="progressbar"   
  18.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  19.       style="width: 30%;">  
  20.       <span class="sr-only">30% 完成(信息)span>  
  21.    div>  
  22.    <div class="progress-bar progress-bar-warning" role="progressbar"   
  23.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  24.       style="width: 20%;">  
  25.       <span class="sr-only">20% 完成(警告)span>  
  26.    div>  
  27. div>  
  28.   
  29. body>  
  30. html>  

结果如下所示:

你可能感兴趣的:(前端)