Processing payment...
$100.00
Installation
Install @lucide/svelte:
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
<Spinner /> Customization
You can replace the default spinner icon with any other icon by editing the Spinner component.
Examples
Size
Use the size-* utility class to change the size of the spinner.
Color
Use the text-* utility class to change the color of the spinner.
Button
Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.
Badge
You can also use a spinner inside a badge.
Syncing Updating Processing
Input Group
Input Group can have spinners inside <InputGroup.Addon>.
Validating...
Empty
Processing your request
Please wait while we process your request. Do not refresh the page.
Item
Use the spinner inside <Item.Media> to indicate a loading state.
Downloading...
129 MB / 1000 MB