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

import { Spinner } from '@robojuice/velure-ui';

<Spinner size="16" />

​
Custom Type Spinner

<Spinner type="x" />

​
Combined Size and Type

<Spinner size="16" type="x" />

​
Props

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

​
Example Use Cases

​
Small Spinner

<Spinner size="12" />

​
Custom Type Spinner

Switch the spinner to an “x” style: 
<Spinner type="x" />

​
Custom Size and Type Spinner

Combine size and type for a tailored spinner: 
<Spinner size="24" type="x" />

​
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.