9 CSS Only Loaders | CSS Script

Author: abhigyank
Views Total: 10,276 views
Official Page: Go to website
Last Update: February 4, 2017
License: MIT


9 CSS Only Loaders


A lightweight collection of 9+ loaders, loading indicators/spinners, preloaders styled and animated with pure CSS/CSS3.

How to use it:

Load a theme CSS of your choice in the head section of the webpage.

  • loader-1.css: Spinning
  • loader-2.css: SHM rotating
  • loader-3.css: Horizontal circles as bars
  • loader-4.css: Loading fade animation.
  • loader-5.css: Bars rotating in shm
  • loader-6.css: Animated dots
  • loader-7.css: Sliding lines
  • loader-8.css: Googel Now MDL loading
  • loader-9.css: Uses Image
<link rel="stylesheet" href="css/loader-1.css">
<link rel="stylesheet" href="css/loader-2.css">
<link rel="stylesheet" href="css/loader-3.css">
<link rel="stylesheet" href="css/loader-4.css">
<link rel="stylesheet" href="css/loader-5.css">
<link rel="stylesheet" href="css/loader-6.css">
<link rel="stylesheet" href="css/loader-7.css">
<link rel="stylesheet" href="css/loader-8.css">
<link rel="stylesheet" href="css/loader-9.css">

Create a DIV container for the loader.

<div id="loader"></div>

See also  Create Plain Calendar Icons Using CSS - cal.css

Leave a Reply

Your email address will not be published. Required fields are marked *