Default config
Use the loading-dots attribute on a spantag:
<p>Loading<span loading-dots is-loading="true"></span></p>Loading
By default, it will display loading dots starting from 0 to 5 dots, incrementing every 300 milliseconds
Using it with AngularJS
loading-dots listens to changes to the is-loading attribute, so by setting it to a scope variable you can control when it starts and when it stops from your controller
<p>Loading<span loading-dots is-loading="isLoading"></span></p>
<button ng-click="startLoading()" ng-disabled="isLoading" >Start</button>
<button ng-click="stopLoading()" ng-disabled="!isLoading" >Stop</button>
<p><strong>Simulate async call</strong></p>
<label for="load-time">Load time: </label>
<input type="number" ng-model="loadTime" id="load-time">
<button ng-click="simulateAsync()">Simulate</button>The controller's JS
module.controller('AppCtrl', function($scope, $timeout) {
$scope.isLoading = false;
$scope.loadTime = 3500;
$scope.startLoading = function() {
$scope.isLoading = true;
};
$scope.stopLoading = function() {
$scope.isLoading = false;
};
$scope.simulateAsync = function() {
$scope.isLoading = true;
$timeout(function() {
$scope.isLoading = false;
}, $scope.loadTime);
};
});Loading
Simulate async call
Configuring min-dots and max-dots
You can configure the minimum amount of dots and the maximum amount of dots to display.
<p>Loading<span loading-dots is-loading="true" min-dots="3" max-dots="6"></span></p>Loading
If not set, min defaults to 0 and max defaults to 5
Configuring starting point
You can also configure the starting number of dots to display.
<p>Loading<span loading-dots is-loading="true" min-dots="3" max-dots="20" starting="10"></span></p>Loading
If not set, starting defaults to min-dots (0 if min-dots is not configured)
Note that after the dots reach max-dots, it will start over from min-dots, not starting
Configuring increments
Increase the number of dots added each interval
<p>Loading<span loading-dots is-loading="true" min-dots="3" max-dots="15" increment="3"></span></p>Loading
If not set, increment defaults to 1 dot per interval
Configuring interval
The interval is configurable too
<p>Loading<span loading-dots is-loading="true" min-dots="3" max-dots="20" starting="10" interval="1000"></span></p>Loading
The interval is in milliseconds
If not set, interval defaults to 300 milliseconds
Configuring character
If you wish to use a different character other than the dot, you can.
<p>Loading<span loading-dots is-loading="true" character="~"></span></p>
<p>Loading<span loading-dots is-loading="true" character="!"></span></p>
<p>Loading<span loading-dots is-loading="true" character="+"></span></p>Loading
Loading
Loading
Defaults summary
| Attribute | Default |
|---|---|
| min-dots | 0 |
| max-dots | 5 |
| starting | min-dots |
| increment | 1 |
| interval | 300 |
| character | '.' |