@orcden/od-spinner

Spinning component to indicate busy or loading

<od-spinner> is a simple component that will hijack the users experience and display a spinning loading cirlce instead.

Installation

• Install with npm

npm i @orcden/od-spinner

Usage

import '@orcden/od-spinner';

<div style='height: 500px; position: relative;'>
    <od-spinner scoped size='100' bar-size='10' id='spinner'></od-spinner>
</div>

Attributes

Attribute	Type	Default	Description
scoped	Boolean	false	Set this so that the spinner doesn't take up the whole screen. Will scope itslef to the next parent element with position relative (in CSS)
active	Boolean	false	Controls CSS to show/hide the spinner
size	Number	40	In pixels. Controls the width ( diameter ) of the spinner
bar-size	Number	3	In pixels. Controls the stroke width of the spinner

Properties

Attribute	Type	Default	Description
scoped	Boolean	false	Set this so that the spinner doesn't take up the whole screen. Will scope itslef to the next parent element with position relative (in CSS)
active	Boolean	false	Controls CSS to show/hide the spinner
size	Number	40	In pixels. Controls the width ( diameter ) of the spinner
barSize	Number	3	In pixels. Controls the stroke width of the spinner

Functions

Name	Parameters	Description
toggleActive	None	toggles the spinner on and off

Styling

• CSS variables are available to alter the default styling provided

Shadow Parts	Description
modal	The modal inside the component
circle	The circle HTML Element inside the component. Set Stroke to change the colour.

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build