• Vanilla

nanobar: Very lightweight progress bars. No jQuery.

Nanobar is a very lightweight progress bar (~699 bytes gzipped). It does not require jQuery. For iE7+ and the rest of the world.

Illustration by akselkreis

  • Spotlight

Pace: Page Load Progress Bar

Pace is a tool to help you create an awesome automatic page load progress bar.

Include pace.js and a CSS theme of your choice, and the result is a beautiful progress indicator for your page load and ajax navigation. There’s no need to hook in to any of your code because the progress bar is detected automatically.

Pace comes with several different themes so you have great aesthetic options. Themes include:

  • Minimal
  • Flash
  • Barber Shop
  • Mac OSX
  • Fill Left
  • Flat Top
  • Big Counter
  • Corner Indicator
  • Bounce
  • Loading Bar
  • Center Circle
  • Center Atom
  • Center Radar
  • Center Simple

With more theme options that you could ever use, easy installation with Eager and nifty animation, this tool is a great addition to almost any website design. Try it in a flash with a live preview that works on your website.

  • Vanilla

bLazy: Lightweight Lazy Loading Plugin

bLazy is a lightweight lazy loading, multi-serving image script. It’s written in JavaScript and doesn’t have any dependencies for third party libraries like jQuery.

The goal of bLazy is to help save bandwidth and server requests to your site to everything loads that much faster. (As an added bonus it saves data usage for mobile users as well.)

The loader has a sleek look and can work with almost any style of website design. The code is fairly easy to understand and install.

Here are a few reasons why you should try it:

  • bLazy is used on big sites with millions of monthly visitors so it has been tested plenty.
  • bLazy is written in pure JavaScript and doesn’t depend on third-party libraries such as jQuery.
  • bLazy can lazy load all types of images, including background images.
  • bLazy can lazy load images depending on screen size (multi-serve images).
  • bLazy can serve retina images on retina devices.
  • bLazy is lightweight, less than 1.2KB and less than 1.05KB (if you don’t need IE7- support).
  • bLazy is AMD, CommonJS and Browser global compatible.

This tool works on all modern browsers and is a great way to better serve images to your users.


ScrollAppear: Makes Content Appear on Scroll

ScrollAppear is a powerful and agile tool that makes content appear on scroll (or on other event triggers). It is a jQuery-based plugin.

ScrollAppear expands basic scroll function in a variety of ways to include the following:

  • History of what has been shown as result of the plugin
  • Ability to revert to a part of or all of what has been shown
  • Ability to directly show elements without the user having to trigger a monitored event
  • Ability to prevent mass scroll/appear of content by setting a timeout between events (in a similar fashion to hoverIntent)
  • Set a pixel offset for your trigger element
  • Set the number of event triggers to be performed before the event is unbound

This plugin is JSLint and JSHint compliant and comes with extensive documentation for ease of use.

ScrollAppear also includes a quite extensive parameter list with AddClass, Callback, DelayEffect, EffectDuration, ElementEffect, ElementsToShow, NumberofSccrolls, GatherAfterTrigger, PixelOffset, Timeout, TriggerIntent and TriggerType.


NumberProgressBar: Animated Progress Bar

NumberProgressBar is a lovely animated progress bar with plenty of practical applications.

You can use it to note scale across a range of numbers, with a minimum and maximum, show percentages and show steps. It comes with plenty of options for you to determine such as color, animation styles, ranges and duration.

Installation is easy using Bower and then adding the CSS with your modifications.



Load images within the viewport only. Serves responsive images for 4 screen sizes.

  • Spotlight


Implements a preloading mechanism for loading large pieces of any kind of content.

  • Spotlight


Buttons with built-in loading indicators, bridging the gap between action and feedback.



Nice subtle bar that indicates that the current page is loading something.



Image lazy loading via HTML5 data-* attributes.

  • Spotlight


Nanoscopic progress bar. With trickle animations to convince users that something is happening.



iOS-style overlays/notifications for the web



Lazy Load with support for serving high resolution images.