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

0 Comments

  1. Fancy Textsays:

    Awesome,
    We were searching for the cool progress bar for our website. our search ends here.
    This is the most coolest collection of the loading progress indicators.
    Thanks for sharing this awesome collection.

  2. looking for some progress bar nice post
    thanks for sharing

  3. Best post man!
    my research about best progress indicator script end here..

  4. All this landing pages are amazing

  5. fancy textsays:

    cool fancy text generator

  6. Use this fancy letter generator tool to generate unique letters to write names, titles, and sentences. Our Font generator tool offers you the best user experience and lets you generate unique text font styles. An easy copy-paste option is available.

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.