El spinner estándar de Contact Form 7 se reconoce al instante. Una flecha gris, rotación infinita, y enseguida queda claro: el sitio funciona con los ajustes predeterminados. El diseño tiene diez años, y el preloader, veinte.

Pero no tiene por qué conformarse con esto. El mecanismo de reemplazo del spinner está integrado en el propio framework CSS del plugin, sin editar archivos fuente, sin riesgo de perder los cambios durante las actualizaciones automáticas. Tres fragmentos de código, cinco minutos, y el formulario se ve exactamente como se diseñó en la maqueta.

💡 Resumen rápido:

• Oculte la animación estándar mediante display: none en .wpcf7-spinner::before
• Agregue su propio GIF como fondo o dibuje un spinner con CSS puro
• Centre el preloader con flexbox, sin !important ni trucos
• Obtenga una animación lista para usar de loading.io, Icons8 o CSS Loaders
• Para versiones inferiores a la cinco, el hook obsoleto wpcf7_ajax_loader en functions.php

Cómo funciona ahora el preloader de CF7

Contact Form 7 está actualmente en la versión 6.1.6, y la mecánica del spinner no ha cambiado desde la versión cinco. Se acabó el <img src="ajax-loader.gif">. El navegador dibuja la flecha por sí mismo mediante ::before dentro de <span class="wpcf7-spinner">. Sin archivos externos, renderizado instantáneo.

El antiguo selector div.wpcf7 .ajax-loader está obsoleto. Todas las instrucciones de la era CF7 4.6 pertenecen al archivo. Ahora todo es más simple: sobrescriba el fondo en .wpcf7-spinner, oculte el pseudoelemento, y listo.

Esto también eliminó la necesidad del hook wpcf7_ajax_loader. Se acabó el functions.php para reemplazar la flecha, CSS puro, tres líneas.

Cambiar el spinner mediante CSS: paso a paso

Supongamos que tiene custom-spinner.gif en la carpeta images de su tema hijo. Dos pasos, y la flecha estándar desaparece.

Primero, desactive la animación integrada. El selector apunta precisamente al pseudoelemento, nada más se ve afectado:

1
/* Hide default CF7 spinner */
2
.wpcf7-spinner::before {
3
    display: none;
4
}

Ahora adjunte su propio GIF como fondo al <span> en sí:

1
/* Insert custom preloader */
2
.wpcf7-spinner {
3
    background-image: url('images/custom-spinner.gif');
4
    width: 24px;
5
    height: 24px;
6
    margin-left: 10px;
7
    background-size: contain;
8
    background-repeat: no-repeat;
9
    background-position: center;
10
}

Ambos bloques van en el style.css de su tema hijo. Ruta: «Apariencia → Editor de archivos del tema» o «Apariencia → Personalizar → CSS adicional». No toque los archivos del plugin en sí; sus cambios se perderán en la primera actualización.

Ajuste el ancho y la altura para que coincidan con el tamaño de su GIF. ¿Spinner transparente en un formulario oscuro? Elimine background-color; ahí no es necesario.

Animación CSS sin archivos: anillo puro

Un GIF requiere una solicitud HTTP y se pixeliza en pantallas retina. El enfoque moderno es dibujar el spinner usando el navegador. border más @keyframes ofrecen una nitidez perfecta a cualquier resolución. Sin archivos, carga instantánea, control total sobre el color.

Aquí tiene un anillo doble con un color de marca de acento:

1
/* Hide default arrow */
2
.wpcf7-spinner::before {
3
    display: none;
4
}
5
 
6
/* Draw outer ring */
7
.wpcf7-spinner {
8
    width: 24px;
9
    height: 24px;
10
    border-radius: 50%;
11
    display: inline-block;
12
    border-top: 2px solid #262b2e;
13
    border-right: 2px solid transparent;
14
    box-sizing: border-box;
15
    animation: cf7-spin 1s linear infinite;
16
    background-color: inherit;
17
}
18
 
19
/* Inner ring — accent color */
20
.wpcf7-spinner::after {
21
    content: '';
22
    box-sizing: border-box;
23
    position: absolute;
24
    left: 0;
25
    top: 0;
26
    width: 24px;
27
    height: 24px;
28
    border-radius: 50%;
29
    border-bottom: 2px solid #FF3D00;
30
    border-left: 2px solid transparent;
31
}
32
 
33
@keyframes cf7-spin {
34
    0%   { transform: rotate(0deg); }
35
    100% { transform: rotate(360deg); }
36
}

Use sus propios colores. Reemplace #262b2e y #FF3D00 con su par de marca. El grosor de línea es 2px, rotación completa en un segundo. ¿Lo quiere más rápido? Reduzca 1s a 0.6s. ¿Más lento? 1.5s.

Centrar el preloader

Por defecto, el spinner se pega al borde izquierdo del botón de envío. En anchos móviles esto pasa desapercibido, pero en escritorio se ve descuidado. Se soluciona con flexbox en dos reglas:

1
/* Flex container for the form */
2
.wpcf7 form {
3
    display: flex;
4
    flex-wrap: wrap;
5
    justify-content: center;
6
}
7
 
8
/* Centering the spinner */
9
.wpcf7-spinner {
10
    margin: 10px auto 0 auto;
11
}

La primera regla convierte el formulario en un contenedor flex con alineación central. La segunda le da al spinner margen superior y márgenes automáticos para empujarlo al centro de la fila. Nada de float: inherit !important, nada de margin-bottom negativo; todo se mantiene limpio y no se rompe al cambiar de tema.

Si el formulario es complejo y flex-wrap: wrap rompe la disposición de los campos, envuelva el spinner en un <div> separado con text-align: center. Pero nueve de cada diez veces el enfoque con flexbox es suficiente.

Dónde conseguir animaciones listas para usar

ajaxload.info, que se recomendaba en todas las guías antiguas, ha cerrado. Tres alternativas activas:

• loading.io, un constructor de spinners. Usted elige forma, color, tamaño. Exporta a GIF, SVG, CSS y APNG. Las opciones gratuitas son más que suficientes para un formulario de contacto.
• Icons8 Preloaders, una colección de más de mil iconos: anillos, barras, puntos, variantes 3D. El generador produce GIF, SVG y APNG. Algunos son gratuitos con atribución, otros son premium.
• CSS Loaders, spinners en CSS puro sin un solo archivo externo. Elija el que le guste, copie el HTML+CSS, adáptelo para .wpcf7-spinner. Perfecto para quienes fundamentalmente no quieren cargar ni un solo kilobyte.

Consiga un spinner con fondo transparente; encajará en un formulario de cualquier color. El tamaño óptimo es de 24×24 o 32×32 píxeles. Los más pequeños parpadean, los más grandes desvían la atención del botón de envío.

¿Qué pasa con las versiones anteriores a la 5.x?: método obsoleto

Si su sitio todavía usa CF7 4.x, actualice el plugin. En serio. La versión actual 6.1.6 ha cerrado numerosas vulnerabilidades, y el viejo hook wpcf7_ajax_loader puede dejar de funcionar en cualquier momento. El desarrollador no garantiza compatibilidad hacia atrás.

Pero si actualizar es imposible (código personalizado está fuertemente ligado a hooks antiguos), aquí tiene el método mediante functions.php:

1
// Replacing CF7 preloader for versions ≤4.x — deprecated
2
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
3
function my_wpcf7_ajax_loader() {
4
    return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
5
}

El código va en el functions.php de su tema hijo. El archivo ajax-loader.gif se sube previamente a images/ dentro del tema hijo. Para tema hijo: stylesheet_directory. Para tema padre: template_directory.

Y aun así, actualice en la primera oportunidad.

Ejemplo en vivo en video

El video a continuación muestra un recorrido completo: cómo se ve el problema del spinner que gira sin fin, por qué las instrucciones antiguas no funcionan y cómo solucionarlo en dos minutos mediante CSS:

⁉️🤔 Preguntas frecuentes

¿Por qué no se aplica el CSS, el spinner no cambia?

Es casi seguro que está apuntando al selector antiguo div.wpcf7 .ajax-loader. Desde la versión cinco es inútil. Necesita apuntar a .wpcf7-spinner::before (para ocultar el predeterminado) y a .wpcf7-spinner (para adjuntar el suyo). Verifique la versión del plugin: «Plugins → Plugins instalados → Contact Form 7». Abra DevTools (F12), busque en Elements <span class="wpcf7-spinner"> dentro del formulario. Si tiene un pseudoelemento ::before con un borde, está en la versión actual; use los selectores de la sección CSS. Si ve un <img> con la clase ajax-loader, el plugin está irremediablemente desactualizado.

¿Puedo hacer el spinner con degradado o multicolor?

Sí, sin un solo píxel de gráficos. El spinner CSS básico de la sección de animación acepta cualquier color mediante border-top y border-bottom. Para un degradado, sustituya el color sólido por conic-gradient en una máscara. Ejemplo de un anillo con transición rojo-amarillo-verde:

1
.wpcf7-spinner {
2
    background: conic-gradient(#FF3D00, #FFC107, #00C853, #FF3D00);
3
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
4
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
5
    animation: cf7-spin 1s linear infinite;
6
}

Funciona en navegadores modernos. El grosor del anillo se ajusta en mask mediante calc().

¿Cómo elimino completamente el spinner?

Una línea: .wpcf7-spinner { display: none !important; }. Pero piénselo dos veces. El spinner es la única señal para el usuario de que el formulario se envió y el servidor está procesando la solicitud. Sin él, la persona hará clic en «Enviar» de nuevo y usted obtendrá un envío duplicado. Es mejor no eliminarlo, sino reemplazarlo por un anillo minimalista en un color neutro.

¿Un spinner personalizado afecta la velocidad de carga?

Depende del método. Un GIF de 2-5 KB añade una solicitud HTTP, lo que prácticamente no tiene impacto en la velocidad de la página. Un spinner CSS no añade ni una solicitud ni un byte más allá de 300-400 bytes de código (la opción más rápida). SVG en base64 dentro de CSS tampoco requiere solicitud, pero pesa 1-2 KB. Para un formulario de contacto, la diferencia entre los tres métodos es invisible al ojo humano. La animación CSS gana en todos los aspectos: sin archivos, sin pixelado, no satura la biblioteca de medios.

¿Dónde debo guardar el archivo del spinner para no perderlo durante las actualizaciones del tema?

Solo en el tema hijo. Ponga custom-spinner.gif en el tema padre y, cuando se actualice, el archivo desaparecerá. Estructura correcta:

1
/wp-content/themes/
2
  your-theme/
3
  your-theme-child/
4
    style.css          ← CSS goes here
5
    images/
6
      custom-spinner.gif  ← file goes here

En CSS escriba la ruta sin barra inicial: url('images/custom-spinner.gif'). Esta es una ruta relativa desde el archivo de estilo del tema hijo. Las rutas absolutas como /wp-content/themes/... se rompen al migrar el sitio a un dominio diferente.

Qué método de reemplazo elegir para su caso

Tres escenarios, en orden de complejidad creciente y opciones de personalización.

Para nueve de cada diez sitios el primer escenario es suficiente. Tome un spinner ya listo de loading.io, colóquelo en el tema hijo, escriba tres líneas de CSS y la flecha predeterminada nunca más delatará su sitio.