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. }
    34. #myProgress {
    35. margin-top20px;
    36. width: 100%;
    37. height: 30px;
    38. position: relative;
    39. background-color: #ddd;
    40. }
    41. #myBar {
    42. background-color: #4CAF50;
    43. width: 10px;
    44. height: 30px;
    45. position: absolute;
    46. }
    47. </style>
    48. </head>
    49. <body>
    50. <div class="flex-center">
    51. <h1>正在为你分析膳食营养,请稍后...</h1>
    52. <span class="container">
    53. <span id="progressBar" class="h-100P bar"></span>
    54. </span>
    55. </div>
    56. <div id="myProgress">
    57. <div id="myBar"></div>
    58. </div>
    59. <br>
    60. <button onclick="move()">点我</button>
    61. <script>
    62. $(document).ready(function() {
    63. var percentage = 0;
    64. var interval = setInterval(function() {
    65. if (percentage < 10000) {
    66. percentage = percentage + 35;
    67. var widthTemp = (percentage / 100).toFixed(0) + '%';
    68. $('#progressBar').css('width', widthTemp);
    69. $('#progressBar').text(widthTemp);
    70. } else {
    71. clearInterval(interval);
    72. $('h1').text('膳食分析完毕!正在为您跳转...');
    73. setTimeout(function() {
    74. //location = '#';
    75. }, 1500);
    76. }
    77. }, 5);
    78. });
    79. function move() {
    80. var elem = document.getElementById("myBar");
    81. var width = 0;
    82. var id = setInterval(frame, 10);
    83. function frame() {
    84. if (width == 100) {
    85. clearInterval(id);
    86. } else {
    87. width++;
    88. elem.style.width = width + '%';
    89. }
    90. }
    91. }
    92. </script>
    93. </body>
    94. </html>

    image.png