Comment faire des filateurs CSS simples?

En développement Web, un spinner peut être utilisé dans le but de montrer l'état de chargement de la page Web ou un projet. Il peut simplement être conçu via les propriétés HTML et CSS. De plus, cela peut ne pas nécessiter de règles strictes, comme l'utilisation de JavaScript et d'autres langages de programmation. Pour ce faire, le CSS "rayon frontalier»La propriété peut être utilisée.

Ce message indiquera comment concevoir un simple spinner CSS.

Comment faire des filateurs CSS simples?

Pour faire un simple spinner CSS, créez d'abord un conteneur div, puis appliquez le «rayon frontalier" propriété. Après cela, appliquez les propriétés CSS particulières, y compris «animation","rayon frontalier","transformer", et d'autres.

Pour des implications pratiques, essayez les étapes données.

Étape 1: Faites un conteneur div

Initialement, faites un conteneur div avec l'aide du «" élément. Aussi, insérez un «classe”Attribut avec un nom particulier:

Étape 2: Faire un simple spinner

Accédez au conteneur créé à l'aide du nom de classe et appliquez les propriétés CSS indiquées ci-dessous:

.spin-container :: avant
Animation: 1.9em;
Animation-Play-State: Hériter;
Border: solide 5px # C2DFFC;
marge: 10%;
Border-Radius: 50%;
Border-Bottom-Color: # 064E18;
Transform: tradlate3d (-50%, - 50%, 0);
contenu: "";
hauteur: 100px;
Largeur: 100px;
Position: absolue;
en haut: 40%;
Gauche: 40%;
Volonté: Transformer;

Ici:

• • "animation"Est une propriété CSS raccourci utilisée pour appliquer une animation entre les styles.
  • "Animation-play-State»Détermine si l'animation est dans un état en cours d'exécution ou une pause.
  • "frontière»La propriété définit une frontière autour d'un élément particulier.
  • "marge”Définit un espace en dehors de la frontière définie.
  • "rayon frontalier»Spécifie le rayon des coins de l'élément.
  • "couleur frontalière”Est ​​utilisé pour régler la couleur en bas du côté inférieur de la limite définie.
  • "transformer»Transforme un élément d'une manière 2D ou 3D. Cette propriété permet à ses utilisateurs d'échec, de biais, de déplacer et de faire tourner les éléments.
  • "contenu”Est ​​utilisé pour insérer le texte à l'intérieur de l'élément.
  • "hauteur" et "largeur»Les propriétés sont utilisées pour spécifier la taille de l'élément.
  • "position»Spécifie le type de méthode de positionnement de l'élément.
  • "haut" et "gauche”Les propriétés allouent la position de l'élément.
  • "changera"Discute aux navigateurs sur la façon dont un élément pourrait changer.

On peut observer que le simple spinner a été créé et conçu avec succès:

Il s'agit de créer et de styliser un simple spinner CSS.

Conclusion

Pour faire le simple spinner CSS, concevez d'abord un conteneur div. Ensuite, appliquez les propriétés CSS particulières, y compris «animation","rayon frontalier","transformer","rayon frontalier","couleur frontalière", et d'autres. Ce message a démontré la méthode de conception du simple spinner CSS.