Spinner durch ein Logo ersetzen

Unterstützung
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

Ich wollte hier nur unseren benutzerdefinierten ‘Spinner’ einbringen. Da wir jedoch eine 3D-Grafik-Community sind, mussten wir es in eine andere Dimension heben :slight_smile: Schaut es euch auf https://blenderartists.org/ an.

5

Hier ist noch eine:

6

Mein Lade-Icon ist ein GIF, aber ich würde gerne wissen, ob jemand bereits eine Theme-Komponente erstellt hat, um den HTML-Code für das Laden anzupassen.

7

Für ein bisschen zusätzlichen Spaß haben wir uns entschieden, unsere Community herauszufordern, neue Spinner zu entwerfen. Wir werden die Animation etwa einmal im Monat ändern.

Der erste, den wir ausgewählt haben, stellt den Rendering-Prozess in Blender dar:

Edit: Oops, Meta wandelt hochgeladene GIFs in JPGs um :-/ Klicken Sie hier, um das Original zu sehen (oder besuchen Sie unsere Website, um es in Aktion zu sehen).

8

Das könnte Leute interessieren, die in dieses Thema hineinkommen: