@orcden/od-spinner NPM

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

npm i @orcden/od-spinner

import '@orcden/od-spinner';

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

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

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