@rhds/elements
Version:
Red Hat Design System Elements
50 lines • 3.59 kB
JavaScript
import { __decorate } from "tslib";
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { themable } from '@rhds/elements/lib/themable.js';
import { css } from "lit";
const styles = css `:host{display:inline-block;text-align:center;width:max-content;min-height:0}::slotted(*){margin-top:var(--rh-space-lg,16px)}::slotted(p){font-family:var(--rh-font-family-body-text,RedHatText,"Red Hat Text",Helvetica,Arial,sans-serif);font-weight:var(--rh-font-weight-body-text-regular,400);line-height:var(--rh-line-height-body-text,1.5)}svg{aspect-ratio:1/1;width:var(--rh-length-4xl,64px);stroke-width:var(--rh-length-sm,6px);overflow:hidden;display:block;margin-left:auto;margin-right:auto}circle{width:100%;height:100%;stroke-linecap:round}circle.dash{transform-origin:50% 50%;animation:rh-spinner-animation-dash 1.4s ease-out infinite;stroke:var(--rh-color-accent-base);stroke-dasharray:283;stroke-dashoffset:280;transform:rotate(-90deg)}circle.track{stroke:light-dark(var(--rh-color-gray-10,#f2f2f2),var(--rh-color-gray-70,#383838));animation-duration:0}:host([size=lg]) svg{width:var(--rh-size-icon-06,64px);stroke-width:var(--rh-length-sm,6px)}:host([size=lg]) ::slotted(p){font-size:var(--rh-font-size-body-text-lg,1.125rem)}:host([size=md]) svg{width:var(--rh-size-icon-04,40px);stroke-width:var(--rh-length-xs,4px)}:host([size=md]) ::slotted(p){font-size:var(--rh-font-size-body-text-md,1rem)}:host([size=sm]) svg{width:var(--rh-size-icon-01,16px);stroke-width:var(--rh-length-2xs,3px)}:host([size=sm]) circle.dash{animation-name:rh-spinner-small-animation-dash;stroke-dasharray:71;stroke-dashoffset:71}:host([size=sm]) ::slotted(p){font-size:var(--rh-font-size-body-text-sm,.875rem)} rh-spinner-animation-dash{50%{stroke-dashoffset:0}75%{transform:rotate(280deg)}to{stroke-dashoffset:-283}} rh-spinner-small-animation-dash{50%{stroke-dashoffset:0}75%{transform:rotate(280deg)}to{stroke-dashoffset:-71}}`;
/**
* Provides an animated loading indicator for when content is being
* processed or fetched. A spinner should be used when loading takes
* fewer than ten seconds and the content structure is unknown.
* Authors must not use a spinner for indeterminate loading over ten
* seconds; use a progress bar instead. Authors should avoid omitting
* a text label, as screen readers rely on `role="status"` to announce
* the ARIA live region. The element is not keyboard-focusable.
*
* @summary Notifies users their action is being processed or loaded
*
* @alias spinner
*/
let RhSpinner = class RhSpinner extends LitElement {
constructor() {
super(...arguments);
/**
* Preset sizes for the spinner
*/
this.size = 'lg';
}
render() {
return html `
<svg role="status" viewBox="0 0 100 100" aria-live="polite">
<circle class="track" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke" />
<circle class="dash" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke" />
</svg>
<!-- Optional text label displayed below the animated circle.
Use a \`<p>\` element with a brief loading message (e.g. "Loading..."). -->
<slot></slot>
`;
}
};
RhSpinner.styles = [styles];
__decorate([
property({ reflect: true })
], RhSpinner.prototype, "size", void 0);
RhSpinner = __decorate([
customElement('rh-spinner'),
themable
], RhSpinner);
export { RhSpinner };
//# sourceMappingURL=rh-spinner.js.map