Spinner
Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the Button component instead.
Anchor to propertiesProperties
- Anchor to accessibilityLabelaccessibilityLabelstring
A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context. Providing an
is recommended if there is no accompanying text describing that something is loading.- Anchor to sizesize"base" | "large" | "large-100"
Spinner
- accessibilityLabel
A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context. Providing an `accessibilityLabel` is recommended if there is no accompanying text describing that something is loading.
string - adoptedCallback
() => void - attributeChangedCallback
(name: string) => void - click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
({ sourceEvent }?: ClickOptions) => void - connectedCallback
() => void - disconnectedCallback
() => void - queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
() => void - setAttribute
(name: string, value: string) => void - size
"base" | "large" | "large-100"
declare class Spinner extends PreactCustomElement implements SpinnerProps {
accessor accessibilityLabel: string;
accessor size: SpinnerProps['size'];
constructor();
}ClickOptions
- sourceEvent
The event you want to influence the synthetic click.
ActivationEventEsque
export interface ClickOptions {
/**
* The event you want to influence the synthetic click.
*/
sourceEvent?: ActivationEventEsque;
}ActivationEventEsque
- button
number - ctrlKey
boolean - metaKey
boolean - shiftKey
boolean
export interface ActivationEventEsque {
shiftKey: boolean;
metaKey: boolean;
ctrlKey: boolean;
button: number;
}Code
examples
Code
<s-spinner accessibilityLabel="Loading" size="large-100"></s-spinner><!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-spinner accessibilityLabel="Loading" size="large-100"></s-spinner> </body></html>