Spinner
A compact loading indicator for inline, overlay, and fallback loading states.
Usage
Spinner
Loading demo...
Best Practices
- Use spinner for indeterminate waits only. Switch to
TxProgressBaronce progress is numeric or staged. - Keep inline spinner copy next to the icon; the spinner itself exposes busy state but no completion message.
- Use
visiblewhen you want the built-in enter/leave transition; usev-ifonly when the host owns mount timing. - Use
fallback=trueonly for constrained surfaces where the CSS ball animation is unsuitable.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 16 | Spinner width and height in pixels; written to --tx-spinner-size. |
strokeWidth | number | 2 | Stroke width used by the ring and SVG fallback; written to --tx-spinner-stroke. |
fallback | boolean | false | Renders the SVG fallback spinner instead of the default animated ball/ring shape. |
visible | boolean | true | Shows or hides the spinner with the built-in tx-spinner-visibility transition. |
label | string | 'Loading' | Accessible name for the status region, announced when the spinner appears; override it to localize. |
Events
| Event | Payload | Description |
|---|---|---|
| - | - | No component-specific emits. Visibility is controlled by the visible prop. |
Slots
| Slot | Props | Description |
|---|---|---|
| - | - | TxSpinner has no slots. Pair text outside the spinner for accessible status copy. |
Sizes
Spinner sizes
Loading demo...
Visibility Toggle (v-if vs visible)
Toggle
Loading demo...
Dashboard Inline Waiting
Use TxSpinner for short waits inside buttons, inline status rows, or overlays. Prefer TxProgressBar when progress is known; prefer TxLoadingState for full first-load states. Spinner is best when the wait is short and no percentage is available.
Dashboard task feedback center
A screenshot-verified Spinner with Toast / Tooltip / LoadingOverlay.
Loading demo...
Overview
- When
visible=false, the spinner is not rendered after the leave transition. - The visible root is an inline-flex
spanwitharia-busy="true"andaria-live="polite". - Default mode renders the animated ball/ring shape;
fallback=truerenders an SVG circle using the samesizeandstrokeWidthprops. - The spinner root defaults to the secondary text color (
--tx-text-color-secondary); tint it by settingcoloron theTxSpinnerelement itself — a parent'scolordoes not override the root's own declaration.
Technologies
- Accessibility note: The visible root has
aria-busy="true"andaria-live="polite", but the spinner itself has no readable label or completion announcement. Pair it with adjacent status text for anything longer than a momentary inline wait. - Verified coverage:
spinner.test.tschecks default accessibility attributes, default vs SVG fallback branches, CSS variable mapping forsize/strokeWidth, andvisible=falsenon-rendering. - Component source:
packages/tuffex/packages/components/src/spinner/src/TxSpinner.vue. - Types:
packages/tuffex/packages/components/src/spinner/src/types.tsexportsSpinnerProps. - Export alias:
packages/tuffex/packages/components/src/spinner/index.tsexportsSpinner,TxSpinner,SpinnerProps, andTxSpinnerInstance. - Coverage:
packages/tuffex/packages/components/src/spinner/__tests__/spinner.test.tsverifies rendering branches and prop-driven CSS variables.
查看源码
packages/tuffex/packages/components/src/spinner/index.ts