← Back to branch summary

~holger-seelig/cobweb.js/trunk

« back to all changes in this revision

Viewing changes to cobweb.js/spinner.css

  • Committer: Holger Seelig
  • Date: 2017-08-22 04:53:24 UTC
  • Revision ID: holger.seelig@yahoo.de-20170822045324-4of4xxgt79669gbt
Switched to npm.

Show diffs side-by-side

added added

removed removed

Lines of Context:
cobweb.js/spinner.css
1
 
 
2
 
X3DCanvas .cobweb-splash-screen {
3
 
        display: none;
4
 
        z-index: -100;
5
 
        position: absolute;
6
 
        top: 0;
7
 
        right: 0;
8
 
        bottom: 0;
9
 
        left: 0;
10
 
        background: rgb(65,65,65);
11
 
        background: -moz-radial-gradient(center, ellipse cover, rgb(130,130,130) 0%, rgb(65,65,65) 100%);
12
 
        background: -webkit-radial-gradient(center, ellipse cover, rgb(130,130,130) 0%,rgb(65,65,65) 100%);
13
 
        background: radial-gradient(ellipse at center, rgb(130,130,130) 0%,rgb(65,65,65) 100%);
14
 
}
15
 
 
16
 
X3DCanvas .cobweb-spinner {
17
 
        position: absolute;
18
 
        top: calc(50% - 70px);
19
 
        left: calc(50% - 64px);
20
 
        width: 128px;
21
 
        height: 128px;
22
 
        border-radius: 50%;
23
 
                -o-border-radius: 50%;
24
 
                -ms-border-radius: 50%;
25
 
                -webkit-border-radius: 50%;
26
 
                -moz-border-radius: 50%;
27
 
        perspective: 780px;
28
 
}
29
 
 
30
 
X3DCanvas .cobweb-spinner > * {
31
 
        position: absolute;
32
 
        width: 100%;
33
 
        height: 100%;
34
 
        box-sizing: border-box;
35
 
                -o-box-sizing: border-box;
36
 
                -ms-box-sizing: border-box;
37
 
                -webkit-box-sizing: border-box;
38
 
                -moz-box-sizing: border-box;
39
 
        border-radius: 50%;
40
 
                -o-border-radius: 50%;
41
 
                -ms-border-radius: 50%;
42
 
                -webkit-border-radius: 50%;
43
 
                -moz-border-radius: 50%;        
44
 
}
45
 
 
46
 
X3DCanvas .cobweb-spinner-one {
47
 
        left: 0%;
48
 
        top: 0%;
49
 
        animation: cobweb-spinner-rotate-one 1.15s linear infinite;
50
 
                -o-animation: cobweb-spinner-rotate-one 1.15s linear infinite;
51
 
                -ms-animation: cobweb-spinner-rotate-one 1.15s linear infinite;
52
 
                -webkit-animation: cobweb-spinner-rotate-one 1.15s linear infinite;
53
 
                -moz-animation: cobweb-spinner-rotate-one 1.15s linear infinite;
54
 
        border-bottom: 10px solid #ffe32d;
55
 
}
56
 
 
57
 
X3DCanvas .cobweb-spinner-two {
58
 
        right: 0%;
59
 
        top: 0%;
60
 
        animation: cobweb-spinner-rotate-two 1.15s linear infinite;
61
 
                -o-animation: cobweb-spinner-rotate-two 1.15s linear infinite;
62
 
                -ms-animation: cobweb-spinner-rotate-two 1.15s linear infinite;
63
 
                -webkit-animation: cobweb-spinner-rotate-two 1.15s linear infinite;
64
 
                -moz-animation: cobweb-spinner-rotate-two 1.15s linear infinite;
65
 
        border-right: 10px solid #ff9f2e;
66
 
}
67
 
 
68
 
X3DCanvas .cobweb-spinner-three {
69
 
        right: 0%;
70
 
        bottom: 0%;
71
 
        animation: cobweb-spinner-rotate-three 1.15s linear infinite;
72
 
                -o-animation: cobweb-spinner-rotate-three 1.15s linear infinite;
73
 
                -ms-animation: cobweb-spinner-rotate-three 1.15s linear infinite;
74
 
                -webkit-animation: cobweb-spinner-rotate-three 1.15s linear infinite;
75
 
                -moz-animation: cobweb-spinner-rotate-three 1.15s linear infinite;
76
 
        border-top: 10px solid #d71f1f;
77
 
}
78
 
 
79
 
X3DCanvas .cobweb-progress {
80
 
        position: absolute;
81
 
        top: calc(50% - 11pt);
82
 
        left: calc(50% - 100px);
83
 
        width: 200px;
84
 
}
85
 
 
86
 
X3DCanvas .cobweb-spinner-text {
87
 
        color: white;
88
 
        font-size: 11pt;
89
 
        text-align: center;
90
 
        text-shadow: 1px 1px 0px black;
91
 
        font-family: PT Sans, sans-serif;
92
 
}
93
 
 
94
 
X3DCanvas .cobweb-progressbar {
95
 
        margin: 8px;
96
 
        border-left:  2px solid rgba(255, 255, 255, 0.5);
97
 
        border-right: 2px solid rgba(255, 255, 255, 0.5);
98
 
        padding: 0 2px;
99
 
}
100
 
 
101
 
X3DCanvas .cobweb-progressbar div {
102
 
        width: 0%;
103
 
        height: 6px;
104
 
        background: rgba(255, 255, 255, 0.5);
105
 
}
106
 
 
107
 
@keyframes cobweb-spinner-rotate-one {
108
 
        0% {
109
 
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
110
 
        }
111
 
        100% {
112
 
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
113
 
        }
114
 
}
115
 
 
116
 
@-o-keyframes cobweb-spinner-rotate-one {
117
 
        0% {
118
 
                -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
119
 
        }
120
 
        100% {
121
 
                -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
122
 
        }
123
 
}
124
 
 
125
 
@-ms-keyframes cobweb-spinner-rotate-one {
126
 
        0% {
127
 
                -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
128
 
        }
129
 
        100% {
130
 
                -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
131
 
        }
132
 
}
133
 
 
134
 
@-webkit-keyframes cobweb-spinner-rotate-one {
135
 
        0% {
136
 
                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
137
 
        }
138
 
        100% {
139
 
                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
140
 
        }
141
 
}
142
 
 
143
 
@-moz-keyframes cobweb-spinner-rotate-one {
144
 
        0% {
145
 
                -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
146
 
        }
147
 
        100% {
148
 
                -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
149
 
        }
150
 
}
151
 
 
152
 
@keyframes cobweb-spinner-rotate-two {
153
 
        0% {
154
 
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
155
 
        }
156
 
        100% {
157
 
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
158
 
        }
159
 
}
160
 
 
161
 
@-o-keyframes cobweb-spinner-rotate-two {
162
 
        0% {
163
 
                -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
164
 
        }
165
 
        100% {
166
 
                -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
167
 
        }
168
 
}
169
 
 
170
 
@-ms-keyframes cobweb-spinner-rotate-two {
171
 
        0% {
172
 
                -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
173
 
        }
174
 
        100% {
175
 
                -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
176
 
        }
177
 
}
178
 
 
179
 
@-webkit-keyframes cobweb-spinner-rotate-two {
180
 
        0% {
181
 
                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
182
 
        }
183
 
        100% {
184
 
                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
185
 
        }
186
 
}
187
 
 
188
 
@-moz-keyframes cobweb-spinner-rotate-two {
189
 
        0% {
190
 
                -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
191
 
        }
192
 
        100% {
193
 
                -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
194
 
        }
195
 
}
196
 
 
197
 
@keyframes cobweb-spinner-rotate-three {
198
 
        0% {
199
 
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
200
 
        }
201
 
        100% {
202
 
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
203
 
        }
204
 
}
205
 
 
206
 
@-o-keyframes cobweb-spinner-rotate-three {
207
 
        0% {
208
 
                -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
209
 
        }
210
 
        100% {
211
 
                -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
212
 
        }
213
 
}
214
 
 
215
 
@-ms-keyframes cobweb-spinner-rotate-three {
216
 
        0% {
217
 
                -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
218
 
        }
219
 
        100% {
220
 
                -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
221
 
        }
222
 
}
223
 
 
224
 
@-webkit-keyframes cobweb-spinner-rotate-three {
225
 
        0% {
226
 
                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
227
 
        }
228
 
        100% {
229
 
                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
230
 
        }
231
 
}
232
 
 
233
 
@-moz-keyframes cobweb-spinner-rotate-three {
234
 
        0% {
235
 
                -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
236
 
        }
237
 
        100% {
238
 
                -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
239
 
        }
240
 
}