JS做的进度条,如何做的?

JavaScript022

JS做的进度条,如何做的?,第1张

js其实是没法计算到网页的加载进度的。

目前见到的打开页面显示进度的有两种

1、如果是flash做的,那是flash自身的加载进度。

2、如果是js做的,做法比较简单,就是在页面的不同的地方插入script标签,动态改变进度的值。     

<html>

    <head>

        <script>

        var processPer = 0

        window.onload = function(){

            document.getElementById('process').innerHTML = processPer

        }

        </script>

    </head>

    <body>

        <div id="process"></div>

        <div></div>

        ....

        <script>

        processPer = 30

        document.getElementById('process').innerHTML = processPer

        </script>

        <div></div>

        ....

        <div></div>

        ....

        <script>

        processPer = 100

        document.getElementById('process').innerHTML = processPer

        </script>

    </body>

</html>

类似这样的,就可以实现了进度的动态改变。

个主题化的进度条插件库的一切。

ProgressJs是一个JavaScript和CSS3库,帮助开发人员创建和管理页面上的任何对象的进度条。你可以自己设计模板的进度条或简单的定制。

你可以使用ProgressJs显示加载内容的进步(图像,视频,等等)到用户的网页。它可以用在所有的元素包括文本框,文本区,甚至整个身体。

它的重量轻,易于使用的,可定制的,自由和开放源码。

基本使用方法

//to set progress-bar for whole page

progressJs().start()

//or for specific element

progressJs("#targetElement").start()

这是ProgressJs的第一个测试版,这当然会更强大的很快。我们将发布一个稳定的变化版本,下载最新版本或其他。作为一个开发者,你可以帮助我们找到错误或解决他们自己的,开源的美。

加载图片动画

<div class="container" style="text-align: center">

<div class="row-fluid" style="margin-bottom: 30px">

<img class="span4 img-rounded" data-img="1" style="height: 187px" />

<img class="span4 img-rounded" data-img="2" style="height: 187px" />

<img class="span4 img-rounded