Best jQuery Progress Bar Plugins & Tutorials with Demo

    360 panorama for jQuery

    September 16, 2012 | Gallery, Plugins
    360 panorama for jQuery

    A plug-in that turns an array of images into a 360 degrees interactive view that can be rotated at will.

    Features:

    • method… can be “click”, “mousemove” or “auto”
    • sensibility to adjust rotation speed
    • autoscrollspeed to adjust the speed when method “auto” is selected (lower number gives faster rotation)
    • parameter direction can be either “forward” or “backward” depending on how your photos were taken and how you want them to appear
    • cycle (see demo) (new in 0.2)
    • Preload images
    • Display a progress bar expressing loading progress
    Read More Demo

    Nice Sparkle Progress Bars with jQuery & CSS3

    August 10, 2012 | Animation, CSS2 / CSS3.0
    Nice Sparkle Progress Bars with jQuery & CSS3

    Shiny Sparkle Progress bars with percentage label. The sparkles inside the bars are created using a combination of linear-gradient and radial-gradient as the background and then animated using the animation and keyframes properties. However, the label for percentage is animated using jQuery.

    Read More Demo

    jQuery Animated Percentage Loader

    June 8, 2012 | Animation, HTML5, Plugins
    jQuery Animated Percentage Loader

    jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.

    A jQuery plugin that utilises HTML canvas to show an animated percentage loader widget suitable for loading screens or displaying feedback during long-running tasks.

    Read More Demo

    Ajax Upload : jQuery File uploader with progress-bar,drag-drop Feature

    April 21, 2012 | Ajax, Forms
    Ajax Upload : jQuery File uploader with progress-bar,drag-drop Feature

    Ajax Upload; A file upload script with progress-bar, drag-and-drop.Use AJAX Upload to upload multiple files without refreshing the page and style upload button as you wish.This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

    Read More Demo

    File Upload Progress Bar with jQuery and PHP

    April 10, 2012 | Forms, PHP
    File Upload Progress Bar with jQuery and PHP & Demo

    In this tutorials we tell how to create file upload progress bar with PHP and jQuery. In this post we had developed few lines of code using PHP APC library, it is very simple getting the server file upload process every few second and increasing the bar color using jquery css property. Just take a look at this demo.

    Read More Demo

    jqUploader: jQuery plugin for file upload and progressbar

    February 18, 2012 | Forms, Plugins
    jqUploader: jQuery plugin for file upload and progressbar

    jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

    The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1” so that the upload code is initiated when it sees that key/value is on the posted data.

    Read More Demo

    jQuery File Upload

    February 5, 2012 | Drag & Drop, Forms, PHP, Plugins
    jQuery File Upload

    File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery.Supports cross-domain, chunked and resumable file uploads.
    Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

    Read More Demo

    HTML5 File Uploads with jQuery

    September 29, 2011 | Ajax, CSS2 / CSS3.0, Drag & Drop, Other API, PHP, Web, XML
    jQuery HTML5 File Uploads

    Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

    The photos will have a preview and a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on the server, but you could improve it any way you like.

    Read More Demo

    Uploadify – JQuery File Upload Plugin Script

    February 27, 2011 | Web
    Uploadify – JQuery File Upload Plugin Script

    FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup and styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

    Read More Demo