In an application, it is important to inform the user that his interaction has worked. The Loader component show to the user that now the application is waiting for a result from a backend or a service.
Color
Set the color of the loader.
| Type | Default Value |
|---|
| string | neutral |
<NVStack Gutter="4" Justify="center">
<NVLoader Color="neutral" Loading/>
<NVLoader Color="primary" Loading/>
<NVLoader Color="secondary" Loading/>
<NVLoader Color="success" Loading/>
<NVLoader Color="error" Loading/>
</NVStack>
<div class="nv-stack gutter-x-4 justify-center">
<div class="nv-loader neutral nv-loader-md is-loading"></div>
<div class="nv-loader primary nv-loader-md is-loading"></div>
<div class="nv-loader secondary nv-loader-md is-loading"></div>
<div class="nv-loader success nv-loader-md is-loading"></div>
<div class="nv-loader error nv-loader-md is-loading"></div>
<nv-stack gutter="4" justify="center">
<nv-loader loading color="neutral"></nv-loader>
<nv-loader loading color="primary"></nv-loader>
<nv-loader loading color="secondary"></nv-loader>
<nv-loader loading color="success"></nv-loader>
<nv-loader loading color="error"></nv-loader>
</nv-stack>
<NvStack gutter={4} justify="center">
<NvLoader color="neutral" loading />
<NvLoader color="primary" loading />
<NvLoader color="secondary" loading />
<NvLoader color="success" loading />
<NvLoader color="error" loading />
</NvStack>
Loading
Display or hide the loader
| Type | Default Value |
|---|
| bool | false |
<NVStack Gutter="4" Justify="center">
<NVLoader Loading />
</NVStack>
<div class="nv-stack gutter-x-4 justify-center">
<div class="nv-loader neutral nv-loader-md is-loading"></div>
<nv-stack justify="center" gutter="4">
<nv-loader loading></nv-loader>
</nv-stack>
<NvStack gutter={4} justify="center">
<NvLoader color="neutral" loading />
</NvStack>
Size
Set the size of the loader.
| Type | Default Value |
|---|
| string | md |
<NVStack Gutter="4" Justify="center">
<NVLoader Loading Size="xs" />
<NVLoader Loading Size="sm" />
<NVLoader Loading Size="md" />
<NVLoader Loading Size="lg" />
<NVLoader Loading Size="xl" />
</NVStack>
<div class="nv-stack gutter-x-4 justify-center">
<div class="nv-loader neutral nv-loader-xs is-loading"></div>
<div class="nv-loader neutral nv-loader-sm is-loading"></div>
<div class="nv-loader neutral nv-loader-md is-loading"></div>
<div class="nv-loader neutral nv-loader-lg is-loading"></div>
<div class="nv-loader neutral nv-loader-xl is-loading"></div>
<nv-stack gutter="4" justify="center">
<nv-loader loading color="neutral" size="xs"></nv-loader>
<nv-loader loading color="neutral" size="sm"></nv-loader>
<nv-loader loading color="neutral" size="md"></nv-loader>
<nv-loader loading color="neutral" size="lg"></nv-loader>
<nv-loader loading color="neutral" size="xl"></nv-loader>
</nv-stack>
<NvStack gutter={4} justify="center">
<NvLoader color="neutral" loading size="xs" />
<NvLoader color="neutral" loading size="sm" />
<NvLoader color="neutral" loading size="md" />
<NvLoader color="neutral" loading size="lg" />
<NvLoader color="neutral" loading size="xl" />
</NvStack>
