1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>数据分析进度条-jq22.com</title>
    6. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    7. <style>
    8. .flex-center {
    9.     display:flex;
    10.     flex-direction:column;
    11.     align-items:center;
    12. }
    13. .container {
    14.     display:inline-block;
    15.     width:50%;
    16.     height:20px;
    17.     padding-right:10px;
    18.     border:1px solid #999;
    19.     border-radius:5px;
    20. }
    21. .h-100P {
    22.     height:100%;
    23. }
    24. .bar {
    25.     display:inline-block;
    26.     background:#90bf46;
    27.     color:white;
    28.     font-weight:bold;
    29.     padding:0 5px;
    30.     text-align:right;
    31.     border-radius:5px;
    32.     border-right:1px solid #999;
    33. }
    35. #myProgress {
    36.   margin-top20px;
    37.   width: 100%;
    38.   height: 30px;
    39.   position: relative;
    40.   background-color: #ddd;
    41. }
    43. #myBar {
    44.   background-color: #4CAF50;
    45.   width: 10px;
    46.   height: 30px;
    47.   position: absolute;
    48. }
    49. </style>
    50. </head>
    51. <body>
    52. <div class="flex-center">
    53.     <h1>正在为你分析膳食营养，请稍后...</h1>
    54.     <span class="container">
    55.           <span id="progressBar" class="h-100P bar"></span>
    56.     </span>
    57. </div>
    59. <div id="myProgress">
    60.   <div id="myBar"></div>
    61. </div>
    62. <br>
    63. <button onclick="move()">点我</button> 
    64. <script>
    65.  $(document).ready(function() {
    66.      var percentage = 0;
    67.      var interval = setInterval(function() {
    68.          if (percentage < 10000) {
    69.              percentage = percentage + 35;
    70.              var widthTemp = (percentage / 100).toFixed(0) + '%';
    71.              $('#progressBar').css('width', widthTemp);
    72.              $('#progressBar').text(widthTemp);
    73.          } else {
    74.              clearInterval(interval);
    75.              $('h1').text('膳食分析完毕！正在为您跳转...');
    76.              setTimeout(function() {
    77.                  //location = '#';
    78.              }, 1500);
    79.          }
    80.      }, 5);
    81.  });
    82.  function move() {
    83.   var elem = document.getElementById("myBar");   
    84.   var width = 0;
    85.   var id = setInterval(frame, 10);
    86.   function frame() {
    87.     if (width == 100) {
    88.       clearInterval(id);
    89.     } else {
    90.       width++; 
    91.       elem.style.width = width + '%'; 
    92.     }
    93.   }
    94. }
    95. </script>
    97. </body>
    98. </html>

    image.png