Sostituisci Spinner con un logo

Supporto
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

Volevo solo aggiungere qui il nostro ‘spinner’ personalizzato. Ma dato che siamo una community di grafica 3D, abbiamo dovuto portarlo in un’altra dimensione :slight_smile: Dai un’occhiata su https://blenderartists.org/

5

Ecco un altro:

6

La mia icona di caricamento è un GIF, ma sarei interessato a sapere se qualcuno ha effettivamente creato un componente tema per personalizzare il codice HTML di caricamento.

7

Per aggiungere un po’ di divertimento, abbiamo deciso di sfidare la nostra comunità a progettare nuovi spinner; cambieremo l’animazione circa una volta al mese.

Il primo che abbiamo selezionato rappresenta il processo di rendering in Blender:

Aggiornamento:ops, il sistema di metadati converte i GIF caricati in JPG :-/ Clicca qui per vedere l’originale (o visita il nostro sito per vederlo in azione).

8

Ciò potrebbe interessare le persone che arrivano in questo argomento: