Reemplazar Spinner con un logotipo

Soporte
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

1 me gusta
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;
}
6 Me gusta
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.

1 me gusta
4

Solo quería intervenir aquí con nuestro ‘spinner’ personalizado. Pero como somos una comunidad de gráficos 3D, tuvimos que llevarlo a otra dimensión :slight_smile: ¡Míralo en https://blenderartists.org/!

3 Me gusta
5

Aquí hay otro:

3 Me gusta
6

Mi icono de carga es un GIF, pero me gustaría saber si alguien ha creado un componente de tema para personalizar el código HTML de carga.

1 me gusta
7

Para añadir un poco de diversión, decidimos desafiar a nuestra comunidad a diseñar nuevos spinners; cambiaremos la animación aproximadamente una vez al mes.

El primero que seleccionamos representa el proceso de renderizado en Blender:

Edición: ¡ups!, meta convierte los GIFs subidos a JPG :-/ Haz clic aquí para ver el original (o visita nuestro sitio para verlo en acción).

2 Me gusta
8

Eso podría interesar a las personas que visitan este tema: