Tavaline Contact Form 7 spinnerelement on esmapilgul koheselt äratuntav. Hall nool, lõputu pöörlemine ja kohe on selge: sait töötab vaikeseadetel. Disain on kümme aastat vana ja eellaadur kakskümmend.

Kuid sellega ei pea leppima. Spinnerelemendi asendusmehhanism on sisse ehitatud plugin enda CSS-raamistikku, ilma lähtefaile muutmata, ilma riskita kaotada muudatused automaatsete uuenduste käigus. Kolm koodijuppi, viis minutit ja vorm näeb välja täpselt selline, nagu maketis ette nähtud.

💡 Kiirülevaade:

• Peida varuanimatsioon display: none abil .wpcf7-spinner::before elemendil
• Lisa oma GIF taustana või joonista spinner puhta CSS-iga
• Tsentreeri eellaadur flexboxi abil, ilma !important ja häkkideta
• Haara valmis animatsioon saidilt loading.io, Icons8 või CSS Loaders
• Alla viie versiooni puhul aegunud konks wpcf7_ajax_loader failis functions.php

Kuidas CF7 eellaadur praegu töötab

Contact Form 7 on praegu versioonis 6.1.6 ja spinnerelemendi mehaanika pole alates viiendast versioonist muutunud. Ei ole enam <img src="ajax-loader.gif">. Brauser joonistab noole ise, kasutades ::before pseudo-elementi <span class="wpcf7-spinner"> sees. Ei mingeid väliseid faile, kohene renderdamine.

Vana selektor div.wpcf7 .ajax-loader on surnud. Kõik CF7 4.6 ajastu juhised kuuluvad arhiivi. Nüüd on kõik lihtsam: kirjuta .wpcf7-spinner taust üle, peida pseudo-element, valmis.

See kõrvaldas ka vajaduse wpcf7_ajax_loader konksu järele. Ei ole enam vaja functions.php faili noole asendamiseks, puhas CSS, kolm rida.

Spinnerelemendi muutmine CSS-i abil: samm-sammult

Oletame, et sul on custom-spinner.gif oma alamteema images kaustas. Kaks sammu ja varunool kaob.

Esiteks keela sisseehitatud animatsioon. Selektor sihib täpselt pseudo-elementi, mitte midagi muud ei mõjutata:

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

Nüüd kinnita oma GIF taustana <span> elemendi enda külge:

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
}

Mõlemad plokid lähevad sinu alamteema style.css faili. Asukoht: „Välimus → Teemafailide redaktor" või „Välimus → Kohanda → Lisatud CSS". Ärge muutke plugin enda faile; teie muudatused lähevad esimese uuendusega kaotsi.

Kohanda laius ja kõrgus vastavalt oma GIF-i suurusele. Läbipaistev spinner tumedal vormil? Eemalda background-color; seda pole seal vaja.

CSS-animatsioon ilma failideta: puhas ring

GIF nõuab HTTP-päringut ja pikseldub retina-ekraanidel. Kaasaegne lähenemine on joonistada spinner brauseri abil. border pluss @keyframes annavad täiusliku teravuse igal resolutsioonil. Ei mingeid faile, kohene laadimine, täielik kontroll värvi üle.

Siin on topeltrõngas aktsentse brändivärviga:

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
}

Kasuta oma värve. Asenda #262b2e ja #FF3D00 oma brändipaariga. Joone paksus on 2px, täispööre ühe sekundiga. Tahad kiiremini? Vähenda 1s väärtusele 0.6s. Aeglasemalt? 1.5s.

Eellaaduri tsentreerimine

Vaikimisi surub spinner end saatmisnupu vasakusse serva. Mobiililaiusel jääb see märkamatuks, kuid lauaarvutil näeb see lohakas välja. Lahendatud flexboxiga kahe reegliga:

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
}

Esimene reegel muudab vormi flex-konteineriks keskele joondusega. Teine annab spinnerile ülemise veerise ja automaatsed veerised, et lükata see rea keskele. Ei mingit float: inherit !important, ei mingit negatiivset margin-bottom; kõik jääb puhtaks ega purune teema vahetamisel.

Kui vorm on keeruline ja flex-wrap: wrap lõhub väljade paigutuse, mähi spinner eraldi <div> sisse, millel on text-align: center. Kuid üheksal juhul kümnest piisab flexboxi lähenemisest.

Kust saada valmis animatsioone

ajaxload.info, mida soovitati kõigis vanades juhendites, on suletud. Kolm toimivat alternatiivi:

• loading.io, spinneri konstrueerija. Valid kuju, värvi, suuruse. Ekspordi GIF, SVG, CSS ja APNG vormingusse. Tasuta valikuid on kontaktivormi jaoks küllaga.
• Icons8 Preloaders, üle tuhande ikooni kogu: rõngad, ribad, punktid, 3D variandid. Generaator väljastab GIF, SVG ja APNG faile. Osa on tasuta koos viitega, osa on tasulised.
• CSS Loaders, puhtad CSS spinnerid ilma ühegi välise failita. Vali meelepärane, kopeeri HTML+CSS, kohanda see .wpcf7-spinner jaoks. Ideaalne neile, kes põhimõtteliselt ei taha laadida ühtegi kilobaiti.

Hangi läbipaistva taustaga spinner; see sobib igat värvi vormi sisse. Optimaalne suurus on 24×24 või 32×32 pikslit. Väiksemad vilguvad, suuremad tõmbavad tähelepanu saatmisnupult eemale.

Aga versioonid alla 5.x: aegunud meetod

Kui su sait on endiselt CF7 4.x peal, uuenda pluginat. Päriselt. Praegune versioon 6.1.6 on sulgenud hulga turvaauke ja vana wpcf7_ajax_loader konks võib iga hetk lakata töötamast. Arendaja ei taga tagasiühilduvust.

Aga kui uuendamine on võimatu (kohandatud kood on tugevalt vanade konksude küljes kinni), siis siin on meetod functions.php kaudu:

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
}

Kood läheb lapse-teema functions.php faili. Fail ajax-loader.gif laaditakse eelnevalt üles lapse-teema images/ kausta. Lapse-teema puhul: stylesheet_directory. Peateema puhul: template_directory.

Ja uuenda ikkagi esimesel võimalusel.

Video näide

Allolev video näitab täielikku läbimängu: kuidas näeb välja lõputult pöörleva spinneri probleem, miks vanad juhised ei tööta ja kuidas see kahe minutiga CSS-i abil ära parandada:

⁉️🤔 Korduma kippuvad küsimused

Miks CSS ei rakendu, spinner ei muutu?

Peaaegu kindlasti sihid sa vana selektorit div.wpcf7 .ajax-loader. Alates viiendast versioonist on see kasutu. Sa pead sihtima .wpcf7-spinner::before (vaikimisi spinneri peitmiseks) ja .wpcf7-spinner (enda oma lisamiseks). Kontrolli plugina versiooni: „Plugins → Installed Plugins → Contact Form 7". Ava DevTools (F12), otsi Elements vaates vormi seest <span class="wpcf7-spinner">. Kui sellel on ::before pseudoelement äärisega, oled sa praegusel versioonil; kasuta CSS-i jaotise selektoreid. Kui näed <img> elementi klassiga ajax-loader, on plugin lootusetult vananenud.

Kas spinneri saab teha üleminekuvärviga või mitmevärviliseks?

Jah, ilma ühegi graafikapiksli kasutamiseta. Animatsiooni jaotise põhiline CSS spinner võtab vastu mis tahes värve border-top ja border-bottom kaudu. Üleminekuvärvi jaoks asenda tavaline värv conic-gradient abil maskis. Näide punase-kollase-rohelise üleminekuga rõngast:

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
}

Töötab tänapäevastes brauserites. Rõnga paksus määratakse mask sees calc() abil.

Kuidas spinner täielikult eemaldada?

Üks rida: .wpcf7-spinner { display: none !important; }. Aga mõtle kaks korda. Spinner on ainus signaal kasutajale, et vorm saadeti ära ja server töötleb päringut. Ilma selleta klõpsab inimene uuesti nuppu „Saada" ja sa saad topelt saadetise. Parem on seda mitte eemaldada, vaid asendada minimalistliku neutraalset värvi rõngaga.

Kas kohandatud spinner mõjutab laadimiskiirust?

Oleneb meetodist. 2-5 KB GIF lisab ühe HTTP päringu, mis lehe kiirust sisuliselt ei mõjuta. CSS spinner ei lisa ei päringut ega baitigi peale 300-400 baidise koodi (kiireim variant). SVG base64 kujul CSS-i sees ei vaja samuti päringut, kuid kaalub 1-2 KB. Kontaktivormi puhul on kolme meetodi erinevus silmale märkamatu. CSS animatsioon võidab üldarvestuses: pole faile, pole pikseldumist, ei risusta meediateeki.

Kuhu spinneri fail salvestada, et seda teema uuendamisel mitte kaotada?

Ainult lapse-teemasse. Pane custom-spinner.gif peateemasse ja kui see uueneb, kaob fail ära. Õige struktuur:

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

CSS-is kirjuta tee ilma eesliiteta kaldkriipsuta: url('images/custom-spinner.gif'). See on suhteline tee alamteema stiilifailist. Absoluutsed teed nagu /wp-content/themes/... lähevad katki, kui sait viiakse üle teisele domeenile.

Millist asendusmeetodit oma juhtumi puhul valida

Kolm stsenaariumi, keerukuse ja kohandamisvõimaluste kasvavas järjekorras.

Üheksal juhul kümnest piisab esimesest stsenaariumist. Haara loading.io-st valmis spinner, lisa see alamteemasse, kirjuta kolm rida CSS-i ja vaikimisi nool ei reeda sinu saiti enam kunagi.