Spinner3.0
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-spinner';
defineCustomElement();
</script>
<anchor-spinner />Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-spinner />Note: Spinner adds
Loadingasaria-labelby default. This is required for accessibility. You can change it by passing alabeloraria-labelprop.
Sizes
Pass the size prop with value xsmall. small. medium, large or xlarge to display the spinner with different sizes.
<anchor-spinner size="xsmall"></anchor-spinner>
<anchor-spinner size="small"></anchor-spinner>
<anchor-spinner size="medium"></anchor-spinner>
<anchor-spinner size="large"></anchor-spinner>
<anchor-spinner size="xlarge"></anchor-spinner>Colors
The spinner will be colored by 'currentColor' of its parent element. If you want to set the color of the spinner specifically, you can set the text color of the parent element or directly for the Spinner.
<style>
body > :nth-child(1) {color:red;}
body > :nth-child(2) {color:green;}
body > :nth-child(3) {color:blue;}
body > :nth-child(4) {color:yellow;}
body > :nth-child(5) {color:fuchsia;}
</style>
<anchor-spinner size="xsmall"></anchor-spinner>
<anchor-spinner size="small"></anchor-spinner>
<anchor-spinner size="medium"></anchor-spinner>
<anchor-spinner size="large"></anchor-spinner>
<anchor-spinner size="xlarge"></anchor-spinner>Stroke width
<anchor-spinner stroke-width="20" />You shouldn't change this from it's default but we've included the option for the sake of flexibility.
API
Spinner
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | We recommend controlling the size of the Spinner with the parent container. Size option included for the sake of flexibility. | "large" | "medium" | "small" | "xlarge" | "xsmall" | undefined |
strokeWidth | stroke-width | You shouldn't change this from it's default but we've included the option for the sake of flexibility | number | 7 |
CSS Custom Properties
| Name | Description |
|---|---|
--animation | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--duration | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--end-rotation | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--path | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--spinner-animation | Set the animation properties of the spinner. |
--spinner-color | Set the path color of the spinner. |
--spinner-duration | Set the duration of the spinner animation. |
--spinner-end-rotation | Set the ending rotation of the spinner. |
--spinner-start-rotation | Set the starting rotation of the spinner. |
--start-rotation | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
Dependencies
Used by
Graph
Built with StencilJS