element-plus/packages/theme-chalk/src/spinner.scss
云游君 e4c6f6d0d9
refactor(theme-chalk): use css var instead of component hex colors (#6727)
* refactor(theme-chalk): use css var instead of component hex colors

* refactor(theme-chalk): hex colors to css var & use mixin as namespace
2022-03-21 21:41:33 +08:00

44 lines
712 B
SCSS

@use 'mixins/mixins' as *;
@include b(time-spinner) {
width: 100%;
white-space: nowrap;
}
@include b(spinner) {
display: inline-block;
vertical-align: middle;
}
@include b(spinner-inner) {
animation: rotate 2s linear infinite;
width: 50px;
height: 50px;
& .path {
stroke: getCssVar('border-color', 'lighter');
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}