Loader

Introduction

Loaders are used to indicate that users have triggered an action but the result has not been completely loaded yet.

Examples

Basic

A simple loading status

<Loader/>

<Loader/>

Sizes

<>
  <div className="u-marginBottomSmall">
    <Loader size="small" />
  </div>
  <div className="u-marginBottomSmall">
    <Loader />
  </div>
  <div className="u-marginBottomSmall">
    <Loader size="large" />
  </div>
</>

<>
  <div className="u-marginBottomSmall">
    <Loader size="small" />
  </div>
  <div className="u-marginBottomSmall">
    <Loader />
  </div>
  <div className="u-marginBottomSmall">
    <Loader size="large" />
  </div>
</>

Custom animation duration

<Loader duration={500} />

<Loader duration={500} />

Design Reference

N/A

API

Loader

import { Loader } from '@ahaui/react'Copy import code for the Loader component

Name	Type	Default	Description
size	`'small'` \| `'medium'` \| `'large'`	`'medium'`	Loader size variants
duration	number	`2000`	Set the duration of the animation skeleton

Loader

Introduction#

Examples#

Basic#

Sizes#

Custom animation duration#

Design Reference#

API#

Loader#

Introduction

Examples

Basic

Sizes

Custom animation duration

Design Reference

API

Loader