Avec les CSS et HTML modernes, la création de fileurs de chargement de tout type n’a jamais été aussi simple. Cet article présente plus de 40 techniques et styles différents, de l’animation CSS3 pure à la création d’un chargeur CSS dont votre site Web pourrait avoir besoin.

Qu’est-ce qu’un Spinner de chargement CSS?

Si vous utilisez un ordinateur, vous avez vu des fileurs plusieurs fois. Ce sont de petites animations qui indiquent que quelque chose est en cours de chargement et que l’utilisateur doit attendre un peu. Par exemple, votre système d’exploitation affiche une flèche de chargement lorsque vous démarrez un programme. Cela indique que le système d’exploitation a compris les instructions et ne fait que démarrer l’application souhaitée. L’utilisateur peut alors savoir que sa demande est en cours de traitement et qu’il lui suffit d’attendre un peu que le programme démarre et soit opérationnel.

Sur Internet, les filateurs et les chargeurs ont toujours été utilisés sur les sites Web et les applications dans le même but que leurs homologues de bureau. Il y a des années, les fileurs de chargement avaient généralement la forme d’un .gif Image. Cependant, comme les images ont tendance à consommer beaucoup de bande passante et à ralentir généralement les vitesses de chargement des sites Web, les développeurs Web ont choisi une solution plus efficace: les spinners en CSS pur.

Utilisez une animation CSS au lieu d’un .gif Image nous pouvons éviter l’exigence d’image (qui consomme de la bande passante et ralentit le chargement du site) et nous avons beaucoup plus d’options en termes de personnalisation et de maintenance.

Chargeur CSS par Luke Haas

Les meilleurs spinners et chargeurs CSS 1

Cette belle collection de huit animations CSS3 différentes comprend des démos et le code source. Chaque spinner de chargement de cette collection se compose de CSS pur et est facile à intégrer dans n’importe quel site Web ou application.

Jetons un coup d’œil au code: dans cet exemple, je vois le 3e spinner à partir de la gauche dans la rangée du haut. Le CSS et le HTML ne sont pas vraiment compliqués. Voici notre HTML:

<div class="loader">Loading...</div>

Et le CSS associé:

.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #0dc5c1;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Quelques points à considérer à propos de ce CSS: Tout d’abord, notez l’utilisation des pseudo-classes :before et :after. Alors tu peux voir @keyframesutilisé pour créer l’animation de chargement. Si vous avez besoin de plus d’informations sur l’animation CSS, veuillez consulter notre Astuces CSS Articles.

Afficher plus d’informations / sources

Chargeur Spinit

Le meilleur CSS Spinner & Loader 2

Continuons notre tour d’horizon avec ces 12 chargeurs CSS purs qui sont super faciles à intégrer dans tout type de site. Chaque animation de chargement comprend le code source CSS et HTML que vous pouvez utiliser librement dans n’importe lequel de vos projets.

Par rapport aux chargeurs de Luke Haas, ceux-ci ont tendance à être un peu complexes et utilisent beaucoup plus de code CSS.
Afficher plus d’informations / sources

CSSLoad

Le meilleur CSS Spinner & Loader 3

Cssload.net est probablement la bibliothèque la plus complète du genre disponible sur Internet. C’est un site Web complet destiné aux chargeurs de tous types.

Non seulement vous pouvez choisir parmi plus d’une centaine de types de fileurs différents sur ce site Web utile, mais vous pouvez également en personnaliser la plupart. Le code CSS et HTML de sortie est propre, concis et peut être utilisé sur votre site Web ou votre application.
Afficher plus d’informations / sources

Loaders.css

Le meilleur CSS Spinner & Loader 4

Animations de chargement CSS superbes et axées sur les performances. Plus de 25 styles différents au choix. Cette bibliothèque entière contient plus de 1700 lignes de code CSS propre et simple que vous pouvez réutiliser dans tous vos projets.
Afficher plus d’informations / sources

SpinThatShit

Les meilleurs spinners et chargeurs CSS 5

SpinThatShit est une série de SCSS Mixins pour chargeurs et essoreuses mono-élément Si vous souhaitez utiliser le préprocesseur CSS SASS, cette collection est certainement un excellent choix pour vos projets.
Afficher plus d’informations / sources

Le spinner CSS le plus propre jamais créé

Le meilleur CSS Spinner & Loader 6

Ce cinglé est assez vieux car il a été publié pour la première fois en 2013. Même ainsi, il est parfait à bien des égards car il s’agit d’un simple spinner CSS qui se charge rapidement et est facile à utiliser, à modifier et à intégrer.

Regardons le code d’animation CSS:

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;
	display: inline-block;
	width: 5em;
	height: 5em;
	margin: 0 .5em;
	font-size: 12px;
	text-indent: 999em;
	overflow: hidden;
	animation: spin 1s infinite steps(8);
}

.small.progress {
	font-size: 6px;
}

.large.progress {
	font-size: 24px;
}

.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
	content: '';
	position: absolute;
	top: 0;
	left: 2.25em; /* (container width - part width)/2  */
	width: .5em;
	height: 1.5em;
	border-radius: .2em;
	background: #eee;
	box-shadow: 0 3.5em #eee; /* container height - part height */
	transform-origin: 50% 2.5em; /* container height / 2 */
}

.progress:before {
	background: #555;
}

.progress:after {
	transform: rotate(-45deg);
	background: #777;
}

.progress > div:before {
	transform: rotate(-90deg);
	background: #999;
}

.progress > div:after {
	transform: rotate(-135deg);
	background: #bbb;
}

Le HTML associé est très simple:

<div class="large progress"><div>Loading…</div></div>

Cette animation de chargement simple a été testée et fonctionne parfaitement dans Chrome, Firefox, Safari et IE10. Dans les navigateurs plus anciens comme IE9, cela est considérablement affecté: le spinner a l’air bien, mais il ne s’anime pas.

Afficher plus d’informations / sources

Questions fréquemment posées

CSS

Comment charger un spinner dans CSS?

Bien que le code lui-même dépend du type de spinner CSS que vous souhaitez utiliser, il se compose toujours de deux éléments: le balisage HTML et le code CSS. Par exemple, vous pouvez vous référer à cet article.

Comment animer un spinner de chargement CSS pur?

L’animation CSS3 permet à un élément de passer progressivement d’un style à un autre. Vous pouvez modifier autant de propriétés CSS que vous le souhaitez. Veuillez vous référer au nôtre Astuces CSS Article pour plus d’informations sur l’animation CSS.

Comment créer une barre de progression en CSS simple?

Les barres de progression peuvent être créées en CSS pur ou en une combinaison de CSS et de jQuery. Vous pouvez consulter le nôtre Barre de progression CSS Tutoriel pour l’inspiration.



Source link

Recent Posts