amis2/scss/components/_spinner.scss

94 lines
1.5 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
@keyframes rotate {
2019-12-06 09:58:08 +08:00
0% {
transform: rotate(0deg);
}
2019-12-06 09:58:08 +08:00
100% {
transform: rotate(359deg);
}
2019-04-30 11:11:25 +08:00
}
2020-05-29 18:02:03 +08:00
@keyframes spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.is-spin {
animation: spin 2s linear infinite;
}
2019-04-30 11:11:25 +08:00
.#{$ns}Spinner-overlay {
2019-12-06 09:58:08 +08:00
position: absolute;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $Spinner-overlay-bg;
transition: ease-out opacity 0.3s;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
opacity: 0;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&.in {
opacity: 1;
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}Spinner {
2019-12-06 09:58:08 +08:00
width: $Spinner-width;
height: $Spinner-height;
transform: translateZ(0);
display: inline-block;
background: $Spinner-bg;
background-size: 100%;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&--lg {
width: $Spinner--lg-width;
height: $Spinner--lg-height;
}
2019-10-30 20:10:23 +08:00
2020-05-15 16:47:08 +08:00
&--sm {
width: $Spinner--sm-width;
height: $Spinner--sm-height;
}
2019-12-06 09:58:08 +08:00
transition: ease-out all 0.3s;
2020-06-08 16:53:52 +08:00
&--icon {
background: transparent;
animation: spin 2s linear infinite;
width: auto;
height: auto;
}
2019-10-30 20:10:23 +08:00
}
// 当启用 overlay 的时候,应该是居中模式。
.#{$ns}Spinner--overlay {
2019-12-06 09:58:08 +08:00
position: absolute;
z-index: 11;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
2019-10-30 20:10:23 +08:00
}
.#{$ns}Spinner--overlay.#{$ns}Spinner--lg {
2019-12-06 09:58:08 +08:00
width: $Spinner--lg-width;
height: $Spinner--lg-height;
line-height: $Spinner--lg-height;
2019-04-30 11:11:25 +08:00
}
@include media-breakpoint-up(md) {
2019-12-06 09:58:08 +08:00
.#{$ns}Layout .#{$ns}Page-body > .#{$ns}Spinner-overlay {
left: $Layout-aside-width;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
.#{$ns}Layout--folded .#{$ns}Page-body > .#{$ns}Spinner-overlay {
left: $Layout-aside--folded-width;
}
}