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