thinking.js

A customizable loading animation library that sits on top of jQuery and Font Awesome.

Demo

View a demo here: http://projects.patrickvalle.com/thinking.js/demo.html

Supported Browsers

• Firefox
• Chrome
• Internet Explorer (> 9)

Prerequisites

Before you can get started using thinking.js, you'll need to include the following libraries in your page:

• jQuery (>= 1.4)
• FontAwesome (>= 4.x)

Usage

Import the supplied thinking.css and thinking.js files into your page.

thinking.initialize([params]) - initializes the library with the specified optional params. It's not required to call thinking.initialize() unless you want to override the default values.

• params (optional) - JSON object with any of the following properties:
  • icon - String representing which Font Awesome icon to use. Defaults to "spinner".
  • animation (spin|pulse) - String representing which animation style to use with the icon. Defaults to "spin".
  • ellipsis - Number (in millis) for the delay between ellipsis painting. Defaults to 500.

thinking.initialize({
  icon: 'refresh',
  animzation: 'pulse',
  ellipsis: 250
});

thinking.start([message][, currentStep][, totalSteps]) - starts the loading animation

• message (optional) - Text to get displayed to the right of the loading animation
• currentStep (optional) - Number to prepend to the message indicating a step in a workflow. This must be used in conjunction with totalSteps
• totalSteps (optional) - Number to prepend to the message indicating the total number of steps in a workflow. This must be used in conjunction with currentStep

thinking.start(); // Shows just the loading animation
thinking.start('Loading your profile'); // Shows the loading animation with text next to it
thinking.start('Loading your profile', 1, 3); // Shows the loading animation with the text "(1 of 3) Loading your profile" next to it

thinking.stop() - stops the loading animation

thinking.stop();