Source Code HTML / SASS
Vous trouverez ici les démos et le code source statiques du composant.
On expose les différentes déclinaisons du composant au format HTML et SASS.
Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.
Classic Loader
<div class="af-spinner af-spinner--active">
<div class="af-spinner__animation"></div>
<div class="af-spinner__caption"><span>Loading...</span></div>
</div>@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-spinner {
display: none;
&--active {
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
&__caption {
color: $color-scorpion;
text-align: center;
}
&__animation {
width: 50px;
height: 50px;
margin: 10px auto;
background-color: $brand-primary;
animation: rotateplane 1.1s infinite ease-in-out;
}
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}React interactions
Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.
Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.
Generales Guidelines
Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.
Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.
1) Définition
Le spinner est un composant animé faisant patienter l’utilisateur lors de tâches à forte latence. Il représente un chargement en cours sans indication du niveau de complétion de celui-ci.
2) Use case
- Le spinner doit être mis en place lorsque l’action liée prend constamment plus de 3 secondes pour s’effectuer.
- Le spinner peut être utilisé lors d’un upload de fichier.
3) DO/DONT
- Le spinner ne doit pas être utilisé si l’on peut afficher une barre de chargement quantifiée (XX%).
- Le spinner ne doit pas être utilisé si le résultat de l’action de s’affiche pas dans un laps de temps raisonnable (1 minute). Par exemple, si une action nécessite l’action d’un admin pour que le processus avance d’une étape, on préfèrera utiliser un message indiquant le délai moyen de traitement.
4) Utilisation
a) Position
Le spinner doit être dans la page ou le bloc en cours de chargement.
b) Alignement
Le spinner doit être centré horizontalement et verticalement dans la page ou le bloc en cours de chargement.
c) Contenu
Le spinner peut être accompagné d’un label, par exemple « Chargement en cours » ou « Veuillez patienter quelques instants »
d) Rédaction
Le label du spinner doit être le plus clair et concis que possible, tout en restant courtois car les chargements créent de la frustration.
e) Pictogrammes
Aucun pictogramme ne doit être utilisé en plus du label.
Style
Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.
On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System
Imports SASS
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-loader/dist/loader.scss';
Typography
Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.
| Class | Font-size (px/rem) | Font-weight | Font-family |
|---|---|---|---|
| .af-loader | 16 / 1 | 400 | Source Sans Pro Regular |