kalidea/kaligraphi

<h1>Loader</h1>

<div class="example">
  <article>

    <div
      class="divToLoad"
      [kalLoading]="loading"
      [kalLoadingMessage]="message"
      [style.width.px]="width"
      [style.height.px]="height"
      [kalTheme]="reverse ? 'reverse' : ''"
    >
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet
          ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore
          doloribus!</p><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet
          ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore
          doloribus!</p><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus
        </p></div>
    </div>
  </article>

</div>


<div class="configurator">

  <kal-form-field>
    <kal-checkbox
      label="Reverse"
      [(ngModel)]="reverse">
    </kal-checkbox>
  </kal-form-field>

  <kal-form-field>
    <kal-input label="text" [(ngModel)]="message"></kal-input>
  </kal-form-field>

  <kal-form-field>
    <kal-input label="width" [(ngModel)]="width" type="number"></kal-input>
  </kal-form-field>

  <kal-form-field>
    <kal-input label="height" [(ngModel)]="height" type="number"></kal-input>
  </kal-form-field>

  <kal-form-field>
    <kal-button (click)="loading = !loading">toggle</kal-button>
  </kal-form-field>

</div>