Create a gist now

Instantly share code, notes, and snippets.

@sunnycyk /Sample App
Last active Dec 27, 2015

What would you like to do?
<div id="circularG">
<div id="circularG_1" class="circularG">
</div>
<div id="circularG_2" class="circularG">
</div>
<div id="circularG_3" class="circularG">
</div>
<div id="circularG_4" class="circularG">
</div>
<div id="circularG_5" class="circularG">
</div>
<div id="circularG_6" class="circularG">
</div>
<div id="circularG_7" class="circularG">
</div>
<div id="circularG_8" class="circularG">
</div>
</div>
<!--
Template: directive/spinLoading/spinLoading.html
-->
<div>
<div id="loader" ng-hide="loaded">
<div id="circularG">
<div id="circularG_1" class="circularG">
</div>
<div id="circularG_2" class="circularG">
</div>
<div id="circularG_3" class="circularG">
</div>
<div id="circularG_4" class="circularG">
</div>
<div id="circularG_5" class="circularG">
</div>
<div id="circularG_6" class="circularG">
</div>
<div id="circularG_7" class="circularG">
</div>
<div id="circularG_8" class="circularG">
</div>
</div>
</div>
<div ng-show="loaded" ng-transclude></div>
</div>
angular.module('myApp')
.controller('SampleCtrl', ['$scope', 'sampleService', function($scope, sampleService) {
$scope.loaded = true;
$scope.loadedContent = null;
$scope.sampleAction = function() { // Sample Action that will call the API server
$scope.loaded = false;
$scope.loadedContent = sampleService.get({}, function(data) {
$scope.loaded = true;
}, function(err) {
$scope.loaded = true; // receive error, but also need to stop the spinner
});
};
}]);
angular.module('myApp').
directive('spinLoading', [function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
loaded: '=loaded'
},
templateUrl: 'directives/spinLoading/spinLoading.html'
};
}]);
<div ng-controller="SampleCtrl">
<button ng-click="sampleAction();">Click to Load</button>
<spin-loading loaded="loaded">
<div>{{ loadedContent }}</div>
</spin-loading>
</div>
#loader {
position: relative;
width: 100%;
height:100%;
}
#circularG{
position:fixed;
width:50px;
height:50px;
left: 50%;
top: 50%;
}
.circularG{
position:absolute;
background-color:#5C8AE6;
width:11px;
height:11px;
-moz-border-radius:8px;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:0.96s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:8px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:0.96s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:8px;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:0.96s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:8px;
-o-animation-name:bounce_circularG;
-o-animation-duration:0.96s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:8px;
animation-name:bounce_circularG;
animation-duration:0.96s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#circularG_1{
left:0;
top:20px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#circularG_2{
left:5px;
top:5px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#circularG_3{
top:0;
left:20px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#circularG_4{
right:5px;
top:5px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}
#circularG_5{
right:0;
top:20px;
-moz-animation-delay:0.84s;
-webkit-animation-delay:0.84s;
-ms-animation-delay:0.84s;
-o-animation-delay:0.84s;
animation-delay:0.84s;
}
#circularG_6{
right:5px;
bottom:5px;
-moz-animation-delay:0.96s;
-webkit-animation-delay:0.96s;
-ms-animation-delay:0.96s;
-o-animation-delay:0.96s;
animation-delay:0.96s;
}
#circularG_7{
left:20px;
bottom:0;
-moz-animation-delay:1.08s;
-webkit-animation-delay:1.08s;
-ms-animation-delay:1.08s;
-o-animation-delay:1.08s;
animation-delay:1.08s;
}
#circularG_8{
left:5px;
bottom:5px;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-o-animation-delay:1.2s;
animation-delay:1.2s;
}
@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@keyframes bounce_circularG{
0%{
transform:scale(1)}
100%{
transform:scale(.3)}
}

absyah commented Jan 28, 2015

This is what i'm looking for.
Thanks! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment