63 lines
1.7 KiB
Text
63 lines
1.7 KiB
Text
---
|
|
interface Props {
|
|
size?: number;
|
|
color?: string;
|
|
bgColor?: string;
|
|
}
|
|
|
|
const {size = 200, color= "#cad3f5", bgColor} = Astro.props;
|
|
---
|
|
|
|
<div class="spinner">
|
|
<div class="container">
|
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="">
|
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<path class="animation animation-normal" d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4" stroke={color} stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path class="animation animation-reverse" d="M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36" stroke={color} stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<style define:vars={{size: `${size}px`, bgColor: bgColor ?? "var(--prj-bg)"}}>
|
|
.spinner {
|
|
background: var(--bgColor);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 10px 0px -10px 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.container {
|
|
width: var(--size);
|
|
}
|
|
|
|
.animation {
|
|
animation: rotate 1.5s linear infinite;
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.animation-normal {
|
|
animation-direction: normal;
|
|
}
|
|
|
|
.animation-reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|