Standardny spinner Contact Form 7 bezbłędnie rozpoznaje się na pierwszy rzut oka. Szara strzałka, nieskończone obracanie i od razu wiadomo: strona działa na standardowych ustawieniach. Design ma dziesięć lat, a preloader wszystkie dwadzieścia.

Ale nie musi Pan/Pani się z tym godzić. Mechanizm podmiany spinnera jest wbudowany w sam framework CSS wtyczki, bez edycji kodu źródłowego, bez ryzyka utraty zmian podczas automatycznej aktualizacji. Trzy snippety, pięć minut i formularz wygląda tak, jak założono w makiecie.

💡 Szybki przegląd:

• Ukrywamy fabryczną animację przez display: none na .wpcf7-spinner::before
• Ustawiamy własny GIF jako tło lub rysujemy spinner w czystym CSS
• Wyśrodkowujemy preloader przez flexbox, bez !important i hacków
• Bierzemy gotową animację z loading.io, Icons8 lub CSS Loaders
• Dla wersji poniżej piątej, przestarzały hook wpcf7_ajax_loader w functions.php

Jak działa preloader w CF7 obecnie

Contact Form 7 żyje w wersji 6.1.6, a mechanika spinnera z piątej gałęzi nie zmieniła się. Żadnego <img src="ajax-loader.gif"> już nie ma. Przeglądarka rysuje strzałkę sama, przez ::before wewnątrz <span class="wpcf7-spinner">. Żadnego zewnętrznego pliku, natychmiastowe renderowanie.

Stary selektor div.wpcf7 .ajax-loader jest martwy. Wszystkie instrukcje z epoki CF7 4.6, do archiwum. Teraz wszystko jest prostsze: nadpisaliśmy tło w .wpcf7-spinner, ukryliśmy pseudoelement, gotowe.

Przy okazji odpadła potrzeba hooka wpcf7_ajax_loader. Żadnego więcej functions.php do podmiany strzałki, czysty CSS, trzy linijki.

Zmieniamy spinner przez CSS: krok po kroku

Załóżmy, że ma Pan/Pani plik custom-spinner.gif w folderze images motywu potomnego. Dwa kroki i fabryczna strzałka znika.

Najpierw gasimy wbudowaną animację. Selektor trafia dokładnie w pseudoelement, niczego zbędnego nie rusza:

1
/* Скрываем дефолтный спинер CF7 */
2
.wpcf7-spinner::before {
3
    display: none;
4
}

Teraz wieszamy własny GIF jako tło na samym <span>:

1
/* Подставляем кастомный прелоадер */
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
}

Oba bloki trafiają do style.css motywu potomnego. Ścieżka: „Appearance → Theme File Editor" lub „Appearance → Customize → Additional CSS". Plików samej wtyczki proszę nie ruszać, przy pierwszej aktualizacji zmiany wylecą.

Szerokość i wysokość proszę dopasować do rozmiaru swojego GIF-a. Przezroczysty spinner na ciemnym formularzu? Proszę usunąć background-color, nie jest tam potrzebny.

Animacja CSS bez plików: czysty pierścień

GIF generuje żądanie HTTP i pikseluje na retina. Nowoczesne podejście to rysowanie spinnera siłami przeglądarki. border plus @keyframes dają idealną ostrość w każdej rozdzielczości. Żadnych plików, natychmiastowe ładowanie, pełna kontrola nad kolorem.

Oto podwójny pierścień z akcentowym kolorem marki:

1
/* Прячем заводскую стрелку */
2
.wpcf7-spinner::before {
3
    display: none;
4
}
5
 
6
/* Рисуем внешнее кольцо */
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
/* Внутреннее кольцо — акцентный цвет */
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
}

Kolory, Państwa. #262b2e i #FF3D00 proszę zastąpić parą markową. Grubość linii 2px, pełny obrót w sekundę. Jeśli chce Pan/Pani szybciej, proszę zmniejszyć 1s do 0.6s. Wolniej, 1.5s.

Wyśrodkowujemy preloader

Domyślnie spinner przykleja się do lewej krawędzi przycisku wysyłania. Na szerokości mobilnej jest to niezauważalne, ale na desktopie, niechlujne. Rozwiązuje się to flexboxem w dwóch regułach:

1
/* Flex-контейнер для формы */
2
.wpcf7 form {
3
    display: flex;
4
    flex-wrap: wrap;
5
    justify-content: center;
6
}
7
 
8
/* Центрирование спиннера */
9
.wpcf7-spinner {
10
    margin: 10px auto 0 auto;
11
}

Pierwsza reguła przekształca formularz w kontener flex z wyrównaniem do środka. Druga daje spinnerowi odstęp od góry i automatycznymi marginesami dociska go do środka wiersza. Żadnych float: inherit !important, żadnych ujemnych margin-bottom, wszystko trzyma się czysto i nie psuje się przy zmianie motywu.

Jeśli formularz jest złożony i flex-wrap: wrap rozbija układ pól, proszę owinąć spinner w osobny <div> z text-align: center. Ale w dziewięciu przypadkach na dziesięć wariant flexboxowy wystarcza.

Skąd wziąć gotową animację

ajaxload.info, który polecano we wszystkich starych poradnikach, został zamknięty. Trzy żywe alternatywy:

• loading.io, konstruktor spinnerów. Wybiera Pan/Pani kształt, kolor, rozmiar. Eksport do GIF, SVG, CSS i APNG. Darmowych wariantów wystarczy do formularza kontaktowego.
• Icons8 Preloaders, kolekcja ponad tysiąca ikon: pierścienie, paski, kropki, warianty trójwymiarowe. Generator udostępnia GIF, SVG i APNG. Część jest darmowa z atrybucją, część premium.
• CSS Loaders, czyste spinner CSS bez ani jednego zewnętrznego pliku. Wybiera Pan/Pani ten, który się podoba, kopiuje HTML+CSS, dostosowuje pod .wpcf7-spinner. Idealne dla tych, którzy z zasady nie chcą ładować ani jednego kilobajta.

Proszę wybrać spinner na przezroczystym tle, wpasuje się w formularz w każdym kolorze. Optymalny rozmiar to 24×24 lub 32×32 piksele. Mniejszy migocze, większy odciąga uwagę od przycisku wysyłania.

Co z wersjami poniżej 5.x: metoda deprecated

Jeśli strona nadal działa na CF7 4.x, proszę zaktualizować wtyczkę. Poważnie. Aktualna wersja 6.1.6 załatała mnóstwo luk w zabezpieczeniach, a stary hook wpcf7_ajax_loader w każdej chwili może przestać działać. Twórca nie gwarantuje kompatybilności wstecznej.

Jeśli jednak aktualizacja jest niemożliwa (niestandardowy kod jest sztywno powiązany ze starymi hookami), oto metoda przez functions.php:

1
// Замена прелоадера CF7 для версий ≤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
}

Kod umieszcza się w functions.php motywu potomnego. Plik ajax-loader.gif wcześniej ładuje się do images/ wewnątrz motywu potomnego. Dla motywu potomnego: stylesheet_directory. Dla motywu nadrzędnego: template_directory.

I tak proszę zaktualizować przy pierwszej okazji.

Żywy przykład na wideo

Na poniższym wideo pełna analiza: jak wygląda problem z nieskończonym kręceniem się spinnera, dlaczego stare instrukcje nie działają i jak to naprawić w dwie minuty przez CSS:

⁉️🤔 Często zadawane pytania

Dlaczego CSS nie jest stosowany, spinner się nie zmienia?

Prawie na pewno celuje Pan/Pani w stary selektor div.wpcf7 .ajax-loader. Od piątej wersji jest on nieskuteczny. Trzeba uderzać w .wpcf7-spinner::before (ukryć domyślny) i .wpcf7-spinner (podpiąć swój). Proszę sprawdzić wersję wtyczki: „Plugins → Installed Plugins → Contact Form 7". Proszę otworzyć DevTools (F12), znaleźć w Elements <span class="wpcf7-spinner"> wewnątrz formularza. Jeśli ma on pseudoelement ::before z borderem, jest Pan/Pani na aktualnej wersji, proszę użyć selektorów z rozdziału o CSS. Jeśli widzi Pan/Pani <img> z klasą ajax-loader, wtyczka jest beznadziejnie przestarzała.

Czy można zrobić spinner gradientowy lub wielokolorowy?

Tak, bez ani jednego piksela grafiki. Podstawowy spinner CSS z rozdziału o animacji obsługuje dowolne kolory przez border-top i border-bottom. Dla gradientu proszę zastąpić jednolity kolor przez conic-gradient w masce. Przykład pierścienia z przejściem czerwony-żółty-zielony:

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
}

Działa w nowoczesnych przeglądarkach. Grubość pierścienia ustawia się w mask przez calc().

Jak całkowicie usunąć spinner?

Jedna linijka: .wpcf7-spinner { display: none !important; }. Proszę jednak pomyśleć dwa razy. Spinner to jedyny sygnał dla użytkownika, że formularz został wysłany i serwer przetwarza żądanie. Bez niego osoba kliknie „Wyślij" ponownie i otrzyma Pan/Pani duplikat zgłoszenia. Lepiej nie usuwać, tylko zastąpić minimalistycznym pierścieniem w neutralnym kolorze.

Czy niestandardowy spinner wpływa na szybkość ładowania?

Zależy od metody. GIF o wadze 2-5 KB dodaje jedno żądanie HTTP, na szybkość strony praktycznie to nie wpływa. Spinner CSS nie dodaje ani żądania, ani bajta ponad 300-400 bajtów kodu, to najszybsza opcja. SVG w base64 wewnątrz CSS również bez żądania, ale waży 1-2 KB. Dla formularza kontaktowego różnica między trzema metodami jest niezauważalna gołym okiem. Animacja CSS wygrywa pod każdym względem: nie ma plików, nie pikseluje, nie zaśmieca biblioteki mediów.

Gdzie przechowywać plik spinnera, aby nie stracić go podczas aktualizacji motywu?

Tylko w motywie potomnym. Jeśli umieści Pan/Pani custom-spinner.gif w motywie nadrzędnym, podczas jego aktualizacji plik zniknie. Prawidłowa struktura:

1
/wp-content/themes/
2
  your-theme/
3
  your-theme-child/
4
    style.css          ← сюда CSS
5
    images/
6
      custom-spinner.gif  ← сюда файл

W CSS ścieżkę proszę zapisywać bez ukośnika na początku: url('images/custom-spinner.gif'). Jest to ścieżka względna od pliku stylów motywu potomnego. Ścieżki bezwzględne w rodzaju /wp-content/themes/... przestają działać, gdy strona zmienia domenę.

Którą metodę zastępowania wybrać dla siebie

Trzy scenariusze, według rosnącej złożoności i możliwości dostosowania.

Dla dziewięciu na dziesięć stron internetowych pierwszy scenariusz w zupełności wystarczy. Bierze Pan/Pani gotowy spinner z loading.io, wrzuca do motywu potomnego, dopisuje trzy linijki CSS i domyślna strzałka już nigdy nie zdradzi Pana/Pani strony.