Download packages/ui/src/v2/components/loader-v2.stories.tsx from SaylorTwift/opencode: direct link, hf CLI and curl.
- Browser
- Download file 820 Bytes
-
https://huggingface.co/SaylorTwift/opencode/resolve/main/packages/ui/src/v2/components/loader-v2.stories.tsx
- Command line
-
hf download hf://SaylorTwift/opencode/packages/ui/src/v2/components/loader-v2.stories.tsx
-
curl -L -o loader-v2.stories.tsx https://huggingface.co/SaylorTwift/opencode/resolve/main/packages/ui/src/v2/components/loader-v2.stories.tsx
820 Bytes
| import { LoaderV2 } from "./loader-v2" | |
| const docs = `### Overview | |
| Circular v2 loader for compact loading states. | |
| ### API | |
| - Accepts standard SVG props. | |
| ### Behavior | |
| - The foreground ring covers 33% of the circumference and rotates continuously. | |
| ### Accessibility | |
| - Sets \`aria-hidden="true"\` by default. | |
| ` | |
| export default { | |
| title: "UI V2/Loader", | |
| id: "components-loader-v2", | |
| component: LoaderV2, | |
| tags: ["autodocs"], | |
| parameters: { | |
| docs: { | |
| description: { | |
| component: docs, | |
| }, | |
| }, | |
| }, | |
| } | |
| export const Basic = { | |
| render: () => <LoaderV2 />, | |
| } | |
| export const Sizes = { | |
| render: () => ( | |
| <div style={{ display: "flex", gap: "16px", "align-items": "center" }}> | |
| <LoaderV2 width={12} height={12} /> | |
| <LoaderV2 /> | |
| <LoaderV2 width={24} height={24} /> | |
| </div> | |
| ), | |
| } | |