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/[email protected]/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