A collection of loaders animated with css
- Loader 2:
bower install css-loaders
In your main less file, include the loader you want. E.g.
@import "../bower_components/css-loaders/source/loader1.less";And check the demo file for the required markup. In this case:
../bower_components/css-loaders/source/loader1-demo.html
Which contains:
...
<body> <!-- the body tag is the parent in this demo. Position should be set to "relative". -->
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
...Usually, the parent element of the .loader div should have position: relative; set since the loaders are set to position: absolute; , so that they'll show up in the right position on the page.
To change the color of the loader, override the less color variable before the import:
@css-loader-color: rgba(255,0,0,0.5);
@import "../bower_components/css-loaders/source/loader1.less";