]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/sass/player/spinner.scss
Split player sass file
[github/Chocobozzz/PeerTube.git] / client / src / sass / player / spinner.scss
1 @import '_variables';
2 @import '_mixins';
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 display: none;
39 opacity: 0;
40 }
41
42 1% {
43 display: block;
44 visibility: visible;
45 opacity: 0;
46 }
47
48 100% {
49 display: block;
50 visibility: visible;
51 opacity: 1;
52 }
53 }
54 }