@epigraph/spinner
v1.1.4
Published
The Epigraph Spinner web component
Downloads
482
Readme
Import
You need to import our web component module. We recommend that you do this in the head. It's important that type="module" is specified.
Example
<head>
<script type="module" async src="https://www.unpkg.com/@epigraph/spinner/dist/epigraph-spinner.min.js"></script>
</head>Usage
You can insert epigraph-spinner elements anywhere you'd like. Epigraph Spinner currently serves one purpose: to embed a spinner directly in your page.
Attributes
| Name | Type | Default Value | Description |
| ------------------------ | ------------------------ | ------------------------ | ------------------------ |
| sku | String, required | "null" | Insert your product code/item no. for specifying which spinner to load (from our DB). This is a reactive attribute, so changing the sku attribute will force a spinner reload. |
| ua-code | String, required | "" | Insert your ua-code for google analytics in order to send analytics event to your dashboard.
Example: Spinner for all platforms
<epigraph-spinner sku="abc123" ua-code="valid-ua-code"></epigraph-spinner>Events (with example usage)
"epigraph-valid-product"
You can register to this event from <epigraph-spinner> to know when <epigraph-spinner> has successfully fetched a valid product. You can leverage this event to enable custom actions that should only happen for products with epigraph spinners.
// target <epigraph-spinner>
const eSpin = document.querySelector('epigraph-spinner');
// add the event listener
eSpin.addEventListener('epigraph-valid-product', () => {
// do something
})"epigraph-invalid-product"
You can register to this event from <epigraph-spinner> to know if <epigraph-spinner> has failed to fetch a valid product.
// target <epigraph-spinner>
const eSpin = document.querySelector('epigraph-spinner');
// add the event listener
eSpin.addEventListener('epigraph-invalid-product', () => {
// do something
})Methods
| Name | Description |
| ------------------------ | ------------------------ |
| load() | Call this method to set spinner loading to start immediately |