Skip to content

Instantly share code, notes, and snippets.

@sunnycyk sunnycyk/Sample App
Last active Dec 27, 2015

Embed
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

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.