# Loader 

## Inline mode

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

## CurrentColor 

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


## Align

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

## Fixed mode

<sonic-code >
  <template>
    <div dataProvider="toggleLoaderForm" formDataProvider="toggleLoaderForm">
      <sonic-checkbox label="Show fixed loader" 
          name="toggleLoader"
          unique  value="true">
      </sonic-checkbox>
      <sonic-if  data-bind ::condition="$toggleLoader" >
        <sonic-loader></sonic-loader>
      </sonic-if>
    </div>
  </template>
</sonic-code>


## Loading button
<sonic-code>
  <template>
    <sonic-button loading>A loading button</sonic-button>
  </template>
</sonic-code>

## Hide / show programmatically

<sonic-code language="javascript">
  <template>
  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();
  </template>
</sonic-code>