CSS3 Loader Snippet Collection: (Part 1 – Spinners)

In this series of CSS3 Loader Snippet Collection I will provide you snippets of various css3 page loader or progress bars. Though maximum of them are not created by me. I have placed all the snippets in JsBin.com and have provided embedded version here in this post.

Spinner with shadow:

JS Bin

Spinner with blink:

JS Bin

Spinning balls:

JS Bin

Two way spinner:

JS Bin

Simple spinner:

JS Bin

Circle loader:

JS Bin

Spinning squares:

JS Bin

Colorful bubble spin:

JS Bin

Colorful two way spin:

JS Bin

In part 2 of this series I’ve provided few square loader by css 3.


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Majid Lotfi

    Thanks Paul, this is a good tutorial, can you please provide an example on how to use it waiting for data from server side ?
    Thanks.