Components / Feedback

Loading Success

Component

A container to display loading, success, or error states with an optional message. It provides visual feedback for processes like loading or completion.

Preview

Usage

API reference

Live preview

Interactive example

Your changes are saved.

Usage

Import the component, then make it your own.

ComponentLoadingSuccessDiv

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { LoadingSuccessDiv } from "sveltekit-ui"
</script>

<LoadingSuccessDiv show_screen="success" message="Your changes were saved." size={5} />

API reference

Props accepted by the component.

8 entries in properties

Property	Type	Default	Description
`message`	`string`	`null`	Optional message displayed below the icon.
`show_screen`	`enum`	`loading`	Defines the state of the component: loading (shows a loading spinner), success (shows a success check), or error (shows an error icon).
`size`	`number`	`8`	Size of the icon in rem.
`ml`	`number`	`1`	Margin-left in rem.
`mr`	`number`	`1`	Margin-right in rem.
`mt`	`number`	`1`	Margin-top in rem.
`mb`	`number`	`1`	Margin-bottom in rem.
`flex`	`number`	`1`	Flex-grow value for the container.