@keyframes isloadingspin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); }} lazy-webc { display: block;} lazy-webc,.is-loading { pointer-events: none !important; position: relative !important;} lazy-webc > *,.is-loading > * { opacity: 0.3;} .btn.is-loading > *,.button.is-loading > * { opacity: 0;} lazy-webc::after,.is-loading::after { content: ""; position: absolute; display: block; left: 50%; top: 50%; height: min(4em, 66.6%); width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */ aspect-ratio: 1; transform: translate(-50%, -50%); animation: isloadingspin 1000ms infinite linear; border-width: 4px; border-style: solid; border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8); border-radius: var(--border-radius-full);} .is-loading.loading-icon-2px::after { border-width: 2px;} .is-loading.loading-icon-3px::after { border-width: 3px;} /* 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. */form.single-button-form.is-loading > * { opacity: 1;} form.single-button-form.is-loading .button { color: transparent;} .markup pre.is-loading,.editor-loading.is-loading { height: var(--height-loading);} .markup .is-loading > * { visibility: hidden;} .markup .is-loading { color: transparent; background: transparent;} /* TODO: not needed, use "is-loading loading-icon-2px" instead */code.language-math.is-loading::after { padding: 0; border-width: 2px; width: 1.25rem; height: 1.25rem;} @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; }} @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; }} @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.8); } 100% { transform: scale(1); }} .pulse { animation: pulse 2s linear;} .ui.modal,.ui.dimmer.transition { animation-name: fadein; animation-duration: 100ms; animation-timing-function: ease-in-out;}
@keyframes isloadingspin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
lazy-webc {
display: block;
}
lazy-webc,
.is-loading {
pointer-events: none !important;
position: relative !important;
}
lazy-webc > *,
.is-loading > * {
opacity: 0.3;
}
.btn.is-loading > *,
.button.is-loading > * {
opacity: 0;
}
lazy-webc::after,
.is-loading::after {
content: "";
position: absolute;
display: block;
left: 50%;
top: 50%;
height: min(4em, 66.6%);
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
aspect-ratio: 1;
transform: translate(-50%, -50%);
animation: isloadingspin 1000ms infinite linear;
border-width: 4px;
border-style: solid;
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
border-radius: var(--border-radius-full);
}
.is-loading.loading-icon-2px::after {
border-width: 2px;
}
.is-loading.loading-icon-3px::after {
border-width: 3px;
}
/* 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. */
form.single-button-form.is-loading > * {
opacity: 1;
}
form.single-button-form.is-loading .button {
color: transparent;
}
.markup pre.is-loading,
.editor-loading.is-loading {
height: var(--height-loading);
}
.markup .is-loading > * {
visibility: hidden;
}
.markup .is-loading {
color: transparent;
background: transparent;
}
/* TODO: not needed, use "is-loading loading-icon-2px" instead */
code.language-math.is-loading::after {
padding: 0;
border-width: 2px;
width: 1.25rem;
height: 1.25rem;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
.pulse {
animation: pulse 2s linear;
}
.ui.modal,
.ui.dimmer.transition {
animation-name: fadein;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
}