CSS Loaders With Pure CSS

Advertisement

Simple loaders for your web applications using only one div and pure CSS. Usually it’s common to show a loader to the users when they must wait something in a web application (an ajax request or a form submit, etc). _Gif_image loaders was great but using CSS we can avoid the image request, also it’s easier for customise and maintain and it’s more cool.

Add the CSS file in your project and add the link to the file:

<link rel="stylesheet" href="path/to/css-loader.css">

Select the loader and add the HTML corresponding to it, To show the loader, you need to add the helper css class is-active. And to hide the loader, it’s just follow the inverse, removing the css helper from the loader. You can do it with JavaScript.

css-loader

Demo    Documentation