README

Symmetronic Loader Button

A simple button with a loading state. This comes in handy if you like to notify the user about some asynchronous action taking place.

Using this component

Script tag

Put the following script tag <script src='https://unpkg.com/strc-loader-button@1.0.1/dist/strc-loader-button.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, HTML, etc.

Node Modules

Run npm install strc-loader-button --save
Put the following script tag <script src='node_modules/strc-loader-button/dist/strc-loader-button.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, HTML, etc.

In a stencil-starter app

Run npm install strc-loader-button --save
Add an import to the npm packages import 'strc-loader-button';
Then you can use the element anywhere in your template, JSX, HTML, etc.

API

Setting the Loading State

An exemplary setup might look as follows.

<script>
function load() {
  let loaderButton = document.querySelector('strc-loader-button');
  loaderButton.setAttribute('loading', true);

  setTimeout(loaded, 2000);
}

function loaded() {
  let loaderButton = document.querySelector('strc-loader-button');
  loaderButton.setAttribute('loading', false);
}
</script>

<strc-loader-button
  disabled='false'
  loading='false'
  loadingLabel='Loading...'
  type='button'
  onClick='load();'
>
  Click me!
</strc-loader-button>

Styling

You can adjust the style of the loader button using CSS variables.

strc-loader-button {
  --strc-loader-button-color: gray;
  --strc-loader-button-duration: 0.75s;
}

NPM scripts

npm install: Install dependencies
npm start: Build in development mode
npm run build: Build in production mode
npm test: Run tests
npm run test:watch: Run tests in interactive watch mode

Usage no npm install needed!