mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-24 05:48:59 +08:00
fundon
de00040389
Related to: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-%E5%9B%BE%E7%89%87-loading-%E5%8F%98%E9%87%8F%E6%9B%B4%E6%96%B0) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Improved the appearance of image loading indicators by updating background and ring colors for a more consistent visual experience. - **New Features** - Added customization options for the loading icon's ring color. - **Chores** - Updated the "@toeverything/theme" dependency to version ^1.1.15 across multiple packages for improved consistency and compatibility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
48 lines
1.1 KiB
TypeScript
48 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>
|
|
.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>`;
|