Spinner de chargement
Le spinner est l'animation affichée pendant un chargement de durée indéterminée :
- sur l'écran de démarrage de l'application, jusqu'à ce qu'elle soit prête ;
- dans
LgLoaderView, en modeProgressType.Circle(par défaut), tant que le chargement n'a pas de progression.
Lagoon.UI propose 17 animations. Le spinner se choisit et se personnalise avec des variables SCSS, dans le fichier main.scss du projet client. Seul le spinner choisi est compilé dans la feuille de style de l'application.
Choisir le spinner
Déclarez les variables dans Client/resources/styles/main.scss. La galerie plus bas sur cette page génère ce bloc pour le spinner et les couleurs choisis.
// Spinner
$spinner: 'tideEbb';
$sp-color: $primary;
$sp-color-alt: $secondary;
Le CSS est régénéré à la compilation suivante de l'application.
La valeur de $spinner doit reprendre exactement le nom du spinner ('tideEbb', 'tideRoll'). Une valeur inconnue ne provoque pas d'erreur de compilation : aucun spinner n'est généré et le chargement s'affiche sans animation.
Variables
| Variable | Valeur par défaut | Rôle |
|---|---|---|
$spinner | 'tide' | Nom du spinner compilé. |
$sp-size | 2.5rem | Taille de base. Chaque spinner en dérive ses dimensions : tide fait 1,6 fois cette largeur, logo 3,2 fois, corail 9,6 fois. |
$sp-color | $primary | Couleur principale. |
$sp-color-alt | var(--sp-color) | Couleur alternative, utilisée par les spinners bicolores. Elle reprend la couleur principale par défaut. |
$sp-bg-color | $body-bg | Couleur de fond, utilisée par les spinners qui masquent une partie de leur forme (corail, logo). |
$sp-image | "~/icon.png" | Image affichée au centre du spinner logo. ~/ désigne la racine wwwroot du projet client. |
Les couleurs ne sont lues que par certains spinners. La galerie désactive celles que le spinner sélectionné n'utilise pas.
Galerie des spinners
Sélectionnez un spinner, ajustez ses couleurs, puis copiez le bloc SCSS dans votre main.scss. Les spinners sont affichés à leur taille par défaut ($sp-size: 2.5rem).
tide$spinner: 'tide';
$sp-color: #2AAFC5;
$sp-color-alt: #A7C734;
| Spinner | Couleur alternative | Couleur de fond |
|---|---|---|
bounce, chase, circle, flow, fold, grid, martin, plane, pulse, wander | ||
ripple, swing, tide, tideEbb, tideRoll | ✓ | |
corail | ✓ | ✓ |
logo | ✓ |
Spinner logo
Le spinner logo fait tourner un anneau en dégradé autour de l'image $sp-image, généralement le logo de l'application.
$spinner: 'logo';
$sp-bg-color: $body-bg;
$sp-color: $primary;
$sp-image: "~/icon-160.png";
Ajoutez un lien de préchargement dans le index.html du client. Sans lui, l'image n'est téléchargée qu'une fois la feuille de style chargée et l'écran de démarrage s'affiche un instant sans logo.
<link rel="preload" href="icon-160.png" as="image" type="image/png" />
Le haut du dégradé est calculé à la compilation à partir de $sp-color. Il ne suit donc pas une surcharge de --sp-color à l'exécution (voir ci-dessous).
Surcharger les couleurs localement
Les couleurs sont aussi exposées en propriétés CSS sur :root : --sp-color, --sp-color-alt et --sp-bg-color. Surchargez-les sur un conteneur pour changer les couleurs d'un spinner à un seul endroit, sans modifier les variables SCSS.
L'écran de démarrage utilise ce mécanisme : il éclaircit la couleur principale (lighten($primary, 20%)) et prend $app-loading-text-color comme couleur alternative. Pour l'adapter, surchargez ces propriétés dans votre 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;
}
Pages liées
- LgLoaderView : affichage d'un chargement dans une page.
- Changelog : nouveautés de la version 4.0.