]>
Commit | Line | Data |
---|---|---|
1 | @use '_variables' as *; | |
2 | @use '_mixins' as *; | |
3 | ||
4 | // Thanks: https://projects.lukehaas.me/css-loaders/ | |
5 | .vjs-loading-spinner { | |
6 | left: 50%; | |
7 | font-size: 10px; | |
8 | text-indent: -9999em; | |
9 | border: 0.7em solid rgba(255, 255, 255, 0.2); | |
10 | border-left-color: #ffffff; | |
11 | transform: translateZ(0); | |
12 | animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important; | |
13 | overflow: hidden; | |
14 | visibility: hidden; | |
15 | ||
16 | &::before { | |
17 | animation: none !important; | |
18 | } | |
19 | ||
20 | &::after { | |
21 | border-radius: 50%; | |
22 | width: 6em; | |
23 | height: 6em; | |
24 | animation: none !important; | |
25 | } | |
26 | ||
27 | @keyframes spinner { | |
28 | 0% { | |
29 | transform: rotate(0deg); | |
30 | } | |
31 | 100% { | |
32 | transform: rotate(360deg); | |
33 | } | |
34 | } | |
35 | ||
36 | @keyframes vjs-spinner-show { | |
37 | 0% { | |
38 | opacity: 0; | |
39 | } | |
40 | ||
41 | 1% { | |
42 | visibility: visible; | |
43 | opacity: 0; | |
44 | } | |
45 | ||
46 | 100% { | |
47 | visibility: visible; | |
48 | opacity: 1; | |
49 | } | |
50 | } | |
51 | } |