export const title = "Loading indicator components"
export const description = "Free and open-source React loading indicator components built for modern applications and websites. These loading indicators are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/loading-indicator",
}

import * as Demos from "@/components/application/loading-indicator/loading-indicator.demo.tsx";

<PreviewAndCode title="Loading indicator example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this loading indicator component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add loading-indicator
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/loading-indicator" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the loading indicator components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Loading indicator examples

Below are examples and variations of this loading indicator component:

### Line simple {{ tocOnly:true }}

<PreviewAndCode title="Line simple">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.LineSimpleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/LineSimpleDemo" />
    </TabPanel>
</PreviewAndCode>

### Line simple with label {{ tocOnly:true }}

<PreviewAndCode title="Line simple with label">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.LineSimpleWithLabelDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/LineSimpleWithLabelDemo" />
    </TabPanel>
</PreviewAndCode>

### Line spinner {{ tocOnly:true }}

<PreviewAndCode title="Line spinner">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.LineSpinnerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/LineSpinnerDemo" />
    </TabPanel>
</PreviewAndCode>

### Line spinner with label {{ tocOnly:true }}

<PreviewAndCode title="Line spinner with label">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.LineSpinnerWithLabelDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/LineSpinnerWithLabelDemo" />
    </TabPanel>
</PreviewAndCode>

### Dot circle {{ tocOnly:true }}

<PreviewAndCode title="Dot circle">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DotCircleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/DotCircleDemo" />
    </TabPanel>
</PreviewAndCode>

### Dot circle with label {{ tocOnly:true }}

<PreviewAndCode title="Dot circle with label">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DotCircleWithLabelDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/DotCircleWithLabelDemo" />
    </TabPanel>
</PreviewAndCode>

### Sizes {{ tocOnly:true }}

<PreviewAndCode title="Sizes">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SizesDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="loading-indicator/SizesDemo" />
    </TabPanel>
</PreviewAndCode>