73 lines
1.3 KiB
JavaScript
73 lines
1.3 KiB
JavaScript
|
import {
|
||
|
|
component_styles_default
|
||
|
|
} from "./chunk.K23QWHWK.js";
|
||
|
|
import {
|
||
|
|
i
|
||
|
|
} from "./chunk.CXZZ2LVK.js";
|
||
|
|
|
||
|
|
// src/components/spinner/spinner.styles.ts
|
||
|
|
var spinner_styles_default = i`
|
||
|
|
${component_styles_default}
|
||
|
|
|
||
|
|
:host {
|
||
|
|
--track-width: 2px;
|
||
|
|
--track-color: rgb(128 128 128 / 25%);
|
||
|
|
--indicator-color: var(--sl-color-primary-600);
|
||
|
|
--speed: 2s;
|
||
|
|
|
||
|
|
display: inline-flex;
|
||
|
|
width: 1em;
|
||
|
|
height: 1em;
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner {
|
||
|
|
flex: 1 1 auto;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner__track,
|
||
|
|
.spinner__indicator {
|
||
|
|
fill: none;
|
||
|
|
stroke-width: var(--track-width);
|
||
|
|
r: calc(0.5em - var(--track-width) / 2);
|
||
|
|
cx: 0.5em;
|
||
|
|
cy: 0.5em;
|
||
|
|
transform-origin: 50% 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner__track {
|
||
|
|
stroke: var(--track-color);
|
||
|
|
transform-origin: 0% 0%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner__indicator {
|
||
|
|
stroke: var(--indicator-color);
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-dasharray: 150% 75%;
|
||
|
|
animation: spin var(--speed) linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
stroke-dasharray: 0.05em, 3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: rotate(450deg);
|
||
|
|
stroke-dasharray: 1.375em, 1.375em;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: rotate(1080deg);
|
||
|
|
stroke-dasharray: 0.05em, 3em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export {
|
||
|
|
spinner_styles_default
|
||
|
|
};
|