Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-10 15:15:34 +00:00
Code Issues Projects Releases Wiki Activity

Adding loader for later use

Browse Source
This commit is contained in:
Colin McLeod
2015-08-10 10:50:05 -07:00
parent be5a069b23
commit b533191bc9
3 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/js/directives/directive-loader.js Normal file
View File

@@ -0,0 +1,9 @@
angular.module('app').directive('loader', ['$rootScope', function($r) {
return {
restrict: 'A',
link: function(scope, element) {
element.addClass('loader');
element.html('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 40 40" width="100%" height="100%"><!-- Outer Ring --><path d="m5,8l5,8l5,-8z" class="l1 d1" /><path d="m5,8l5,-8l5,8z" class="l1 d2" /><path d="m10,0l5,8l5,-8z" class="l1 d3" /><path d="m15,8l5,-8l5,8z" class="l1 d4" /><path d="m20,0l5,8l5,-8z" class="l1 d5" /><path d="m25,8l5,-8l5,8z" class="l1 d6" /><path d="m25,8l5,8l5,-8z" class="l1 d7" /><path d="m30,16l5,-8l5,8z" class="l1 d8" /><path d="m30,16l5,8l5,-8z" class="l1 d9" /><path d="m25,24l5,-8l5,8z" class="l1 d10" /><path d="m25,24l5,8l5,-8z" class="l1 d11" /><path d="m20,32l5,-8l5,8z" class="l1 d13" /><path d="m15,24l5,8l5,-8z" class="l1 d14" /><path d="m10,32l5,-8l5,8z" class="l1 d15" /><path d="m5,24l5,8l5,-8z" class="l1 d16" /><path d="m5,24l5,-8l5,8z" class="l1 d17" /><path d="m0,16l5,8l5,-8z" class="l1 d18" /><path d="m0,16l5,-8l5,8z" class="l1 d20" /><!-- Inner Ring --><path d="m10,16l5,-8l5,8z" class="l2 d0" /><path d="m15,8l5,8l5,-8z" class="l2 d3" /><path d="m20,16l5,-8l5,8z" class="l2 d6" /><path d="m20,16l5,8l5,-8z" class="l2 d9" /><path d="m15,24l5,-8l5,8z" class="l2 d12" /><path d="m10,16l5,8l5,-8z" class="l2 d15" /></svg>');
}
};
}]);

1
app/less/app.less
View File

@@ -19,6 +19,7 @@
@import 'buttons'; @import 'buttons';
@import 'error'; @import 'error';
@import 'sortable'; @import 'sortable';
@import 'loader';
html, body { html, body {
height: 100%; height: 100%;

37
app/less/loader.less Normal file
View File

@@ -0,0 +1,37 @@
@keyframes hideshow {
0% { opacity: 0; }
10% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes inner {
0% { opacity: 0; }
10% { opacity: 1; }
100% { opacity: 0; }
}
@animationTime: 750ms;
@outerTriangles: 19;
@animationDelay: @animationTime / @outerTriangles;
.loader {
path {
stroke: #000;
stroke-width: 0;
opacity: 0;
}
}
.l1 { animation: hideshow @animationTime linear infinite; }
.l2 { animation: inner @animationTime linear infinite; }
.mixin-loop (@i) when (@i > 0) {
.d@{i} {
animation-delay: @i * @animationDelay;
}
.mixin-loop(@i - 1);
}
.mixin-loop(@outerTriangles);