Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

ajax loader


fogLoader -- jQuery UI Theme Based Ajax Loader Dialog

Submitted by Turgeson on September 13, 2010 - 3:50pm

fogLoader allows you to extend the existing dialog box from the jQuery UI library for use as a modal ajax loader or a progress bar. You can use several styles and options to convey the "loading"
message. All while utilizing your jQuery UI themerolled style sheets.
This has no effect on your other implementations of a standard dialog box.
Styles:

  • Static Message -- simple text on the screen with ellipses
  • Static Message plus animated ellipses (animated: true)
  • Spelled Out Message (animated:true, progressSpell:true) -- spells out your busy message and adds ellipses (or whatever character you provide)
  • Progress Bar (style:'progressbar') -- incorporate a themed progressbar as your dialog box. This can be updated in realtime
  • Animated Progress

jQuery Canvas Loader

Submitted by xjamundx on July 24, 2010 - 1:53am

Description

Uses the canvas element to create an alternative to the typical ajax loading images. Can be used to replace an existing image or you can create a custom one that will take the place of any element on your page. See example page. This plugin is useful in browsers that do not support animated gifs such as WebKit for Android. Before replacing an image it makes sure that the browser supports canvas. Warning: this plugin has not been tested in many browsers, but it does work on Mobile Safari and Android browsers.

“busyBox”, a simpler and cooler AJAX-Loader jQuery plugin

Submitted by rogerjose81 on May 20, 2010 - 7:21pm

busyBox is intended to display the HTML box(es) to be updated by an AJAX request as 'busy' while performing such request.

This plugin differs from others in the way it just put a transparent 'layer' over the involved boxes (this using a jQuery selector) instead of putting it over the entire body, in this way the user will specifically know which sections of the page are being updated.

Example of usage:

var loading = $("#my_container").busyBox({
spinner: '<img src="themes/gold/images/loading.gif" />'
});
$.ajax({
url: "/my-url",
success: function(data, textStatus, XMLHttpRequest){
$("#my_container").html(data).fadeIn('fast');
},
complete: function complete(XMLHttpRequest, textStatus){
loading.busyBox('close');
}
});

getScriptLite

Submitted by cmcculloh on December 17, 2009 - 8:15pm

A light-weight plugin to get a remote script and execute it on the page through jQuery.

This is basically $.getScript() but with no callback method and with none of the overhead of an actual $.getScript() call. This is for when you just want to grab a remote script and throw it on the page.

Call by:

$.getScriptLite("yourScript.js");

fork me on github

Loading

Submitted by nbubna on June 23, 2009 - 4:50pm

Provides trivially easy way to notify users that a request is being loaded and processed in the background, so that they know their action was received and the page has not frozen. Just toggle the message (or image or any element) on or off with $.loading() or $('#foo').loading(). The plugin handles creation and positioning and "pulsing" of the message for you. It also provides a 'mask' option to block the UI (at the call level) while the loading message (or image or any element) is running. You can tell it to automatically toggle on ajaxStart/ajaxStop with the 'onAjax' option. You can tell it to automatically terminate after a specified time with the 'max' option. You can tell it to only show if the loading takes longer than a specified time with the 'delay' option. And so on... Think of this as a cleaner, more user-friendly $.blockUI, where the blocking part is optional.

jQuery UI Throbber

Submitted by jeremylea on June 22, 2009 - 4:43pm

A vector graphics based throbber or spinner (see Ajaxload for other examples). The throbber uses SVG on browsers and VML on that other thing... No more making GIFs for different sizes and backgrounds.

The throbber color, background, segment path and opacity, etc. can be customized in the traditional jQuery UI way, although it is limited to segmented rotating designs. See the demo for example usage.

Inspired by the Raphaël · Spinner demo.

Throbber (aka loading animation)

Submitted by Lutz Issler on August 27, 2008 - 8:36am

Throbber creates a loading animation for jQuery, ready to be used in your AJAX applications. Of course, the throbber is not limited to AJAX but can also be triggered manually.

Using the plugin is easy:

$("#button").throbber("click");

adds a loading animation (›throbber‹) to the DOM node with the ID ›button‹ which shows up when a click event is triggered.