gif animé searching.gif #4380

L'image searching.gif (https://core.spip.net/projects/spip/repository/changes/spip/prive/themes/spip/images/searching.gif , qu'on voit là : http://contrib.spip.net/prive/themes/spip/images/searching.gif ) apparaît notamment sur la barre de titre rose tyrien du message central lors d'une mise à jour de SPIP, et elle est assez moche : mal centrée dans la barre de titre, c'est un peu un pâté de pixel... comme un vieux gif animé.

Peut être y aurait le moyen d'une animation plus moderne, en svg éventuellement ?

L'image searching.gif (https://core.spip.net/projects/spip/repository/changes/spip/prive/themes/spip/images/searching.gif , qu'on voit là : http://contrib.spip.net/prive/themes/spip/images/searching.gif ) apparaît notamment sur la barre de titre rose tyrien du message central lors d'une mise à jour de SPIP, et elle est assez moche : mal centrée dans la barre de titre, c'est un peu un pâté de pixel... comme un vieux gif animé. Peut être y aurait le moyen d'une animation plus moderne, en svg éventuellement ?

There is no content yet.

oui il faudrait faire mieux et remplacer ça par un loader css... Je vois bien le logo Spip avec le S qui tourne ou qui bouge...
Version cible mise à 4.0

oui il faudrait faire mieux et remplacer ça par un loader css... Je vois bien le logo Spip avec le S qui tourne ou qui bouge... **Version cible mise à 4.0**

C'est une mission pour tcharlss ça :)
Assigné à tcharlss

C'est une mission pour tcharlss ça :) **Assigné à tcharlss**

Bon donc on a 2 bonnes solutions :

le loader purement CSS : je suis parti de celui de Lea Verou https://lea.verou.me/2013/11/cleanest-css-spinner-ever/ dont j'ai retrouvé le code ici https://catswhocode.com/css-spinner/ adapté pour avoir 12 branches, arrondies, ce qui donne ça

Loading…

le loader purement svg qui repose sur https://caniuse.com/svg-smil : je suis parti de https://samherbert.net/svg-loaders/ que j'ai adapté pour retrouver le spinner à 12 branches et ça donne ça pour le spinning.svg

Qu'on peut insérer via un

	[(#CHEMIN{loaders/svg-loaders/spinning.svg}|balise_svg{'Loading...','loader'})]

ou

	[(#CHEMIN{loaders/svg-loaders/spinning.svg}|balise_img{'Loading...','loader'})]

Visuellement le rendu est assez proche entre l'un et l'autre, rien de foufou.

Avantage/inconvénients du loader css :

purement css, juste 3 divs a inserer là ou on en a besoin avec la bonne chaine de langue. Il peut être stylé avec la couleur de l'espace privé (mais pas contextuellement), et dimensionné en em là où on l'utilise. Inconvénients : il faut les css et donc pour le réutiliser dans le public il faut rechoper les styles, donc les proposer aussi dans une css static (notamment si on veut styler dans l'espace prive en fonction de la couleur de preference), donc réutilisation plus laborieuse et migration plus compliquée depuis le searching.gif

Avantage/inconvénients du loader svg :

c'est juste une image, qui s'utilise d'un coup de cuillère à pot n'importe où, et se style en couleur et taille avec un font-size et un color (si on l'insère avec balise_svg, sinon seulement en taille, la couleur étant du coup noire par défaut). La migration depuis le searching.gif est triviale, il suffit de changer le nom du fichier (on peut même par défaut le mettre dans une taille identique).
Par contre le support est un peu moins bon que le loader css

J'ai donc une petite préférence pour la version svg, mais les 2 sont gérables

Bon donc on a 2 bonnes solutions : - le loader purement CSS : je suis parti de celui de Lea Verou https://lea.verou.me/2013/11/cleanest-css-spinner-ever/ dont j'ai retrouvé le code ici https://catswhocode.com/css-spinner/ adapté pour avoir 12 branches, arrondies, ce qui donne ça <pre> <div style="display: inline-block;width: 200px;height: 200px;border:1px solid red;background: yellow;padding: 10px;"> <div class="progress"><div>Loading…</div><div></div></div> </div> <style type="text/css"> `keyframes spin { to { transform: rotate(1turn); } } .progress { position: relative; display: inline-block; width: 1em; height: 1em; margin: 0 .1em; font-size: 2em; text-indent: 999em; overflow: hidden; animation: spin 1s infinite steps(12); } .progress:before, .progress:after, .progress > div:before, .progress > div:after { content: ''; position: absolute; top: 0; left: 0.45em; /* (container width - part width)/2 */ width: .10em; height: 0.30em; border-radius: 45%; background: #000; box-shadow: 0 0.7em rgba(0,0,0,0.15); /* container height - part height */ transform-origin: 50% 0.5em; /* container height / 2 */ } .progress:before { opacity:0.875; } .progress:after { transform: rotate(-30deg); opacity:0.75; } .progress > div:first-child:before { transform: rotate(-60deg); opacity:0.625; } .progress > div:first-child:after { transform: rotate(-90deg); opacity:0.5; } .progress > div:last-child:before { transform: rotate(-120deg); opacity:0.375; } .progress > div:last-child:after { transform: rotate(-150deg); opacity:0.25; } </style> </pre> - le loader purement svg qui repose sur https://caniuse.com/svg-smil : je suis parti de https://samherbert.net/svg-loaders/ que j'ai adapté pour retrouver le spinner à 12 branches et ça donne ça pour le spinning.svg <pre>  <svg width="58" height="58" viewBox="-1 -1 60 60" xmlns="http://www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd"> <g stroke="currentColor" stroke-width="0.1"> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(30 29 29)"> <animate attributeName="fill-opacity" begin="0s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(60 29 29)"> <animate attributeName="fill-opacity" begin="0.1s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(90 29 29)"> <animate attributeName="fill-opacity" begin="0.2s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(120 29 29)"> <animate attributeName="fill-opacity" begin="0.3s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(150 29 29)"> <animate attributeName="fill-opacity" begin="0.4s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(180 29 29)"> <animate attributeName="fill-opacity" begin="0.5s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(210 29 29)"> <animate attributeName="fill-opacity" begin="0.6s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(240 29 29)"> <animate attributeName="fill-opacity" begin="0.7s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(270 29 29)"> <animate attributeName="fill-opacity" begin="0.8s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(300 29 29)"> <animate attributeName="fill-opacity" begin="0.9s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor" transform="rotate(330 29 29)"> <animate attributeName="fill-opacity" begin="1s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> <ellipse cx="29" cy="10" rx="3" ry="10" fill-opacity="0" fill="currentColor"> <animate attributeName="fill-opacity" begin="1.1s" dur="1.2s" values="1;0.925;0.85;0.775;0.7;0.625;0.55;0.475;0.4;0.325;0.25;0.175" calcMode="linear" repeatCount="indefinite" /> </ellipse> </g> </g> </svg> </pre> Qu'on peut insérer via un <pre> [(#CHEMIN{loaders/svg-loaders/spinning.svg}|balise_svg{'Loading...','loader'})] </pre> ou <pre> [(#CHEMIN{loaders/svg-loaders/spinning.svg}|balise_img{'Loading...','loader'})] </pre> Visuellement le rendu est assez proche entre l'un et l'autre, rien de foufou. Avantage/inconvénients du loader css : - purement css, juste 3 divs a inserer là ou on en a besoin avec la bonne chaine de langue. Il peut être stylé avec la couleur de l'espace privé (mais pas contextuellement), et dimensionné en em là où on l'utilise. Inconvénients : il faut les css et donc pour le réutiliser dans le public il faut rechoper les styles, donc les proposer aussi dans une css static (notamment si on veut styler dans l'espace prive en fonction de la couleur de preference), donc réutilisation plus laborieuse et migration plus compliquée depuis le searching.gif Avantage/inconvénients du loader svg : - c'est juste une image, qui s'utilise d'un coup de cuillère à pot n'importe où, et se style en couleur et taille avec un font-size et un color (si on l'insère avec balise_svg, sinon seulement en taille, la couleur étant du coup noire par défaut). La migration depuis le searching.gif est triviale, il suffit de changer le nom du fichier (on peut même par défaut le mettre dans une taille identique). Par contre le support est un peu moins bon que le loader css J'ai donc une petite préférence pour la version svg, mais les 2 sont gérables

Statut changé à En cours

**Statut changé à En cours**

Si on veut rester sur du css, il y a sinon https://webkul.github.io/csspin/ qui semble très bien, et pour le coup avec un markup très léger

intégré en svg donc, apres optimisation
3bc27788bf
695a4b9041
db38b0fbe1

On laisse les gif pour le moment, pour compat, on les supprimera dans une prochaine version
Statut changé à Fermé

intégré en svg donc, apres optimisation https://git.spip.net/spip/spip/commit/3bc27788bf0ebc04b74b78e0b675826c78e1ba24 https://git.spip.net/spip/dump/commit/695a4b9041dc099ce7d08b4c65ed19aead548236 https://git.spip.net/spip/porte_plume/commit/db38b0fbe1a541fd49dae7093624cdad11f2c108 On laisse les gif pour le moment, pour compat, on les supprimera dans une prochaine version **Statut changé à Fermé**

\o/

Pour référence, ce repo propose plein de svg pour ça https://github.com/n3r4zzurr0/svg-spinners

Notamment un version qui ressemble pas mal à celui qu'on utilise et qui ne pèse que 894b au lieu des 2.2kib de l'actuel cf https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/svg/bars-rotate-fade.svg

Pour référence, ce repo propose plein de svg pour ça https://github.com/n3r4zzurr0/svg-spinners Notamment un version qui ressemble pas mal à celui qu'on utilise et qui ne pèse que 894b au lieu des 2.2kib de l'actuel cf https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/svg/bars-rotate-fade.svg

Labels Milestones

gif animé searching.gif #4380