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


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QSpinner'
    ]
  }
}

TIP

If you need a specific spinner, choose one from the list below.


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QSpinnerAudio',
      'QSpinnerBall',
      'QSpinnerBars',
      'QSpinnerComment',
      'QSpinnerCube',
      'QSpinnerDots',
      'QSpinnerFacebook',
      'QSpinnerGears',
      'QSpinnerGrid',
      'QSpinnerHearts',
      'QSpinnerHourglass',
      'QSpinnerInfinity',
      'QSpinnerIos',
      'QSpinnerOval',
      'QSpinnerPie',
      'QSpinnerPuff',
      'QSpinnerRadio',
      'QSpinnerRings',
      'QSpinnerTail'
    ]
  }
}

Usage

QSpinner



In the example below, hover over the spinners to see their names.

Other spinners



Coloring



Please note that by default, QSpinner and all other spinners inherit the font-size of the parent and applies it as its size.

Size



Standard sizes



QSpinner API

Other Spinners API

TIP

The API below applies to all spinners, except for QSpinner. Making an example with QSpinnerCube.