jquery - 如何在 HTML 中使用 LoadGo 动画

Question

我试图在打开我的网站时加载我的 Logo 。所以我正在尝试使用 LoadGo 动画从 Here 获取它

我需要与我的 html 页面集成，它在按钮单击事件中加载。但是如何在加载事件中更改它。如何在我的网站加载时正确集成它。

有 sample 吗？

我的代码在这里:

<div class="container" style="margin-top: 150px;">
    <div class="col-md-4 col-md-offset-4">
        <img id="cocacola" src="cocacola.png" alt="Coca Cola Logo" class="img-responsive logo"
            style="margin: 0 auto;" />
    </div>
    <div id="demo-progress-1" style="margin-bottom: 10px; font-size: 16px; opacity: 0;
        font-weight: bold;">
        0 %</div>
    <button class="btn btn-primary" onclick="mainDemo();">
        <span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;Start
    </button>
</div>
    <script type="text/javascript">
    var cocacolaInterval;
    function mainDemo () {
      $('#demo-msg-1').animate({
        'opacity': '0'
      });
      $('#demo-progress-1').animate({
        'opacity': '1'
      });
      var p = 0;
      $('#cocacola').loadgo('resetprogress');
      $('#demo-progress-1').html('0%');
      window.setTimeout(function () {
        cocacolaInterval = window.setInterval(function (){
          if ($('#cocacola').loadgo('getprogress') == 100) {
            window.clearInterval(cocacolaInterval);
            $('#demo-msg-1').animate({
              'opacity': '1'
            });
            $('#demo-progress-1').animate({
              'opacity': '0'
            });
          }
          else {
            var prog = p*10;
            $('#cocacola').loadgo('setprogress', prog);
            $('#demo-progress-1').html(prog + '%');
            p++;
          }
        }, 150);
      }, 300);
    };
    $(window).load(function () {
        $("#cocacola").load(function () {
            // Main demo
            $('#cocacola').loadgo();
        }).each(function () {
            if (this.complete) $(this).load();
        });

        //mainDemo();
       // $(".container").hide();
    });
    </script>

加载页面后 Logo 将隐藏。

Answer 1

标志加载

试试下面的代码。

 <script type="text/javascript">
            jQuery(window).load(function($) {
                jQuery("#page_load").fadeOut("slow");
            });
        </script>
        <div id="page_load" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; background: #27599A url('cocacola.png') center no-repeat; background-size: 80px;"></div>