CSS Loader ou Exemple de fileur

Il s'agit d'une animation de chargement légère implémentée dans Pure CSS. 1. Créez un conteneur Div à l'aide de HTML; 2. Réglez une bordure circulaire à travers CSS et colorez le dessus uniquement; 3. Utilisez @keyframes Animation pour faire tourner en continu des éléments; 4. Personnaliser la taille, la vitesse et la couleur; 5. Affichage central à travers la disposition flexible; 6. Contrôler dynamiquement l'affichage et la cachette en combinaison avec JavaScript, adapté à la soumission de formulaire, au chargement des données et à d'autres scénarios, aucune dépendance complète et aucune dépendance externe n'est requise.

Voici un exemple de chargeur CSS (Spinner) simple et pratique que vous pouvez utiliser dans vos projets Web. Il est léger, CSS pur et facile à personnaliser.

? Spinner CSS simple (chargeur)

Ce fileur est idéal pour afficher des états de chargement pendant que le contenu charge (par exemple, appels API, transitions de page).

✅ HTML

 <div class = "Loader"> </div>

✅ CSS

 .loader {
  Largeur: 40px;
  hauteur: 40px;
  Border: 4px solide # f3f3f3;
  Border-top: 4px solide # 3498db;
  Border-Radius: 50%;
  Animation: Spin 1s linéaire infini;
  marge: 50px automatique; / * Le centre * /
}

@keyframes spin {
  0% {transform: rotation (0deg); }
  100% {Transform: Rotate (360Deg); }
}

? Comment ça marche

• Le spinner utilise une bordure circulaire avec uniquement la couleur supérieure - cela crée l'effet de "rotation".
• animation: spin 1s linear infinite tourne en continu l'élément.
• Vous pouvez changer:
  • Taille: ajuster width / height
  • Vitesse: changer 1s en plus rapide ( 0.5s ) ou plus lent
  • Couleurs: modifier les valeurs border et border-top

? ️ Facultatif: centrer le chargeur à l'écran

Pour le centrer verticalement et horizontalement:

 corps {
  Affichage: flex;
  Justification-contenu: centre;
  Align-Items: Centre;
  Min-Height: 100VH;
  marge: 0;
}

.loader {
  Largeur: 40px;
  hauteur: 40px;
  Border: 4px solide # f3f3f3;
  Border-top: 4px solide # 3498db;
  Border-Radius: 50%;
  Animation: Spin 1s linéaire infini;
}

? Cas d'utilisation

• Afficher pendant la soumission du formulaire
• Tout en récupérant les données d'une API
• Sur la navigation sur page (applications à une seule page)
• Boutons à l'intérieur (par exemple, "Chargement ...")

Vous pouvez l'envelopper dans un conteneur et le masquer lorsqu'il n'est pas nécessaire:

 .Loader-Container {
  Affichage: aucun; / * Afficher dynamiquement avec js * /
}

.loader-contrainer.active {
  Affichage: bloc;
}

Voilà - un spinner propre et moderne sans bibliothèques JavaScript ni externes nécessaires. Fondamentalement, quelques lignes de CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!