Skip to content

Commit 651edeb

Browse files
update loading
1 parent 07f2d2a commit 651edeb

File tree

11 files changed

+593
-4
lines changed

11 files changed

+593
-4
lines changed

hackfoldr/www/css/angular-busy.css

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
.cg-busy{
2+
position:absolute;
3+
top:0px;
4+
left:0px;
5+
right:0px;
6+
bottom:0px;
7+
z-index:1001;
8+
}
9+
10+
.cg-busy-animation.ng-hide-add,
11+
.cg-busy-animation.ng-hide-remove {
12+
-webkit-transition:all .3s ease;
13+
-moz-transition:all .3s ease;
14+
-o-transition:all .3s ease;
15+
transition:all .3s ease;
16+
display:block !important;
17+
}
18+
.cg-busy-animation.ng-hide-remove {
19+
opacity:0;
20+
-webkit-transform:translate(0px,-40px);
21+
-moz-transform:translate(0px,-40px);
22+
-ms-transform:translate(0px,-40px);
23+
-o-transform:translate(0px,-40px);
24+
transform:translate(0px,-40px);
25+
}
26+
.cg-busy-animation.ng-hide-remove.ng-hide-remove-active {
27+
opacity:1;
28+
-webkit-transform:translate(0px,0px);
29+
-moz-transform:translate(0px,0px);
30+
-ms-transform:translate(0px,0px);
31+
-o-transform:translate(0px,0px);
32+
transform:translate(0px,0px);
33+
}
34+
.cg-busy-animation.ng-hide-add {
35+
opacity:1;
36+
-webkit-transform:translate(0px,0px);
37+
-moz-transform:translate(0px,0px);
38+
-ms-transform:translate(0px,0px);
39+
-o-transform:translate(0px,0px);
40+
transform:translate(0px,0px);
41+
}
42+
.cg-busy-animation.ng-hide-add.ng-hide-add-active {
43+
opacity:0;
44+
-webkit-transform:translate(0px,-40px);
45+
-moz-transform:translate(0px,-40px);
46+
-ms-transform:translate(0px,-40px);
47+
-o-transform:translate(0px,-40px);
48+
transform:translate(0px,-40px);
49+
}
50+
51+
.cg-busy-backdrop {
52+
background-color:white;
53+
opacity:.7;
54+
}
55+
56+
.cg-busy-backdrop-animation.ng-hide-add,
57+
.cg-busy-backdrop-animation.ng-hide-remove {
58+
-webkit-transition:opacity .3s ease;
59+
-moz-transition:opacity .3s ease;
60+
-o-transition:opacity .3s ease;
61+
transition:opacity .3s ease;
62+
display:block !important;
63+
}
64+
65+
.cg-busy-backdrop-animation.ng-hide {
66+
opacity:0;
67+
}
68+
69+
/* All styles below are for the default template. */
70+
71+
.cg-busy-default-wrapper {
72+
text-align:center;
73+
}
74+
75+
.cg-busy-default-sign{
76+
display: inline-block;
77+
position:relative;
78+
z-index:1002;
79+
padding-bottom: 6px;
80+
color:#333333;
81+
text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);
82+
background-color:#e9eeee;
83+
border:1px solid #dddddd;
84+
border-top-width:0;
85+
-webkit-border-radius:7px;
86+
-moz-border-radius:7px;
87+
border-radius:7px;
88+
border-top-left-radius:0;
89+
border-top-right-radius:0;
90+
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
91+
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
92+
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
93+
}
94+
.cg-busy-default-text{
95+
margin:13px 12px 6px 49px;
96+
font-size:16px;
97+
color:#555;
98+
text-align: left;
99+
max-width: 400px;
100+
}
101+
.cg-busy-default-spinner{
102+
position:absolute;
103+
width:25px;
104+
height:25px;
105+
display:inline-block;
106+
top:12px;
107+
left:14px;
108+
}
109+
.cg-busy-default-spinner div{
110+
width:12%;
111+
height:26%;
112+
background:#000;
113+
position:absolute;
114+
left:44.5%;
115+
top:37%;
116+
opacity:0;
117+
-webkit-animation:cg-busy-spinner-anim 1s linear infinite;
118+
-moz-animation:cg-busy-spinner-anim 1s linear infinite;
119+
-ms-animation:cg-busy-spinner-anim 1s linear infinite;
120+
-o-animation:cg-busy-spinner-anim 1s linear infinite;
121+
animation:cg-busy-spinner-anim 1s linear infinite;
122+
-webkit-border-radius:50px;
123+
-moz-border-radius:50px;
124+
border-radius:50px;
125+
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);
126+
-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);
127+
box-shadow:0 0 3px rgba(0,0,0,0.2);
128+
}
129+
.cg-busy-default-spinner div.bar1{
130+
-webkit-transform:rotate(0deg) translate(0, -142%);
131+
-moz-transform:rotate(0deg) translate(0, -142%);
132+
-ms-transform:rotate(0deg) translate(0, -142%);
133+
-o-transform:rotate(0deg) translate(0, -142%);
134+
transform:rotate(0deg) translate(0, -142%);
135+
-webkit-animation-delay:0s;
136+
-moz-animation-delay:0s;
137+
-ms-animation-delay:0s;
138+
-o-animation-delay:0s;
139+
animation-delay:0s;
140+
}
141+
.cg-busy-default-spinner div.bar2{
142+
-webkit-transform:rotate(30deg) translate(0, -142%);
143+
-moz-transform:rotate(30deg) translate(0, -142%);
144+
-ms-transform:rotate(30deg) translate(0, -142%);
145+
-o-transform:rotate(30deg) translate(0, -142%);
146+
transform:rotate(30deg) translate(0, -142%);
147+
-webkit-animation-delay:-0.9167s;
148+
-moz-animation-delay:-0.9167s;
149+
-ms-animation-delay:-0.9167s;
150+
-o-animation-delay:-0.9167s;
151+
animation-delay:-0.9167s;
152+
}
153+
.cg-busy-default-spinner div.bar3{
154+
-webkit-transform:rotate(60deg) translate(0, -142%);
155+
-moz-transform:rotate(60deg) translate(0, -142%);
156+
-ms-transform:rotate(60deg) translate(0, -142%);
157+
-o-transform:rotate(60deg) translate(0, -142%);
158+
transform:rotate(60deg) translate(0, -142%);
159+
-webkit-animation-delay:-0.833s;
160+
-moz-animation-delay:-0.833s;
161+
-ms-animation-delay:-0.833s;
162+
-o-animation-delay:-0.833s;
163+
animation-delay:-0.833s;
164+
}
165+
.cg-busy-default-spinner div.bar4{
166+
-webkit-transform:rotate(90deg) translate(0, -142%);
167+
-moz-transform:rotate(90deg) translate(0, -142%);
168+
-ms-transform:rotate(90deg) translate(0, -142%);
169+
-o-transform:rotate(90deg) translate(0, -142%);
170+
transform:rotate(90deg) translate(0, -142%);
171+
-webkit-animation-delay:-0.75s;
172+
-moz-animation-delay:-0.75s;
173+
-ms-animation-delay:-0.75s;
174+
-o-animation-delay:-0.75s;
175+
animation-delay:-0.75s;
176+
}
177+
.cg-busy-default-spinner div.bar5{
178+
-webkit-transform:rotate(120deg) translate(0, -142%);
179+
-moz-transform:rotate(120deg) translate(0, -142%);
180+
-ms-transform:rotate(120deg) translate(0, -142%);
181+
-o-transform:rotate(120deg) translate(0, -142%);
182+
transform:rotate(120deg) translate(0, -142%);
183+
-webkit-animation-delay:-0.667s;
184+
-moz-animation-delay:-0.667s;
185+
-ms-animation-delay:-0.667s;
186+
-o-animation-delay:-0.667s;
187+
animation-delay:-0.667s;
188+
}
189+
.cg-busy-default-spinner div.bar6{
190+
-webkit-transform:rotate(150deg) translate(0, -142%);
191+
-moz-transform:rotate(150deg) translate(0, -142%);
192+
-ms-transform:rotate(150deg) translate(0, -142%);
193+
-o-transform:rotate(150deg) translate(0, -142%);
194+
transform:rotate(150deg) translate(0, -142%);
195+
-webkit-animation-delay:-0.5833s;
196+
-moz-animation-delay:-0.5833s;
197+
-ms-animation-delay:-0.5833s;
198+
-o-animation-delay:-0.5833s;
199+
animation-delay:-0.5833s;
200+
}
201+
.cg-busy-default-spinner div.bar7{
202+
-webkit-transform:rotate(180deg) translate(0, -142%);
203+
-moz-transform:rotate(180deg) translate(0, -142%);
204+
-ms-transform:rotate(180deg) translate(0, -142%);
205+
-o-transform:rotate(180deg) translate(0, -142%);
206+
transform:rotate(180deg) translate(0, -142%);
207+
-webkit-animation-delay:-0.5s;
208+
-moz-animation-delay:-0.5s;
209+
-ms-animation-delay:-0.5s;
210+
-o-animation-delay:-0.5s;
211+
animation-delay:-0.5s;
212+
}
213+
.cg-busy-default-spinner div.bar8{
214+
-webkit-transform:rotate(210deg) translate(0, -142%);
215+
-moz-transform:rotate(210deg) translate(0, -142%);
216+
-ms-transform:rotate(210deg) translate(0, -142%);
217+
-o-transform:rotate(210deg) translate(0, -142%);
218+
transform:rotate(210deg) translate(0, -142%);
219+
-webkit-animation-delay:-0.41667s;
220+
-moz-animation-delay:-0.41667s;
221+
-ms-animation-delay:-0.41667s;
222+
-o-animation-delay:-0.41667s;
223+
animation-delay:-0.41667s;
224+
}
225+
.cg-busy-default-spinner div.bar9{
226+
-webkit-transform:rotate(240deg) translate(0, -142%);
227+
-moz-transform:rotate(240deg) translate(0, -142%);
228+
-ms-transform:rotate(240deg) translate(0, -142%);
229+
-o-transform:rotate(240deg) translate(0, -142%);
230+
transform:rotate(240deg) translate(0, -142%);
231+
-webkit-animation-delay:-0.333s;
232+
-moz-animation-delay:-0.333s;
233+
-ms-animation-delay:-0.333s;
234+
-o-animation-delay:-0.333s;
235+
animation-delay:-0.333s;
236+
}
237+
.cg-busy-default-spinner div.bar10{
238+
-webkit-transform:rotate(270deg) translate(0, -142%);
239+
-moz-transform:rotate(270deg) translate(0, -142%);
240+
-ms-transform:rotate(270deg) translate(0, -142%);
241+
-o-transform:rotate(270deg) translate(0, -142%);
242+
transform:rotate(270deg) translate(0, -142%);
243+
-webkit-animation-delay:-0.25s;
244+
-moz-animation-delay:-0.25s;
245+
-ms-animation-delay:-0.25s;
246+
-o-animation-delay:-0.25s;
247+
animation-delay:-0.25s;
248+
}
249+
.cg-busy-default-spinner div.bar11{
250+
-webkit-transform:rotate(300deg) translate(0, -142%);
251+
-moz-transform:rotate(300deg) translate(0, -142%);
252+
-ms-transform:rotate(300deg) translate(0, -142%);
253+
-o-transform:rotate(300deg) translate(0, -142%);
254+
transform:rotate(300deg) translate(0, -142%);
255+
-webkit-animation-delay:-0.1667s;
256+
-moz-animation-delay:-0.1667s;
257+
-ms-animation-delay:-0.1667s;
258+
-o-animation-delay:-0.1667s;
259+
animation-delay:-0.1667s;
260+
}
261+
.cg-busy-default-spinner div.bar12{
262+
-webkit-transform:rotate(330deg) translate(0, -142%);
263+
-moz-transform:rotate(330deg) translate(0, -142%);
264+
-ms-transform:rotate(330deg) translate(0, -142%);
265+
-o-transform:rotate(330deg) translate(0, -142%);
266+
transform:rotate(330deg) translate(0, -142%);
267+
-webkit-animation-delay:-0.0833s;
268+
-moz-animation-delay:-0.0833s;
269+
-ms-animation-delay:-0.0833s;
270+
-o-animation-delay:-0.0833s;
271+
animation-delay:-0.0833s;
272+
}
273+
274+
@-webkit-keyframes cg-busy-spinner-anim{
275+
from {opacity: 1;}
276+
to {opacity: 0.25;}
277+
}
278+
@-moz-keyframes cg-busy-spinner-anim{
279+
from {opacity: 1;}
280+
to {opacity: 0.25;}
281+
}
282+
@keyframes cg-busy-spinner-anim{
283+
from {opacity: 1;}
284+
to {opacity: 0.25;}
285+
}

hackfoldr/www/css/pace.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.pace {
2+
-webkit-pointer-events: none;
3+
pointer-events: none;
4+
-webkit-user-select: none;
5+
-moz-user-select: none;
6+
user-select: none;
7+
}
8+
9+
.pace .pace-progress {
10+
display: block;
11+
position: fixed;
12+
z-index: 2000;
13+
top: 0;
14+
left: 0;
15+
height: 12px;
16+
background: #222222;
17+
18+
-webkit-transition: -webkit-transform .3s, width 1s;
19+
-moz-transition: width 1s;
20+
-o-transform: width 1s;
21+
transition: transform .3s, width 1s;
22+
23+
-webkit-transform: translateY(-50px);
24+
transform: translateY(-50px);
25+
26+
pointer-events: none;
27+
}
28+
29+
.pace.pace-active .pace-progress {
30+
-webkit-transform: translateY(0);
31+
transform: translateY(0);
32+
}

hackfoldr/www/css/style.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@
1212
/*background:black;*/
1313
border-left: 0.4rem solid ;
1414
}
15+
16+

hackfoldr/www/img/ajax-loader.gif

1.88 KB
Loading

hackfoldr/www/img/icon-60.png

2.87 KB
Loading

hackfoldr/www/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
99
<link href="css/style.css" rel="stylesheet">
10+
<link href="css/angular-busy.css" rel="stylesheet">
1011

1112
<link href="css/pace.css" rel="stylesheet">
1213

hackfoldr/www/js/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
// console.error(response.error);
1515
// });
1616

17-
angular.module('starter', ['ionic', 'starter.controllers'])
17+
angular.module('starter', ['ionic', 'starter.controllers','cgBusy'])
1818
.factory('q', function() {
1919
return Q;
2020
})

0 commit comments

Comments
 (0)