logo polydile dile-components

dile-spinner-horizontal

This component implements a loading animation on a horizontal layout.

Installation

npm i @dile/dile-spinner

Usage

Similar as dile-spinner implementation.

Import the component.

import '@dile/dile-spinner/dile-spinner-horizontal.js';

Use the component.

<dile-spinner-horizontal active></dile-spinner-horizontal>

Styling

It is possible to customize the component with this custom CSS properties:

Custom propertyDescriptionDefault
--dile-spinner-horizontal-heightHeight of the interface1rem
--dile-spinner-horizontal-line-sizeHeight of the animated line2px
--dile-spinner-horizontal-colorColor of the lines#888
--dile-spinner-animation-timeAnimation time2.2s
--dile-spinner-horizontal-widthWidth lines70px

dile-spinner-horizontal demos

Default spinner

<dile-spinner-horizontal active></dile-spinner-horizontal>

Styled spinner

<style>
  .styled {
    --dile-spinner-horizontal-height: 2rem;
    --dile-spinner-horizontal-line-size: 6px;
    --dile-spinner-horizontal-color: orange;
    --dile-spinner-animation-time: 4s;
    --dile-spinner-horizontal-width: 200px;
  }
</style>
<dile-spinner-horizontal class="styled" active></dile-spinner-horizontal>

Iteractive demo

class MyComponent extends LitElement {

  render() {
    return html`
      <style>
      .styled {
        --dile-spinner-horizontal-color: #3c9;
        --dile-spinner-horizontal-width: 120px;
        --dile-spinner-horizontal-line-size: 4px;

      }
      </style>
      <p>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
      </p>
      <dile-spinner-horizontal class="styled"></dile-spinner-horizontal>
    `
  }
  firstUpdated() {
    let spinner = this.shadowRoot.querySelector('dile-spinner-horizontal');
    this.shadowRoot.getElementById('start').addEventListener('click', (e) => {
      spinner.active = true;
    });
    this.shadowRoot.getElementById('stop').addEventListener('click', (e) => {
      spinner.active = false;
    });
  }
}
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;