web-dev-qa-db-ja.com

YouTubeのような進行状況バー

YouTubeのようなプログレスバーを作成しようとしています。ページの起動時にバーがロードされます。これまでこれを試しました。これが私のスクリプトのコードです

$({property: 0}).animate({property: 105}, {
    duration: 4000,
    step: function() {
        var _percent = Math.round(this.property);
        $('#progress').css('width',  _percent+"%");
        if(_percent == 105) {
            $("#progress").addClass("done");
        }
    },
    complete: function() {
        alert('complete');
    }
});

また、同じ jsFiddle 、 http://jsfiddle.net/ajaSB/3/ も含めています。

このjsfiddleでは、進行状況バーが表示されますが、IDEで同じコードを使用してファイルを実行すると、進行状況バーは表示されません。何が間違っていますか？バーを取得しますか？

jqueryyoutubeprogress-bar
36
Swagata Barua

JQueryライブラリへの参照を含む完全なHTMLページの例を次に示します。

ほとんどの場合で動作しますが、コードを$(document).ready(...)でラップして、必要なすべてのリソースが確実に読み込まれるようにしてくださいコードを実行します。

_<!DOCTYPE html>
<html>
  <head>
  <title>Progress Test</title>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
          var _percent = Math.round(this.property);
          $("#progress").css("width",  _percent+"%");
          if(_percent == 105) {
            $("#progress").addClass("done");
          }
        },
        complete: function() {
          alert("complete");
        }
      });
    });
  </script>

  <link href="css/progressbar.css" rel="stylesheet" type="text/css" />

  </head>
  <body>
    <div id="progress" class="waiting">
  </body>
</html>
_

これは Internet Explorer 8 およびそれ以前をサポートしないjQueryのバージョン2を対象としていることに注意してください。古いInternet Explorerバージョンのサポートが必要な場合は、代わりにjQuery 1.10.2をターゲットにする必要があります。

進行状況バーが表示されないが、アニメーションが終了する4秒後にalert("complete")が表示される場合、CSSへの参照が間違っている（正しい場所を指していない、またはファイル名のつづりが間違っています）。

18
awe

NProgress.js は非常にクールでシンプルなライブラリです。 Gitリポジトリは here です。 MITライセンス があります。

30
Arthur Yakovlev

デモ： Fiddle

次のコードを試してください。このファイルをローカルホスト（ローカルサーバー）で実行する必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $({property: 0}).animate({property: 105}, {
            duration: 4000,
            step: function() {
                var _percent = Math.round(this.property);
                $('#progress').css('width',  _percent+"%");
                if(_percent == 105) {
                    $("#progress").addClass("done");
                }
            },
            complete: function() {
                alert('complete');
            }
        });
    });
</script>
<style>
    #progress {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: -6px;
        width: 0%;
        height: 2px;
        background: #b91f1f;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        -moz-transition: width 500ms ease-out,opacity 400ms linear;
        -ms-transition: width 500ms ease-out,opacity 400ms linear;
        -o-transition: width 500ms ease-out,opacity 400ms linear;
        -webkit-transition: width 500ms ease-out,opacity 400ms linear;
        transition: width 500ms ease-out,opacity 400ms linear
    }
    #progress.done {
        opacity: 0
    }
    #progress dd,#progress dt {
        position: absolute;
        top: 0;
        height: 2px;
        -moz-box-shadow: #b91f1f 1px 0 6px 1px;
        -ms-box-shadow: #b91f1f 1px 0 6px 1px;
        -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
        box-shadow: #b91f1f 1px 0 6px 1px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%
    }
    #progress dd {
        opacity: 1;
        width: 20px;
        right: 0;
        clip: rect(-6px,22px,14px,10px)
    }
    #progress dt {
        opacity: 1;
        width: 180px;
        right: -80px;
        clip: rect(-6px,90px,14px,-6px)
    }
    @-moz-keyframes Pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-ms-keyframes Pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @-o-keyframes Pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-webkit-keyframes Pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @keyframes Pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    #progress.waiting dd,#progress.waiting dt {
        -moz-animation: Pulse 2s ease-out 0s infinite;
        -ms-animation: Pulse 2s ease-out 0s infinite;
        -o-animation: Pulse 2s ease-out 0s infinite;
        -webkit-animation: Pulse 2s ease-out 0s infinite;
        animation: Pulse 2s ease-out 0s infinite
    }
</style>
<div id="progress" class="waiting">
    <dt></dt>
    <dd></dd>
</div>

または：

このファイルをサーバーにアップロードしてから、ファイルを実行します。間違いなく動作します。

10
Nathan Srivi

LoadingBar.js：YouTubeのような読み込みバーをWebサイトに追加する

YouTubeは最近、次のページが読み込まれていることを示すために、ページの上部に赤い読み込みバーを追加しました。ブラウザの読み込みバーに依存していない理由を疑問に思うかもしれません。これは、次のページがAjaxで読み込まれているため、通常のページ読み込みメカニズムがトリガーされないためです。それがブラウザがそれを拾わなかった理由です。ご存じの方もいると思いますが、Ajaxを介してコンテンツ全体をロードすると、Webサイトのロードが通常の方法よりも速くなります。

これは、すべての静的コンテンツが変更されずに残り、動的コンテンツのみがロードされるためです。そうすれば、オーバーロードを何度も繰り返して変化しない静的コンテンツをサーバーに要求し続ける必要がありません。

[〜＃〜] demo [〜＃〜] （

[〜＃〜] download [〜＃〜]

Web用のYouTubeのような読み込みバーを作成します

UsabilityPostでのDmitry Fadeyevによるブログ投稿で言及されているように、多くの開発者はこのUIパターンをますますWebサイトに統合しています。本日、WebサイトのAjaxリンクに読み込みバーを追加できるjQueryプラグインを作成することにしました。それがどのように機能するかをお見せしましょう。

基本的な使用法

HTMLマークアップ

<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>

JavaScript

$(".ajax-call").loadingbar({
  target: "#loadingbar-frame",
  replaceURL: false,
  direction: "right",

  /* Default Ajax parameters.  */
  async: true, 
  complete: function(xhr, text) {},
  cache: true,
  error: function(xhr, text, e) {},
  global: true,
  headers: {},
  statusCode: {},
  success: function(data, text, xhr) {},
  dataType: "html",
  done: function(data) {}
});

CSSカスタマイズ

#loadingbar {
    background: YOUR COLOR;
}

#loadingbar dd, #loadingbar dt {
  -moz-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -ms-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -webkit-box-shadow: YOUR COLOR 1px 0 6px 1px;
  box-shadow: YOUR COLOR 1px 0 6px 1px;
}

以上です。これで、すべてのAjax呼び出し用の素晴らしいロードバーができました。楽しんでくださいね:)

5
HMagdy

AJAXアプリケーションが実際に正当なページ読み込みの進行状況を表すアプリケーション用の 'youtube-like'ローダーが必要な場合は、次のソリューションを検討してください（Nathan Sriviの回答に基づく）：

.ajax()メソッドで：

$.ajax 
( 
  { 
...
    xhr: function() 
    { 
      var xhr = new window.XMLHttpRequest();

      //Upload progress
      xhr.upload.addEventListener
      (
        "progress",
        function( event)
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      //Download progress
      xhr.addEventListener
      (
        "progress",
        function( event )
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      return xhr;
    },
...
    success: function( data, textStatus, xhr )
    {
      ...
      // Reset our ajax loading progress bar
      $( '#progress' ).removeClass( 'notransition' );
      ...
    }

次に、CSSで。これを使って：

#progress {
  position: fixed;
  opacity: 1;
  z-index: 2147483647;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: #b91f1f;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: width 500ms ease-out,opacity 400ms linear;
  -ms-transition: width 500ms ease-out,opacity 400ms linear;
  -o-transition: width 500ms ease-out,opacity 400ms linear;
  -webkit-transition: width 500ms ease-out,opacity 400ms linear;
  transition: width 500ms ease-out,opacity 400ms linear;
}
#progress.finished {
  opacity: 0 !important;
}
#progress.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#progress dd,#progress dt {
  position: absolute;
  top: 0;
  height: 2px;
  -moz-box-shadow: #b91f1f 1px 0 6px 1px;
  -ms-box-shadow: #b91f1f 1px 0 6px 1px;
  -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
  box-shadow: #b91f1f 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
#progress dd {
  opacity: 1;
  width: 20px;
  right: 0;
  clip: rect(-6px,22px,14px,10px); 
}
#progress dt {
  opacity: 1;
  width: 180px;
  right: -80px;
  clip: rect(-6px,90px,14px,-6px);
}
@-moz-keyframes Pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-ms-keyframes Pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@-o-keyframes Pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-webkit-keyframes Pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@keyframes Pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
#progress.waiting dd,#progress.waiting dt {
  -moz-animation: Pulse 2s ease-out 0s infinite;
  -ms-animation: Pulse 2s ease-out 0s infinite;
  -o-animation: Pulse 2s ease-out 0s infinite;
  -webkit-animation: Pulse 2s ease-out 0s infinite;
  animation: Pulse 2s ease-out 0s infinite
}
#progress.notransition dd,#progress.notransition dt {
  -moz-animation: none !important;
  -ms-animation: none !important;
  -o-animation:  none !important;
  -webkit-animation:  none !important;
  animation:  none !important;
}

そして今、あなたはそれぞれのAJAX操作...のために動作するローダーを持っている必要があり、本当に派手なアニメーションを再生するのではなく、受信された応答の真の割合を表すために実際に動作します最初にメインページを読み込むとき。

最初のページの読み込みで動作するようにするには（つまり、実際に正当な進行状況を表示しないようにするには）、Nathan Sriviがdocument.readyすでに述べた以上の機能：

$( document ).ready(function() {
    $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
            var _percent = Math.round(this.property);
            $('#progress').css('width',  _percent+"%");
            if(_percent == 105) {
                $("#progress").addClass("done");
            }
        },
        complete: function() {
            alert('complete');
        }
    });
});

最後に、

このデザインのローダーが正しく機能するためには、「Content-Length」ヘッダーがブラウザーに送信されていることを確認する必要があります。そうでなければ、event.lengthComputableメンバーはfalseに解決され、進行状況バーはロードされません。

HTH、矛盾を自由に編集してください。

5
Rik

TalkersCode.comのコードとチュートリアルはこちら http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php

function check_element(ele)
{
 var all = document.getElementsByTagName("*");
 var totalele=all.length;
 var per_inc=100/all.length;

 if($(ele).on())
 {
  var prog_width=per_inc+Number(document.getElementById("progress_width").value);
  document.getElementById("progress_width").value=prog_width;
  $("#bar1").animate({width:prog_width+"%"},10,function(){
  if(document.getElementById("bar1").style.width=="100%")
  {
    $(".progress").fadeOut("slow");
  }         
  });
 }

 else   
 {
  set_ele(ele);
 }
}
1
naresh

Nprogressによる画像読み込みデモ が役立つ場合があります。

1
terry

プログレスバーのプラグインを入手できます
GitHubで公開しました

https://github.com/shashibeit/progressbar

プロジェクトに含めて、以下の関数を呼び出す必要があります

Progress.start();Progress.go(20);Progress.go(30);Progress.go(80);Progress.go(100);Progress.complete();

0
Shashikant