Skip to main content
The Spinner.vue component is a simple, reusable Vue.js component designed to display a spinner or loader. It supports customizable sizes and types, allowing for versatile use in various application contexts.

​
Features

Customizable Size

Adjust the spinner size dynamically using the size prop.

Spinner Types

Switch between different spinner styles (x or default) with the type prop.

Lightweight Design

Features minimal configuration for easy and straightforward usage.

​
Usage

​
Basic Example

​
Custom Type Spinner

​
Combined Size and Type

​
Props

​
string
default:"'c'"
The type of spinner. Supported values: 'c' (default), 'x'.
​
number
default:"16"
The size of the spinner in pixels.

​
Example Use Cases

​
Small Spinner

​
Custom Type Spinner

Switch the spinner to an “x” style:

​
Custom Size and Type Spinner

Combine size and type for a tailored spinner:

​
Notes

  • The type prop determines the style of the spinner. By default, it uses a circular style ('c'), but you can switch to an 'x' style.
  • The size prop allows precise control of the spinner’s dimensions, making it adaptable for various UI designs.
For further customization, refer to the component’s source code.