Progress Spinner

A spinner is an animated element that appears a user's action to indicate that saving or loading is in progress.

Variants

There are 3 different types of progress spinners available to choose from in GEL.

Demo

Guidance

• User spinner to indicate background activity which takes short period of time is in progress .
• Similar to progress bar, if the spinner is either MD or LG, consider accompanying the spinner with a text informing what action/process is taking place.

When to use

• When an action has been taken and the server/process takes short time to load new data/content.

When not to use

• Ideally, only one spinner should be used at a time. If a larger section of content is loading, consider using a larger size spinner instead of multiple smaller ones or a skeleton loader instead.
• If the process takes a long period of time such as importing data or exporting reports, consider using a progress bar instead.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP