mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(inline-loading): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 09:19:56 -07:00
commit 9d111dcd91
1 changed files with 22 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

23
docs/src/pages/components/InlineLoading.svx
View file

@ -1,18 +1,37 @@
---
components: ["InlineLoading"]
---
<script> <script>
import { InlineLoading } from "carbon-components-svelte"; import { InlineLoading, UnorderedList, ListItem } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
The `InlineLoading` component provides a compact loading indicator that can be embedded within content. It's ideal for showing progress during inline operations like form submissions or data updates.
## Default ## Default
Display a basic loading indicator with the default configuration.
<InlineLoading /> <InlineLoading />
## With description ## With description
Add a descriptive text to provide context about the loading operation.
<InlineLoading description="Loading metrics..." /> <InlineLoading description="Loading metrics..." />
## Status states ## Status states
The component supports different status states to indicate progress:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<ListItem><strong>active</strong>: Shows an animated loading indicator</ListItem>
<ListItem><strong>inactive</strong>: Displays a static state</ListItem>
<ListItem><strong>finished</strong>: Shows a success state</ListItem>
<ListItem><strong>error</strong>: Displays an error state</ListItem>
</UnorderedList>
<InlineLoading status="active" description="Submitting..." /> <InlineLoading status="active" description="Submitting..." />
<InlineLoading status="inactive" description="Cancelling..." /> <InlineLoading status="inactive" description="Cancelling..." />
<InlineLoading status="finished" description="Success" /> <InlineLoading status="finished" description="Success" />
@ -20,4 +39,6 @@
## UX example ## UX example
See how to integrate the loading indicator in a real-world scenario.
<FileSource src="/framed/InlineLoading/InlineLoadingUx" /> <FileSource src="/framed/InlineLoading/InlineLoadingUx" />