Components
Home
Packages
AlertsAvatarBannersBreadcrumbsButtonsButtonsDS3CardColor PickerColorsContent RendererEmojisFile IconFile PickerForm ElementsIcons AppIcons FileIcons FlagIcons LegacyIcons SymbolImage CarouselImage CropperImage GridLayoutListLoadersLoaderSpinnerLoadingContainerLoadingModalMenusModalsNavigationThemeToastTypography
Loaders
Name
@happeouikit/loaders
Latest
1.2.3
License
MIT
Installation
yarn add @happeouikit/loaders
Links
Dependencies (4)
@happeouikit/colors@^1.0.4
@happeouikit/icons@^2.1.11
@happeouikit/modals@^2.0.4
@happeouikit/typography@^1.1.0
Loader
size
"small" │ "medium" │ "large"
"small"
light
bool
false
containerHeight
string
"200px"
containerWidth
string
"100%"
Default
Default
Small
Medium
Large
Spinner
Spinner is meant to be used as a standalone spinner, with a loader content or with loader modal. It has three different states: "loading", "success", "error". The transition between this states are animated from "loading" > "success" and "loading" > "error".
state
"loading" │ "progress" │ "success" │ "error"
"loading"
sizePx
number
64
weightPx
number
4
progress
number
0
showPercentage
bool
false
LoadingContainer
LoadingContainer is meant to be used in modal actions or elsewhere where it makes more sense not to use LoadingModal.
title
string
required
description
string
""
state
"loading" │ "success" │ "error" │ "progress"
"loading"
progress
number
0
showPercentage
bool
false
LoadingModal
LoadingModal is meant to be used when a full loader is needed and loading time is long.
isOpen
bool
true
description
string
""
state
"loading" │ "success" │ "error" │ "progress"
"loading"
progress
number
0
showPercentage
bool
false