Remplacer le Spinner par un logo

Soutien
1

How can I replace a generic spinner with a logo?
Here is the CSS code

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    background-color: #ffffff;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

I would like to replace the generic white cube with a logo. Any suggestions?
Thanks

2

Avoid repositioning; you simply need to overwrite the current icon, so add the background-image and the background-size.

.spinner {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
    background-image: url("URL-of-your-logo-image-here");
    background-size: 40px 40px;
}
3

Thanks! Let me play with the code and see if can make it work.

The website is lajollacreative.com still a work in progress.

4

Je voulais juste intervenir ici avec notre « spinner » personnalisé. Mais comme nous sommes une communauté de graphisme 3D, nous avons dû le porter à une autre dimension :slight_smile: Jetez un coup d’œil sur https://blenderartists.org/

5

En voici un autre :

6

Mon icône de chargement est un GIF, mais je serais intéressé de savoir si quelqu’un a créé un composant de thème pour personnaliser le code HTML de chargement.

7

Pour ajouter un peu de plaisir supplémentaire, nous avons décidé de défier notre communauté pour concevoir de nouveaux spinners. Nous changerons l’animation environ une fois par mois.

Le premier que nous avons sélectionné représente le processus de rendu dans Blender :

Édition : oups, le système convertit les GIFs uploadés en JPG :-/ Cliquez ici pour voir l’original (ou visitez notre site pour le voir en action).

8

Cela pourrait intéresser les personnes qui visitent ce sujet :