YouTube-like progress bar-第2页回答

I am trying to make a YouTube-like progress bar. The bar should load at the page startup. I have tried this so far. Here is the code of my script

$({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');
    }
});

I am also including the jsFiddle of the same, http://jsfiddle.net/ajaSB/3/.

In this jsfiddle, the progress bar appears, but when I use the same code in my IDE and run the file no progress bar appears. What am I doing wrong? Or if there is another way to get the bar?

标签： jquery youtube progress-bar

8条回答

放荡不羁爱自由

2楼-- · 2019-01-30 05:48

Here is example of a complete HTML page including reference to the jQuery library.

Although it will mostly work without, you should wrap your code in a $(document).ready(...) so that you are sure all required resources are loaded before you run the code.

<!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>

_{Note that this targets version 2 of jQuery, which does not support Internet Explorer 8 and earlier. If you need support for old Internet Explorer versions, you should target jQuery 1.10.2 instead.}

If the progress bar does not show, but you do get the alert("complete") after four seconds when the animation should be finished, it is likely that your reference to the CSS is wrong (not pointing to the right place, or misspelled file name).

0人赞添加讨论(0) 举报

走好不送

3楼-- · 2019-01-30 05:49

LoadingBar.js: Adding a YouTube-Like loading bar to your website

YouTube has recently added a red loading bar at the top of the page to indicate that the next page is loading. You may wonder why they didn’t rely on the browser’s loading bar. That’s because the next page is being loaded with Ajax which doesn’t trigger the normal page load mechanism. That’s why the browser didn’t pick it up. As some of you may know, loading the entire content via Ajax can make your website load faster than the normal way.

That’s because all the static content is left unchanged, and only the dynamic content is being loaded. That way you don’t have to keep asking the server for static content that will never change over and over creating an overload.

DEMO

DOWNLOAD

Create a YouTube-Like loading bar for the web

As mentioned in a blog post by Dmitry Fadeyev over at UsabilityPost, many developers are integrating this UI pattern to their websites more and more. Today I decided to build a jQuery plugin that will let you add a loading bar to any Ajax links on your website. Let me show you how it works.

Basic Usage

HTML markup

<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 customization

#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;
}

And that’s it. You will now have an awesome loading bar for all your Ajax calls. I hope you enjoy this :)

0人赞添加讨论(0) 举报

上一页 1 2

YouTube-like progress bar

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间