A declarative, powerful drop-in addition to UI Router, enabling spinners to be shown when executing resolves
before
the route change is complete.
Motivation: Global spinners suck, UX and humans desire to know what part of the screen is loading. UI Router gives us the hooks we need and this directive is the easiest drop-in replacement to complicated per-view or global loading indicators.
Most importantly, this works as you nest multiple <ui-view>
elements, and comes with a good set of defaults to
not show if the data is loaded within a certain amount of time (avoids the spinner being flashed on /off).
Install the plugin into your Angular.js project, manually or via:
bower install angular-ui-view-spinner --save
Include angular-ui-view-spinner.css
in your app:
<link rel="stylesheet" href="https://github.com/rpocklin/angular-ui-view-spinner/blob/master/bower_components/angular-ui-view-spinner/src/angular-ui-view-spinner.css" />
Include angular-ui-view-spinner.js
in your app:
<script src="https://github.com/rpocklin/angular-ui-view-spinner/raw/master/bower_components/angular-ui-view-spinner/src/angular-ui-view-spinner.js"></script>
Add angular-ui-view-spinner
as a new module dependency in your angular app.
var myapp = angular.module('myapp', ['angular-ui-view-spinner']);
Ensure that the other Angular.js module dependencies are included:
var myapp = angular.module('myapp', ['angularSpinner', 'ui.router' .. ]);
<ui-view ...>
or <div ui-view ...>
with <ui-loading-view ...>
or <div ui-loading-view ...>
.<ui-loading-view>
based on the parents route.size="small | medium | large"
.angularSpinner
spinner dimensions directly: spinner-size="{ radius: 50, width: 10, length: 60 }"
.NOTE: The spinner will appear on any view where you have resolve:
defined with an async loader, whether it's one async request or many.
Complete (minimal) example:
<div>
<a ui-sref="example.one">Route 1</a>
<a ui-sref="example.two">Route 2</a>
</div>
<ui-loading-view root-state="example"></ui-loading-view>
/src
or the compiled CSS files, up to you.margin-top
of the spinner to the <ui-view>
containers,
or use flex-box or another method to vertically center the spinner but it depends which browsers / versions you are
targeting - the default is margin-top: 50px
.git clone git@github.com:rpocklin/angular-ui-view-spinner.git
npm install
bower install
grunt serve
http://localhost:9000/example/
in your browser to see the example.git checkout -b my-new-feature
)grunt
to ensure all tests pass. (Ideally add more tests!)git commit -am 'Added some feature'
)git push origin my-new-feature
)angularSpinner
(via transclude).Released under the MIT License. See the LICENSE file for further details.