Question

我在管理后端应用程序中工作。我的应用程序使用soap api响应来显示内容，因此该过程需要花费太多时间来加载。

所以我计划显示进度条直到页面..我已经搜索了很多并通过此链接得到了一个完美的答案Progress bar example demo site

参考本网站。我在<body>标记内添加了以下html代码：

<div class="preloader-wrap" > 
  <div class="percentage" id="precent">100%</div>
  <div class="loader">
    <div class="trackbar">
      <div class="loadbar" style="width: 100%;"></div>
    </div>
    <div class="glow" style="width: 100%;"></div>
  </div>
</div>

并添加了我的css代码

.loadbar {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(
  45deg, 
    #008737, 
    #008737 10px, 
    #69AF23 10px,
    #69AF23 20px
  ); /* Stripes Background Gradient */

  box-shadow: 0px 0px 14px 1px #008737; 
  position: absolute;
  top: 0;
  left: 0;
  animation: flicker 5s infinite;
  overflow: hidden;
}

.glow {
  width: 0%;
  height: 0%;
  border-radius: 20px;
  box-shadow: 0px 0px 60px 10px #008737;
  position: absolute;
  bottom: -5px;
  animation: animation 5s infinite;
}

我的js是

$(window).on('load', function () {

var width = 100,
perfData = window.performance.timing, 
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart), 
time = parseInt((EstimatedTime/1000)%60)*100; 


// Percentage Increment Animation
var PercentageID = $("#precent"),
    start = 0,
    end = 100,
    durataion = time;
    animateValue(PercentageID, start, end, durataion);

function animateValue(id, start, end, duration) {

    var range = end - start,
      current = start,
      increment = end > start? 1 : -1,
      stepTime = Math.abs(Math.floor(duration / range)),
      obj = $(id);

    var timer = setInterval(function() {
        current += increment;
        $(obj).text(current + "%");
      //obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}
// Loadbar Animation
$(".loadbar").animate({
  width: width + "%"
}, time);

// Loadbar Glow Animation
$(".glow").animate({
  width: width + "%"
}, time);
});

我没有得到确切的输出，我的页面显示如下，我想显示页面加载的进度条0到100％，直到页面加载页面加载后我想要隐藏它。

enter image description here

进度条会附加到我的页面。请帮我解决这个问题。

使用jquery加载页面时无法显示进度条

0 个答案: