oppi.li
1@keyframes isloadingspin {
2 0% { transform: translate(-50%, -50%) rotate(0deg); }
3 100% { transform: translate(-50%, -50%) rotate(360deg); }
4}
5
6.is-loading {
7 pointer-events: none !important;
8 position: relative !important;
9}
10
11.is-loading > * {
12 opacity: 0.3;
13}
14
15.btn.is-loading > *,
16.button.is-loading > * {
17 opacity: 0;
18}
19
20.is-loading::after {
21 content: "";
22 position: absolute;
23 display: block;
24 left: 50%;
25 top: 50%;
26 height: min(4em, 66.6%);
27 width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
28 aspect-ratio: 1;
29 transform: translate(-50%, -50%);
30 animation: isloadingspin 1000ms infinite linear;
31 border-width: 4px;
32 border-style: solid;
33 border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
34 border-radius: var(--border-radius-full);
35}
36
37.is-loading.loading-icon-2px::after {
38 border-width: 2px;
39}
40
41.is-loading.loading-icon-3px::after {
42 border-width: 3px;
43}
44
45/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
46form.single-button-form.is-loading > * {
47 opacity: 1;
48}
49
50form.single-button-form.is-loading .button {
51 color: transparent;
52}
53
54.markup pre.is-loading,
55.editor-loading.is-loading,
56.pdf-content.is-loading {
57 height: var(--height-loading);
58}
59
60.markup .is-loading > * {
61 visibility: hidden;
62}
63
64.markup .is-loading {
65 color: transparent;
66 background: transparent;
67}
68
69/* TODO: not needed, use "is-loading loading-icon-2px" instead */
70code.language-math.is-loading::after {
71 padding: 0;
72 border-width: 2px;
73 width: 1.25rem;
74 height: 1.25rem;
75}
76
77@keyframes fadein {
78 0% {
79 opacity: 0;
80 }
81 100% {
82 opacity: 1;
83 }
84}
85
86@keyframes fadeout {
87 0% {
88 opacity: 1;
89 }
90 100% {
91 opacity: 0;
92 }
93}
94
95@keyframes pulse {
96 0% {
97 transform: scale(1);
98 }
99 50% {
100 transform: scale(1.8);
101 }
102 100% {
103 transform: scale(1);
104 }
105}
106
107.pulse {
108 animation: pulse 2s linear;
109}
110
111.ui.modal,
112.ui.dimmer.transition {
113 animation-name: fadein;
114 animation-duration: 100ms;
115 animation-timing-function: ease-in-out;
116}