Simplification Animation

Hello la Alsateam,

Petite question du jour (enfin du soir plutôt)

J'ai réussi à faire une petite animation comme je voulais, c'est à dire 4 arcs de cercle qui tournent. C'est pour faire patienter sur une des mes pages qui nécessite du temps de chargement ( un groooos ajax ), ça dure entre 2 et 5s.

Donc visuellement ça me plait assez ( oui je ne suis pas difficile ), par contre ça me parait bien lourd niveau code ...

https://codepen.io/stryk/pen/VwKpjEJ

Si quelqu'un a une idée pour alléger tout ça et garder sensiblement le même rendu je suis preneur de tout explication.

Bonne soirée et merci de votre aide.

Salut !

Voila une proposition pour réduire un peu le nombre de div et de class. J'ai pas été jusqu'à utiliser les ::before et ::after je suis pas fan.

<div class="circle" id="circle1"></div>
<div class="circle" id="circle2"></div>
<div class="circle" id="circle3"></div>
<div class="circle" id="circle4"></div>

.circle {
	position: fixed;
	top: 0;
  bottom: 0;
	left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

#circle1 {
	border: solid 5px #FE8702;
	border-top-color: transparent;
	height: 70px;
	width: 70px;
  transform: rotate(34deg);
	animation: rotate 2s infinite linear;
}

#circle2 {
	border: solid 5px #F4662C;
	border-top-color: transparent;
	height: 100px;
	width: 100px;
  transform: rotate(117deg);
	animation: rotate 5s infinite linear;
}

#circle3 {
	border: solid 5px #EC494F;
	border-top-color: transparent;
	height: 130px;
	width: 130px;
  transform: rotate(241deg);
	animation: rotate 3s infinite linear;
}

#circle4 {
	border: solid 5px #E52F6F;
	border-top-color: transparent;
	height: 160px;
	width: 160px;
  transform: rotate(301deg);
	animation: rotate 6s infinite linear;
}

@keyframes rotate {
  0%    { transform: rotate(0deg);  }
	100%  { transform: rotate(360deg);  }
}

https://codepen.io/undless/pen/zYKZoxG

Bonne nuit !
Modifié par _laurent (15 Dec 2020 - 02:01)

Hello les zamis,

Merci pour vos réponses instructives !!

@Laurent: oui effectivement y'a moins de DIV par contre au lancement de la page on se retrouve avec les arcs de cercle en position d'origine, les ouvertures en haut ( sans les rotate, car on ne peux pas attribuer un transform 2x à un éléments il me semble ). C'est pour ça que j'avais mis une DIV juste pour ça, pour qu'au départ on soit dans une configuration visuellement sympa.

@gcyrillus: ah oui pour être moins intuitif
Il faut que je décortique un peu plus ton code c'est très intéressant, je ne me rappelais plus le coup du delay négatif !!

stryk a écrit :
@Laurent: oui effectivement y'a moins de DIV par contre au lancement de la page on se retrouve avec les arcs de cercle en position d'origine, les ouvertures en haut ( sans les rotate, car on ne peux pas attribuer un transform 2x à un éléments il me semble ). C'est pour ça que j'avais mis une DIV juste pour ça, pour qu'au départ on soit dans une configuration visuellement sympa.

Effectivement. Pour rester dans ma solution je te propose alors d'alterner le border transparent (top left bottom right) sur chacun des cercles. La position de départ ne restant pas longtemps on ne remarque quasiment pas selon moi cet alignement :

#circle1 {
	border: solid 5px #FE8702;
	border-top-color: transparent;
	height: 70px;
	width: 70px;
	animation: rotate 2s infinite linear;
}

#circle2 {
	border: solid 5px #F4662C;
	border-left-color: transparent;
	height: 100px;
	width: 100px;
	animation: rotate 5s infinite linear;
}

#circle3 {
	border: solid 5px #EC494F;
	border-bottom-color: transparent;
	height: 130px;
	width: 130px;
	animation: rotate 3s infinite linear;
}

#circle4 {
	border: solid 5px #E52F6F;
	border-right-color: transparent;
	height: 160px;
	width: 160px;
	animation: rotate 6s infinite linear;
}

https://codepen.io/undless/pen/zYKZoxG

mais je te l'accorde on est pas sur du rotate de 301deg hahaha
Modifié par _laurent (15 Dec 2020 - 12:03)

stryk a écrit :
EDIT: Petite question subsidiaire:
J'ai remarque aussi que si j'applique une règle border-top-color à une CLASS, l'élément ne le prend pas en compte, il faut appliquer la règle à l'élément par l'ID pour que ça fonctionne ...
Une idée ?

Oui. C'est toujours une question de poids de sélecteur.
Tu a un id qui défini le border et la classe qui défini le border-color.
L'ID a plus de poid que la classe et comme border contient aussi border-color alors il l'écrase.
Pour bien procéder tu peux soit mettre des classes à la place des id (class vs class il faudra juste que le border-color soit déclaré après le border dans le CSS), soit que dans tes déclarations tu sépare les éléments ainsi :

.class {
    border-color: red;
}
#id {
    border-style: solid;
    border-width: 4px;
}

De cette facon même si l'ID écrase le reste, la propriété border-color n'est pas touchée.

Bonne aprem !

Ahhhh ok ok je comprends mieux maintenant !!!
Un grand merci pour cet éclairage !

Pour la simplification de mon CSS je regarde encore

_laurent a écrit :

...
oooook https://media.giphy.com/media/l0NwHXQy3kUSfFF60/giphy.gif
...

Bonne journée !

ça je kiff aussi , je ne sais pas comment tu les trouves ...

stryk a écrit :

@gcyrillus: ah oui pour être moins intuitif ....

pour régler les animations, comme elles sont imbriquées ...

la première(extérieur) à 6 secondes comme ton code.
puis pour le réglage des autres :
un reset à zéro ... tout le monde tourne ensemble,
* pour accélérer de deux fois par exemple, la seconde à 12s ,
* pour ralentir une rotation , idem on part de zéro avec animation-direction:reverse puis , plus la durée est courte , plus la rotation inverse est rapide . pour une vitesse divisée par deux ... et bien c'est la même valeur que celle du parent .
* Pour ensuite repartir sur une vitesse égale ou supérieur sur l'enfant, on repasse en animation-direction:normal .

En gros chaque vitesse d'animation se recale sur celle du parent (qui fait visuellement référence).

0s , c'est synchro avec le parent ... en gros.


Je me suis permis une modif avec le text loading et un filtre basé sur ton animation initiale : https://codepen.io/gc-nomade/pen/poEerYq
Modifié par gcyrillus (15 Dec 2020 - 21:23)

Waaaa c'est vraiment sympa, joli travail j'adore !!!
Oui j'avais fini par bien comprendre ton code, c'est lisible en fait !

Sinon c'est pour un rendu sobre, ça va sur mon scrapper 'covid19':
http://olivier.maison.perso.free.fr/covid19/?country=france

Au départ j'avais mis un gif mais c'est plus fun en CSS.

Je vais mettre tout ça en pratique, un grand merci à vous 2 pour les idées et pour mon apprentissage

Salut les gars,
Chouettes propositions, c'est vraiment cool de voir les deux approches. Je serai parti sur la même approche que Laurent, mais je trouve le coté imbriqué de gcyrillus beaucoup plus malin. Après coup, je me demande si un svg ne serait pas mieux au final… Un avis la dessus ?

Voilà pour l'exemple. Je ne sais pas si c'est réellement mieux, mais ça te fera au moins une troisième solution

Hello Yordi,

AH oui c'est très sympa aussi avec un SVG !!!
Il faut vraiment que je m'entraine avec ça ( et tellement d'autres choses je suis une quiche en CSS )

Du coup y'a trop de propositions
Après je pense que l'exemple des 4 cercles n'est pas très significatif, et c'est avec des projets plus complexes qu'il serait judicieux de choisir telle ou telle méthode, parce que chacune à ses avantages et inconvénients. ça me fait une bonne base d'approche pour le futur et ça c'est fun.

Dans l'idéal:
_ Je vais commencer par raccourcir mon code avec les explications de Laurent
_ M'entrainer à l'imbrication comme gcyrillus parce que c'est très intéressant
_ Et le SVG ça peut vraiment être puissant pour des animations plus complexes et c'est surtout beaucoup moins gourmand en ressource que CANVAS ( pour ce qu'il est possible de faire en pure CSS je parle )

Vraiment MERCI à vous pour ces exemples et explications qui me font bosser le front !
( je suis full back en ce moment et notamment sur un projet perso de serveur domotique embarqué dans un ESP8266 )

Bonne journée messieurs

Yordi a écrit :
Salut les gars,
Chouettes propositions, c'est vraiment cool de voir les deux approches. Je serai parti sur la même approche que Laurent, mais je trouve le coté imbriqué de gcyrillus beaucoup plus malin. Après coup, je me demande si un svg ne serait pas mieux au final… Un avis la dessus ?

Oui, je pense que le SVG est ce qui est de plus approprié ici , on est en plein dans un élément de graphisme.

Nous nous sommes tous focalisé sur l'animation et un morceau de HTML

Cdt

Bonjour,

Jolie question et jolies réponses !

Ci-dessous une adaptation de la solution de Yordi (à base de SVG qui me semble à moi aussi la plus indiquée), facilement configurable : https://jsfiddle.net/parsimonhi/oL6xcmnd/

Amicalement,