Concorde UI component — Loader. import {Loader} from "@supersoniks/concorde/core/components/ui/loader/loader"; Doc ID: core/components/ui/loader/loader. Keywords: Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html.

Loader

Inline mode

<sonic-loader mode="inline"></sonic-loader>

CurrentColor

<sonic-loader mode="inline" currentColor style="color:purple;"></sonic-loader>

Align

<sonic-loader mode="inline" align="left"></sonic-loader>
    <sonic-loader mode="inline" align="center"></sonic-loader>
    <sonic-loader mode="inline" align="right"></sonic-loader>

Fixed mode

Loading button

<sonic-button loading>A loading button</sonic-button>

Hide / show programmatically

import {Loader} from "@supersoniks/concorde/core/components/ui/loader/loader";
  // Show 
  Loader.show({
    mode:"fixed" // optional : fixed | inline
    container : document.querySelector('#foo') // optional, default : parent sonic-theme || document.body
  });
  // Hide 
  Loader.hide();