mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-18 02:26:21 +08:00
Peng Xiao
d9e8ce802f
#### PR Dependency Tree * **PR #13192** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the loading icon to ensure consistent appearance by explicitly setting the fill property to none using an inline style. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import { cssVarV2 } from '@toeverything/theme/v2';
|
|
import { html } from 'lit';
|
|
|
|
export const LoadingIcon = ({
|
|
size = '1em',
|
|
progress = 0.2,
|
|
ringColor = cssVarV2('loading/background'),
|
|
strokeColor = cssVarV2('loading/foreground'),
|
|
}: {
|
|
size?: string;
|
|
progress?: number;
|
|
ringColor?: string;
|
|
strokeColor?: string;
|
|
} = {}) =>
|
|
html`<svg
|
|
width="${size}"
|
|
height="${size}"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
style="fill: none;"
|
|
>
|
|
<style>
|
|
.spinner {
|
|
transform-origin: center;
|
|
animation: spinner_animate 0.75s infinite linear;
|
|
}
|
|
@keyframes spinner_animate {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
<circle cx="12" cy="12" r="8" stroke="${ringColor}" stroke-width="4" />
|
|
<circle
|
|
class="spinner"
|
|
cx="12"
|
|
cy="12"
|
|
r="8"
|
|
stroke="${strokeColor}"
|
|
stroke-width="4"
|
|
stroke-linecap="round"
|
|
stroke-dasharray="${2 * Math.PI * 8 * progress} ${2 *
|
|
Math.PI *
|
|
8 *
|
|
(1 - progress)}"
|
|
/>
|
|
</svg>`;
|