Loader

A animated loading component for indicating ongoing processes and loading states with various sizes and styles.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁴⁾

Properties

⁽²⁰⁾

Playground

Basic Usage

Pick a loader variant to match the type of busy indicator you need for a loading state.

Loading demo…

import
 
{
 
Loader
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
"lg"
 
align
=
"center"
>
      
<Loader
 
variant
=
"oval"
 
/>
      
<Loader
 
variant
=
"bars"
 
/>
      
<Loader
 
variant
=
"dots"
 
/>
    
</Row
>
  
)
;
}

Sizes

Set the size token to align loaders with other controls, from xs indicators up to 3xl spinners.

Loading demo…

import
 
{
 
Block
,
 
Loader
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
size
}
 
align
=
"center"
>
          
<Loader
 
size
=
{
size
}
 
/>
          
<Text
 
variant
=
"small"
>
{
size
}
</Text
>
        
</Block
>
      
)
)
}
    
</Row
>
  
)
;
}

Colors

Pull palette values from useTheme() and pass them to the color prop to align loaders with your semantic colors.

Loading demo…

import
 
{
 
Block
,
 
Loader
,
 
Row
,
 
Text
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
interface
 
LoaderSwatch
 
{
  label
:
 
string
;
  color
:
 
string
;
}
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
 
  
const
 swatches
:
 
LoaderSwatch
[
]
 
=
 
[
    
{
 label
:
 
'Primary'
,
 color
:
 theme
.
colors
.
primary
[
5
]
 
}
,
    
{
 label
:
 
'Success'
,
 color
:
 theme
.
colors
.
success
[
5
]
 
}
,
    
{
 label
:
 
'Warning'
,
 color
:
 theme
.
colors
.
warning
[
5
]
 
}
,
    
{
 label
:
 
'Error'
,
 color
:
 theme
.
colors
.
error
[
5
]
 
}
  
]
;
 
  
return
 
(
    
<Block
>
      
{
swatches
.
map
(
(
{
 label
,
 color 
}
)
 
=>
 
(
        
<Row
 
key
=
{
label
}
 
gap
=
"md"
 
align
=
"center"
>
          
<Block
 
minW
=
{
88
}
>
            
<Text
 
variant
=
"small"
 
color
=
"muted"
>
              
{
label
}
            
</Text
>
          
</Block
>
          
<Loader
 
variant
=
"oval"
 
color
=
{
color
}
 
/>
          
<Loader
 
variant
=
"bars"
 
color
=
{
color
}
 
/>
          
<Loader
 
variant
=
"dots"
 
color
=
{
color
}
 
/>
        
</Row
>
      
)
)
}
    
</Block
>
  
)
;
}

Speed

Loading demo…

import
 
{
 
Block
,
 
Loader
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
// `speed` is the duration of one full animation cycle in milliseconds —
// lower is faster. Default is 1000ms.
const
 
SPEEDS
 
=
 
[
  
{
 label
:
 
'Fast'
,
 value
:
 
400
 
}
,
  
{
 label
:
 
'Default'
,
 value
:
 
1000
 
}
,
  
{
 label
:
 
'Slow'
,
 value
:
 
2000
 
}
,
]
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
{
SPEEDS
.
map
(
(
{
 label
,
 value 
}
)
 
=>
 
(
        
<Row
 
key
=
{
value
}
 
gap
=
"lg"
 
align
=
"center"
>
          
<Block
 
minW
=
{
96
}
>
            
<Text
 
variant
=
"small"
 
weight
=
"semibold"
>
              
{
label
}
            
</Text
>
            
<Text
 
variant
=
"small"
 
color
=
"muted"
>
              
{
value
}
ms
            
</Text
>
          
</Block
>
          
<Loader
 
variant
=
"oval"
 
size
=
"lg"
 
speed
=
{
value
}
 
/>
          
<Loader
 
variant
=
"bars"
 
size
=
"lg"
 
speed
=
{
value
}
 
/>
          
<Loader
 
variant
=
"dots"
 
size
=
"lg"
 
speed
=
{
value
}
 
/>
        
</Row
>
      
)
)
}
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Loader

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap