generic-spinner

API:

name	type
label	string

name	description
spinner
circle

name	description
--generic-spinner-width	Controls the width of the spinner
--generic-spinner-height	Controls the height of the spinner
--generic-spinner-color	Controls the color of the spinner
--generic-spinner-stroke-width	Controls the stroke width of the spinner

Usage:

Simply drop the component in your markup.

Default

Show code

<generic-spinner></generic-spinner>

Custom label

Show code

<generic-spinner label="loading data"></generic-spinner>

Using CSS Parts

Show code

<style>
  generic-spinner::part(circle) {
    stroke: blue;
  }
</style>
<generic-spinner></generic-spinner>

Using CSS Custom Properties

Show code

<style>
  generic-spinner {
    --generic-spinner-color: red;
    --generic-spinner-width: 30px;
    --generic-spinner-height: 30px;
  }
</style>
<generic-spinner></generic-spinner>