June 10, 2014 11:59 am

How to Create loading spinners animated with CSS

Today I am going to give you a tutorial on how you can create CSS loading spinner animation.  As you know we can create animation in CSS using keyframes so this tutorial is completely based on CSS keyframes to create loading spinners, these loading animation are very light weight and easy to use. Every one use Images for loading effect but after reading this tutorial you love to make your loading animation in CSS because of its simplicity and way of implementation.

How to Create loading spinners animated with CSS

Read Also: How to create fade-in fade-out effect on text using CSS 3 Animation

I am giving you 4 different loading animation of CSS.

1. CSS loading animation looks like Facebook loading image.

Above CSS is used to create a loading animation like fcaebook loading image.

Assign class loading to any empty div as below:

It will show loading animation on that div place.

2. Loading spinner CSS

Assign class loader2 to any div and show that loading like below:

3. Loading spinner looks like YouTube video loading spinner in CSS

Use this animation class loader3 to put this animation.

4. An other loading effect using CSS

Use this animation class loader4 to put this animation.

A live demo and code to download available for free.

That’s all for today’s tutorial I hope it helps you in your web projects.

Please feel free to send us your comments below.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • it’s so good

  • sanjay

    nice..

  • neeraj

    Not working in IE8

  • very nice.

    Thank you so much

  • shamjith

    Nice one, thank you

  • shamjith

    Nice one, thank you

  • shamjith

    Nice one, thank you

  • shamjith

    Nice one, thank you

  • mick

    Huzoor. Thanks for the beautifull CSS!! Exactly on the moment I received the tutorial, I needed it in my software 😀