Loading Animation

Loading animation is used to indicate a delay in the system when duration can not be estimated.

import { LoadingAnimation } from "@nulogy/components";

<LoadingAnimation />

Use

  • When you want to overlay the entire screen with the animation
  • When you don't know how long it will take for the action to be executed
  • When the action will take at least 2 seconds to execute

States

Loading animation comes in 2 states: active and inactive.

Active

Active state is the default state and is used to indicate the loading process.

<LoadingAnimation/>

Inactive

Inactive state is used to indicate loading process that takes longer than expected or is not able to complete.

<LoadingAnimation inactive />

Props

NameTypeDefaultDescription

inactive

Boolean

false

Toggles between active and inactive styles