15 Cool Loading Progress Indicator Scripts

Showing a loading indicator on startup is a common pattern in native applications that is becoming more common on the web. If you need to load a lot of resources when your web application is first loaded, you should give the user a clear indication that this is occurring.

ProgressJs

ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for any object on the page. You can design your own template for progress bars or simply customize them.

progressjs-1

Pace

Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

pace-2

Circular progress button

A tutorial on how to implement the circular progress button concept by Colin Garven.

circular-progress-bar-button-3

Ladda

A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.

button-progress-bar-4

Loading…

This was mostly meant as a joke and an opportunity to learn about animated SVG. Feel free to use the source code as an example or in any project of your own.

loading-5

SVG Loading Images

Animated SVG for use as loading animations.

svg-loading-images-6

NProgress

Slim progress bars for Ajax’y applications. Inspired by Google, YouTube, and Medium.

nprogress-7

Such Spinners, Much Loading

spinner-9

Border loading indicators

border-loading-indicator-8

CSS Loading animation

css-loading-animation-10

Simple Progressbar

simple-progress-bar-11

Skillset using HTML5 progress bars with CSS3 animations

html5-progress-element-12

SVG Reading Progress Indicator

svg-progress-13

Glitchy Loading Indicator

glitchy-14

Battlefield 3 Loading Indicator

battlefield3-15


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked