<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/1.2.5/spinkit.min.css">
<script src="spinkit-loader.min.js"></script>
</head>
<body>
<ng-loader></ng-loader>
</body>
JS
var myApp = angular.module('myApp', ['spinkitLoader']);
You can specify which one of tobiasahlin's SpinKit indicators you want to display.
<ng-loader settings="{spinkit: 'sk-chasing-dots'}"></ng-loader>
It's possible to modify the loading indicator's color by passing a class in your settings.
HTML
<style>
.violet {
background-color: violet !important
}
</style>
<ng-loader settings="{spinkit: 'sk-wave', class:'violet'}"></ng-loader>
If you want to change the color of sk-circle, sk-fading-circle, sk-folding-cube, your css has to be as follows
HTML
<style>
.pink {
background-color: pink !important;
}
.pink::before {
background-color: purple !important;
}
.red::before {
background-color: red !important;
}
.green::before {
background-color: green !important;
}
</style>
<ng-loader settings="{spinkit: 'sk-circle', class:'red'}"></ng-loader>
<ng-loader settings="{spinkit: 'sk-fading-circle', class:'green'}"></ng-loader>
<ng-loader settings="{spinkit: 'sk-folding-cube', class:'pink'}"></ng-loader>
You can also specify the class for the loading indicator container. This is usefull if you want to add an overlay or modify the indicator's position.
HTML
<ng-loader settings="{spinkit: 'sk-wave', class:'violet', containerClass: 'customContainer'}"></ng-loader>