amis-rpc-design/libs/amis/packages/amis-ui/scss/components/_spinner.scss
2023-10-07 19:42:30 +08:00

185 lines
3.2 KiB
SCSS

@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.#{$ns}Spinner {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: ease-out opacity var(--animation-duration);
&.in {
opacity: 1;
}
.#{$ns}Spinner-icon {
width: var(--Spinner-width);
height: var(--Spinner-height);
position: relative;
transform: translateZ(0);
animation: spin 2s linear infinite;
transition: ease-out all var(--animation-duration);
&--default {
background: var(--Spinner-bg);
background-size: 100%;
animation: none;
}
&--simple {
background: transparent;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 100%;
height: 100%;
color: var(--Spinner-color);
}
svg.icon {
top: 0;
path {
fill: var(--Spinner-color);
}
}
i.icon {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--Spinner-width);
}
}
&--custom {
width: auto;
height: auto;
}
&--lg {
width: var(--Spinner--lg-width);
height: var(--Spinner--lg-height);
i.icon {
font-size: var(--Spinner--lg-height);
}
}
&--sm {
width: var(--Spinner--sm-width);
height: var(--Spinner--sm-height);
i.icon {
font-size: var(--Spinner--sm-height);
}
}
}
.#{$ns}Spinner-tip {
margin: px2rem(12px) 0 0 0;
word-break: keep-all;
white-space: nowrap;
font-size: var(--spinner-base-fontSize);
color: var(--Spinner-color);
font-weight: var(--spinner-base-fontWeight);
}
&.#{$ns}Spinner-tip--top {
flex-direction: column-reverse;
.#{$ns}Spinner-tip {
margin: 0 0 var(--spinner-base-tip-size) 0;
}
}
&.#{$ns}Spinner-tip--right {
flex-direction: row;
.#{$ns}Spinner-tip {
margin: 0 0 0 var(--spinner-base-tip-size);
}
}
&.#{$ns}Spinner-tip--bottom {
flex-direction: column;
.#{$ns}Spinner-tip {
margin: var(--spinner-base-tip-size) 0 0 0;
}
}
&.#{$ns}Spinner-tip--left {
flex-direction: row-reverse;
.#{$ns}Spinner-tip {
margin: 0 var(--spinner-base-tip-size) 0 0;
}
}
&--overlay {
position: absolute;
z-index: $zindex-spinner-overlay;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
}
.#{$ns}Spinner-overlay {
position: absolute;
z-index: calc(#{$zindex-spinner-overlay} - 1);
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--Spinner-overlay-bg);
transition: ease-out opacity var(--animation-duration);
opacity: 0;
&.in {
opacity: 1;
}
}
// spinner渲染器scss
.#{$ns}Spinner-wrap {
position: relative;
width: 100%;
height: 100%;
.#{$ns}Spinner {
position: absolute;
z-index: $zindex-spinner-overlay;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
}
.#{$ns}Spinner-mark {
position: absolute;
z-index: -999;
opacity: 0;
}