怎么给自己的网站加上漂亮的进度条加载

2019-02-06 作者: gao19970828 浏览: 19

gif动图演示效果

GIF

实际效果演示:

http://www.23txw.com

使用教程:

1、将压缩包内的两个js上传到网站(本文末下载)

2、引入这两个js

Snipaste_2018-12-30_11-55-53

3、在之前插入下方代码


 <script>
      $(function() {
          prettyPrint()
          function resetToDefaults() {
            topbar.config({
              autoRun      : true,
              barThickness : 3,
              barColors    : {
                '0'      : 'rgba(26,  188, 156, .9)',
                '.25'    : 'rgba(52,  152, 219, .9)',
                '.50'    : 'rgba(241, 196, 15,  .9)',
                '.75'    : 'rgba(230, 126, 34,  .9)',
                '1.0'    : 'rgba(211, 84,  0,   .9)'
              },
              shadowBlur   : 10,
              shadowColor  : 'rgba(0,   0,   0,   .6)'
            })
          }

          // Page load
          resetToDefaults()
          topbar.show()
          setTimeout(function() {
            $('#main_content').fadeIn('slow')
            topbar.hide()
          }, 1500)

          // Simple Demo
          $('#btnStartSimple').click(function() {
            resetToDefaults()
            topbar.show()
          })
          $('#btnStopSimple').click(function() {
            topbar.hide()  
          })

          // Advanced Demo
          $('#btnStartAdvanced').click(function() {
            resetToDefaults()
            topbar.config({
              autoRun      : false, 
              barThickness : 5,
              barColors    : {
                  '0'      : 'rgba(26,  188, 156, .7)',
                  '.3'     : 'rgba(41,  128, 185, .7)',
                  '1.0'    : 'rgba(231, 76,  60,  .7)'
              },
              shadowBlur   : 5,
              shadowColor  : 'rgba(0, 0, 0, .5)'
            })
            topbar.show();
            (function step() {
              setTimeout(function() {  
                if (topbar.progress('+.01') < 1) step()
              }, 16)
            })()
          })
          $('#btnStopAdvanced').click(function() {
            topbar.hide()  
          })
      })
    </script>


版权免责声明 1、本网站名称:国际115资源网
2、本站永久网址:http://www.guoji115.com
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址(免费)
评论
本文作者

    选择打赏方式

阅读排行 文章推荐 随机推荐