DocsComponentsPrimitives
LoadingIndicator
React example follows below.
ts
import { LoadingIndicator } from "@grassroot/ui-react"; <LoadingIndicator /><LoadingIndicator size="lg" label="Resolving tokens" />ts
<script setup lang="ts">import { LoadingIndicator } from "@grassroot/ui-vue";</script> <template> <LoadingIndicator /> <LoadingIndicator size="lg" label="Resolving tokens" /></template>ts
import { Component } from "@angular/core";import { GrassrootLoadingIndicator } from "@grassroot/ui-angular"; @Component({ selector: "app-example", standalone: true, imports: [GrassrootLoadingIndicator], template: ` <grassroot-loading-indicator /> <grassroot-loading-indicator size="lg" label="Resolving tokens" /> `,})export class ExampleComponent {}ts
<script lang="ts"> import { LoadingIndicator } from "@grassroot/ui-svelte";</script> <LoadingIndicator /><LoadingIndicator size="lg" label="Resolving tokens" />ts
import { LoadingIndicator } from "@grassroot/ui-solid"; export function Example() { return ( <> <LoadingIndicator /> <LoadingIndicator size="lg" label="Resolving tokens" /> </> );}Installation
bash
pnpm dlx grassroot add ui/loading-indicatorbash
npx grassroot@latest add ui/loading-indicatorbash
yarn dlx grassroot add ui/loading-indicatorbash
bunx grassroot add ui/loading-indicatorAPI Reference
| Prop | Type | Default |
|---|---|---|
sizeDiameter in px. | "sm" | "md" | "lg" | undefined | "md" |
labelAccessible label for assistive tech. | string | undefined | "Loading" |