Loader

Design

Code

Default

<div class="container-box flex">
    <nile-loader> </nile-loader>
</div>

Purpose

Loader

A page loader is the display that is visible to the user of a website while the web page loads to the browser.

Variants

<div class="container-box flex">
    <nile-loader variant='v1' > </nile-loader>
    <nile-loader variant='v2' > </nile-loader>
    <nile-loader variant='v3' > </nile-loader>
</div>

Size Variants

<div class="container-box">
  <div class="flex">
    <nile-loader variant='v1' size='sm'> </nile-loader>
    <nile-loader variant='v1' size='md'> </nile-loader>
    <nile-loader variant='v1' size='lg'> </nile-loader>
    <nile-loader variant='v1' size='xl'> </nile-loader>
  </div>
  <div class="flex">
    <nile-loader variant='v2' size='sm'> </nile-loader>
    <nile-loader variant='v2' size='md'> </nile-loader>
    <nile-loader variant='v2' size='lg'> </nile-loader>
    <nile-loader variant='v2' size='xl'> </nile-loader>
  </div>
  <div class="flex">
    <nile-loader variant='v3' size='sm'> </nile-loader>
    <nile-loader variant='v3' size='md'> </nile-loader>
    <nile-loader variant='v3' size='lg'> </nile-loader>
    <nile-loader variant='v3' size='xl'> </nile-loader>
  </div>
</div>

Loader Label

<div class="container-box flex">
    <nile-loader variant='v1' label="Loading..."> </nile-loader>
</div>

Custom Height & Width

<div class="container-box flex">
    <nile-loader variant='v1' height="85" width="85"> </nile-loader>
</div>

Properties

Name	Description	Type	Default
variant	The loader type variant.	'v1' \| 'v2' \| 'v3'	'v1'
size	The loader size variant.	'sm' \| 'md' \| 'lg' \| 'xl'	'lg'
label	The loader's label	string	'' (default's to size property if not present)
height	The loader custom height	number	'' (default's to size property if not present)
width	The loader custom width	number	''
color	color for the loader	string	var(nile-colors-primary-600)