Cross Browser HTML5 Progress Bars In Depth

As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. They can be animated (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static (like some shopping cart applications have to show the user how many pages it will take to check out an order). I used to create progress bars using 

 tags, CSS and a litle bit of math, but now I like to do it the HTML5 way using the  tag. This article will discuss how this tag is rendered by default in all operating systems and browsers and how to style the progress tag with CSS, even in browsers that don’t officially support the it. It will also discuss some interestinglimitations of all the browser implementations amd show some interesting examples using advanced CSS3 techniques.


http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth

A Ruby snippet to download Vimeo videos with ProgressBar

#!/usr/bin/ruby

require 'rubygems'
require 'progressbar'
require 'net/http'

if ARGV.size < 1
 puts "usage vimeo.rb "
 exit 1
else
 id = ARGV[0]
      Net::HTTP.start('www.vimeo.com') {|http|
       req = Net::HTTP::Get.new("/moogaloop/load/clip:#{id}", nil)
       response = http.request(req)
       /(.*)<\/caption>/.match(response.body)
  title = $1
  /(.*)<\/request_signature>/.match(response.body)
  signature = $1
  /(.*)<\/request_signature_expires>/.match(response.body)
  signatureExp = $1
  puts title
  req = Net::HTTP::Get.new("/moogaloop/play/clip:#{id}/#{signature}/#{signatureExp}/?q=hd", nil)
  http.request(req) { |response|
    /(mp4|flv)/.match(response['location'])
    ext = $1
    /http:\/\/(.*\.vimeo\.com)(\/.*)/.match(response['location'])
    Net::HTTP.start($1) {|http|
     req = Net::HTTP::Get.new($2)
     alreadyDL = 0
     http.request(req) { |response|
      pBar = ProgressBar.new(title,100)
      size = response.content_length
      File.open("#{title}.#{ext}",'w') {|file|
       response.read_body {|segment|
        alreadyDL += segment.length
        if(alreadyDL != 0)
         aPercent = (alreadyDL * 100) / size
         pBar.set(aPercent)
        end
        file.write(segment)
       }
      pBar.finish
      }
     }
    }
   } 
  }
end

gem install progressbar before.

http://snippets.dzone.com/posts/show/7630

Ajax progress indicator with prototype

You may know that you can add a global ajax responder to your application:

Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount--;
}
});

But we not going to cover that here, because you can't get the originating object. For example, there's no way here for a global ajax responder to get the anchor object.

< a_class="add" href="#" onclick="new Ajax.Request('/products/3/categorizations/18', {asynchronous:true, evalScripts:true, method:'put'}); return false;">add

Here's the rails generator code:

<%= link_to_remote "add", { :url => product_categorization_path(@product, category), :method => :put } %>

So, let's add some code to prevent the user from clicking twice.
To keep the view clean, We'll implement it as a simple view helper in application_helper.rb

<%= link_to_remote "add", { :url => product_categorization_path(@product, category), :before => ajax_progress, :method => :put } %>

def ajax_progress
 "setTimeout(function(){ this.innerHTML = '...' }.bind(this), 100)"
end

SetTimeout takes either a function name or an anonymous function. We binding the anonymous function to "this", which in this context refers to the 'A' anchor tag. Because it's bound, we can refer to "this" inside the function and get the anchor tag.

The setTimeout is useful because it lets us modify the tag (even remove it from the DOM) without messing with the ajax request. You can use setTimeout on a form to change the action, so it can't be submitted twice (for important forms)

We going to step it up one more, because this code belongs in a library. Time to open up application.js and create a ghetto pseudoclass singleton thingy.

This will prevent the link from doing anything if the user clicks it twice.

Now, to modify the ajax_progress helper to simple beauty.

def ajax_progress
 "setTimeout(MyApp.ajaxing.bind(this), 100)"
end

Finally, let's show the user a GMail-style notice after 5 seconds, just to let them know that we're running slow or have just plain died.

MyApp = {

 ajaxing: function(){
   this.innerHTML = '...';
   this.onclick = FacetApp.nothing;
   setTimeout(MyApp.slooow.bind(this), 5000);
 },

 /* shows a ? symbol. useful for showing progress on an ajax action */
 slooow: function(){
   this.innerHTML = ".?."
   /* show a warning message in the ui somewhere */
 }
}

Got a better way of doing this?

http://www.caboo.se/articles/2008/3/27/ajax-progress-indicator-with-prototype