2020-08-05 03:56:37 +08:00
@ keyframes isloadingspin {
2020-08-26 03:48:53 +08:00
0 % { transform : translate ( -50 % , -50 % ) rotate ( 0 deg ) ; }
100 % { transform : translate ( -50 % , -50 % ) rotate ( 360 deg ) ; }
2020-08-05 03:56:37 +08:00
}
. is-loading {
2020-08-26 03:48:53 +08:00
pointer-events : none ! important ;
position : relative ! important ;
overflow : hidden ! important ;
2020-08-05 03:56:37 +08:00
}
2023-06-14 16:01:37 +08:00
. is-loading > * {
opacity : 0 . 3 ;
}
2024-03-28 04:05:49 +08:00
. btn . is-loading > * ,
2024-03-17 18:04:59 +08:00
. button . is-loading > * {
opacity : 0 ;
}
2020-11-11 02:28:07 +08:00
. is-loading :: after {
2020-08-26 03:48:53 +08:00
content : "" ;
position : absolute ;
display : block ;
left : 50 % ;
top : 50 % ;
2023-06-29 12:16:04 +08:00
height : min ( 4em , 66 . 6 % ) ;
2024-03-15 06:04:33 +08:00
width : fit-content ; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
2023-06-29 12:16:04 +08:00
aspect-ratio : 1 ;
2020-08-26 03:48:53 +08:00
transform : translate ( -50 % , -50 % ) ;
2024-01-27 20:27:37 +08:00
animation : isloadingspin 1000ms infinite linear ;
2020-08-26 03:48:53 +08:00
border-width : 4px ;
border-style : solid ;
2022-10-13 00:26:27 +08:00
border-color : var ( --color-secondary ) var ( --color-secondary ) var ( --color-secondary-dark-8 ) var ( --color-secondary-dark-8 ) ;
2023-08-29 03:43:59 +08:00
border-radius : var ( --border-radius-circle ) ;
2020-08-05 03:56:37 +08:00
}
2023-06-14 16:01:37 +08:00
. is-loading . small-loading-icon :: after {
border-width : 2px ;
}
2023-06-29 12:16:04 +08:00
/* 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 ;
}
2021-05-07 16:43:41 +08:00
. markup pre . is-loading ,
2023-05-29 20:10:00 +08:00
. editor-loading . is-loading ,
. pdf-content . is-loading {
2022-02-16 11:28:29 +08:00
height : var ( --height-loading ) ;
2020-08-05 03:56:37 +08:00
}
2021-11-16 16:16:05 +08:00
2023-06-19 16:00:18 +08:00
. markup . is-loading > * {
visibility : hidden ;
}
. markup . is-loading {
color : transparent ;
background : transparent ;
}
2023-06-14 16:01:37 +08:00
/* TODO: not needed, use "is-loading small-loading-icon" instead */
2022-09-14 00:33:37 +08:00
code . language-math . is-loading :: after {
padding : 0 ;
border-width : 2px ;
width : 1 . 25rem ;
height : 1 . 25rem ;
}
2021-11-16 16:16:05 +08:00
@ keyframes fadein {
0 % {
opacity : 0 ;
}
100 % {
opacity : 1 ;
}
}
@ keyframes fadeout {
0 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}
2022-05-07 13:35:12 +08:00
@ keyframes pulse {
0 % {
transform : scale ( 1 ) ;
}
50 % {
transform : scale ( 1 . 8 ) ;
}
100 % {
transform : scale ( 1 ) ;
}
}
. pulse {
animation : pulse 2s linear ;
}
2023-08-17 06:12:40 +08:00
2023-08-29 07:49:21 +08:00
. ui . modal ,
. ui . dimmer . transition {
2023-08-17 06:12:40 +08:00
animation-name : fadein ;
2023-08-29 07:49:21 +08:00
animation-duration : 100ms ;
2023-08-17 06:12:40 +08:00
animation-timing-function : ease-in-out ;
}