---
components: ["Loading"]
---

<script>
  import { Loading } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

The `Loading` component provides a full-screen or inline loading indicator. It's ideal for showing progress during page loads or data fetching operations.

## Default

Display a loading indicator with a semi-transparent overlay that covers the entire viewport.

<FileSource src="/framed/Loading/Loading" />

## No overlay

Show a loading indicator without the overlay, allowing interaction with the underlying content.

<Loading withOverlay={false} />

## Small size

Display a more compact loading indicator.

<Loading withOverlay={false} small />