Loading spinner

The spinner is the animation displayed during a load of indeterminate duration:

• on the application's loading screen, until it is ready;
• in LgLoaderView, in ProgressType.Circle mode (the default), as long as the load has no progress information.

Lagoon.UI provides 17 animations. The spinner is chosen and customized with SCSS variables, in the main.scss file of the client project. Only the selected spinner is compiled into the application's stylesheet.

Choose the spinner

Declare the variables in Client/resources/styles/main.scss. The gallery further down this page generates this block for the selected spinner and colors.

Client/resources/styles/main.scss

// Spinner
$spinner: 'tideEbb';
$sp-color: $primary;
$sp-color-alt: $secondary;

The CSS is regenerated on the next build of the application.

Case-sensitive value

The value of $spinner must match the spinner name exactly ('tideEbb', 'tideRoll'). An unknown value does not raise a compilation error: no spinner is generated and the load is displayed without animation.

Variables

Variable	Default value	Purpose
$spinner	'tide'	Name of the compiled spinner.
$sp-size	2.5rem	Base size. Each spinner derives its dimensions from it: tide is 1.6 times this width, logo 3.2 times, corail 9.6 times.
$sp-color	$primary	Main color.
$sp-color-alt	var(--sp-color)	Alternate color, used by two-color spinners. It defaults to the main color.
$sp-bg-color	$body-bg	Background color, used by the spinners that mask part of their shape (corail, logo).
$sp-image	"~/icon.png"	Image displayed at the center of the logo spinner. ~/ refers to the wwwroot root of the client project.

The colors are only read by some spinners. The gallery disables the ones the selected spinner does not use.

Spinner gallery

Select a spinner, adjust its colors, then copy the SCSS block into your main.scss. The spinners are displayed at their default size ($sp-size: 2.5rem).

tide

Colors

Main color $sp-color

Alternative color $sp-color-alt

Same as the main color (default value)

Background color $sp-bg-color

Not used by this spinner.

Client/resources/styles/main.scss

$spinner: 'tide';
$sp-color: #2AAFC5;
$sp-color-alt: #A7C734;

All the spinners: click to select

Spinner	Alternate color	Background color
bounce, chase, circle, flow, fold, grid, martin, plane, pulse, wander
ripple, swing, tide, tideEbb, tideRoll	✓
corail	✓	✓
logo		✓

logo spinner

The logo spinner rotates a gradient ring around the $sp-image image, usually the application logo.

Client/resources/styles/main.scss

$spinner: 'logo';
$sp-bg-color: $body-bg;
$sp-color: $primary;
$sp-image: "~/icon-160.png";

Display the image as soon as the loading screen appears

Add a preload link in the client's index.html. Without it, the image is only downloaded once the stylesheet is loaded and the loading screen is briefly displayed without a logo.

Client/wwwroot/index.html

<link rel="preload" href="icon-160.png" as="image" type="image/png" />

The top of the gradient is computed at build time from $sp-color. It therefore does not follow a --sp-color override at runtime (see below).

Override the colors locally

The colors are also exposed as CSS properties on :root: --sp-color, --sp-color-alt and --sp-bg-color. Override them on a container to change the colors of a spinner in a single place, without modifying the SCSS variables.

The loading screen uses this mechanism: it lightens the main color (lighten($primary, 20%)) and takes $app-loading-text-color as the alternate color. To adapt it, override these properties in your main.scss:

Client/resources/styles/main.scss

// Loading screen
$app-loading-text-color: #FFF;

.app-loading-detail {
    --sp-color: #{$app-loading-text-color};
    --sp-bg-color: #8FC2D3;
    background-color: var(--sp-bg-color);
    border-radius: 1rem;
}

Related pages

• LgLoaderView: display a load in a page.
• Changelog: what's new in version 4.0.