如何在页面加载时显示正在运行的进度栏 [英] How to show a running progress bar while page is loading

问题描述

我要在我的网页载入时显示正在运行的进度栏 LINK THIS LINK 。
我在我的例子中使用一个简单的加载图像，但我想在运行的进度条中转换它。这是我的代码：

I want to show a running progress bar while my page is loading LINK THIS LINK, in my page . i used a simple loading image in my example but i want to convert it in a running progress bar. here is my code:

Html

<div id="loading">
   <img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />
</div>
<div id="txt"><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

Css

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

脚本

$(window).load(function() {
    alert("hi");
    $('#loading').hide();
});

任何人都有任何想法如何做到这一点？我会真的很感激这个！
这是我的小提琴检查

Any one have any idea how to do this? i will really appreciate for this ! Here is my Fiddle Check It

推荐答案

这里有一些插件，例如 nprogress.js ， a href =http://github.hubspot.com/pace/docs/welcome/> pace.js 和此 Youtube一样。如果你想自己做，你可以看看他们的代码里面。

There are a few plugins already done this such as nprogress.js,pace.js and this Youtube-like one. If you wanna do it yourself you may have a look at their code inside.

这篇关于如何在页面加载时显示正在运行的进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！