A loader is aimed to wrap the loading of content in a standard way. It shows a loading state at first and then either the what has been loaded (or the results) or a "no records".
You can customize what comes in the center with ng-transclude.
<div cam-widget-loader></div>
<div cam-widget-loader loading-state="LOADING"></div>
<div cam-widget-loader text-loading="Custom loading text" loading-state="LOADING"></div>
<div cam-widget-loader loading-state="LOADED"> <div class="panel panel-default"> <div class="panel-heading"> This has been loaded </div> <div class="panel-body"> <p>Bacon ipsum dolor amet shank sirloin meatball, salami jerky short loin corned beef andouille strip steak cow ham kevin pastrami.</p> </div> </div><!-- /.panel --> </div>
Bacon ipsum dolor amet shank sirloin meatball, salami jerky short loin corned beef andouille strip steak cow ham kevin pastrami.
<div cam-widget-loader loading-state="EMPTY"> <div class="expected-hidden"> Should not be visible. </div> </div>
<div cam-widget-loader loading-state="EMPTY" text-empty="Custom 'empty' text"> <div class="expected-hidden"> Should not be visible. </div> </div>
<div class="row"> <div class="btn-group col-xs-4"> <button class="btn btn-default reload" ng-click="reload()" ng-enabled="ctrlState !== 'LOADING'"> Load </button> <button class="btn btn-default reload-empty" ng-click="reload(true)" ng-enabled="ctrlState !== 'LOADING'"> Load empty </button> <button class="btn btn-danger fail-load" ng-click="fail()" ng-disabled="['LOADED', 'EMPTY', 'ERROR'].indexOf(ctrlState) !== -1"> Fail! <span class="glyphicon glyphicon-fire"></span> </button> </div> <div class="col-xs-8"> Current state: <code class="state-display">{{ ctrlState }}</code> </div> </div><!-- /.row --> <hr /> <div cam-widget-loader loading-state="{{ ctrlState }}" text-error="Custom error text"> <div class="panel panel-default"> <div class="panel-heading"> This has been loaded </div> <div class="panel-body"> <p>testInteractiveController has <code>ctrlVar1</code> with <code>{{ ctrlVar1 }}</code>.</p> </div> </div><!-- /.panel --> </div>
{{ ctrlState }}
testInteractiveController has ctrlVar1
with {{ ctrlVar1 }}
.