Chargeurs rotatifs dans CSS

Question

Tout d'abord, désolé si le titre est faux parce que je ne sais pas si ceux-ci sont appelés chargeurs rotatifs ou non. Voilà ce que je parle: JSFiddle

J'ai 2 problèmes avec ces chargeurs,

• dans .chrome-chargeur, si je mets height: 50px; width: 50px;, et et .ring-maker mis top: 2.5px; left: 2.5px il ne fonctionne pas très bien. L'unité px prend-elle en charge des valeurs jusqu'à 2 décimales? Je suppose qu'ils ne le font pas. Alors que puis-je faire pour le réparer? Je veux essentiellement faire de la même taille que ceux ci-dessus. Peut-être, une autre unité? Pour .win8-loader J'ai défini cette animation CSS pour le premier point.

  @-webkit-keyframe win8dot1 { 
      0% {left: -10px;} 
      33% {left: 500px;} 
      66% {left: 780px;} 
      100% {left: 1280px;} 
  } 
  

  Mais cela ne fonctionne pas. Le premier point ne bouge même pas.

PS: des noms comme abc1-de2 sont-ils autorisés pour les images-clés?

Answer 1

Vous avez 2 à corriger les problèmes

Votre CSS

.win8-loader .dot1 { -webkit-animation: win8-dot1 2.5s infinite linear; } 

@-webkit-keyframe win8dot1 { 

corrigée:

.win8-loader .dot1 { -webkit-animation: win8dot1 2.5s infinite linear; } 

@-webkit-keyframes win8dot1 {