Loading

Loading

Components for indicating loading and progress states.

Prerequisites

Before using these components, complete the @mdk/core installation and add the dependency.

Spinner

Circular loading indicator for inline or small loading states.

Import

import { Spinner } from '@mdk/core'

Props

Basic usage

<Spinner />
<Spinner size="sm" />
<Spinner size="lg" />

With content

<Button disabled>
  <Spinner size="sm" /> Loading...
</Button>

Styling

• .mdk-spinner: Root element
• .mdk-spinner--{size}: Size modifier

Loader

Full-screen or section loading overlay.

Import

import { Loader } from '@mdk/core'

Props

Basic usage

<Loader />
<Loader message="Loading data..." />
<Loader fullscreen message="Please wait..." />

In a container

<div className="relative min-h-[200px]">
  {isLoading && <Loader />}
  {data && <DataDisplay data={data} />}
</div>

Styling

• .mdk-loader: Root container
• .mdk-loader--fullscreen: Fullscreen variant
• .mdk-loader__spinner: Spinner element
• .mdk-loader__message: Message text

Progress

Linear progress bar for loading or completion states.

Import

import { Progress } from '@mdk/core'

Props

Basic usage

<Progress value={50} />
<Progress value={75} max={100} />

With label

<div>
  <span>Upload progress: {progress}%</span>
  <Progress value={progress} />
</div>

Styling

• .mdk-progress: Root container
• .mdk-progress__track: Background track
• .mdk-progress__indicator: Progress indicator