Quasar
Spinners
A Spinner is used to show the user a timely process is currently taking place. It is an important UX feature, which gives the user the feeling the system is continuing to work for longer term activities, like grabbing data from the server or some heavy calculations.
Installation
Edit /quasar.conf.js:framework: {
components: [
'QSpinner',
'QSpinnerAudio',
...
]
}
Basic Usage
<!-- Default platform spinner--> |
Vue Properties
| Vue Property | Type | Description |
|---|---|---|
size |
Number / String | Number (defining the size in pixels) or String (CSS size with unit). |
color |
String | CSS color from Quasar Color Palette. |
You can change the spinner’s size without a loss of quality, because SVGs are used.
Using Specific Spinners
If you’d like to use a different spinner than the default, use a specific spinner component, which inherits the same props as specified above.
The following specific spinners components are available. The name of these components is q-spinner-*name*, where name is one of ‘audio’, ‘ball’, ‘bars’, ‘circles’, ‘comment’, ‘cube’, ‘dots’, ‘grid’, ‘hearts’, ‘ios’, ‘mat’, ‘oval’, ‘puff’, ‘rings’, ‘tail’, ‘facebook’, ‘gears’, ‘hourglass’, ‘infinity’, ‘pie’, ‘radio’.
Example:
<!-- Specific spinner icon --> |
Note
Having to use an extra component to identify specific spinners might seem like extra work, however, the goal is to be able to remove all other spinner components in your final build, in order to keep the overall package size of your application down to a minimum.
The spinners are used in components such as the QInnerLoading and QBtn components or within the Loading feature, just to name a few examples.