Den standard Contact Form 7-spinneren er umiddelbart gjenkjennelig ved første øyekast. En grå pil, endeløs rotasjon, og det er umiddelbart åpenbart: nettstedet kjører på standardinnstillinger. Designet er ti år gammelt, og forhåndslasteren er tjue.

Men du trenger ikke finne deg i dette. Mekanismen for å bytte ut spinneren er innebygd i pluginens eget CSS-rammeverk, uten å redigere kildefiler, uten risiko for å miste endringer ved automatiske oppdateringer. Tre kodebiter, fem minutter, og skjemaet ser nøyaktig ut slik det var tenkt i skissen.

💡 Hurtigoversikt:

• Skjul standardanimasjonen via display: none på .wpcf7-spinner::before
• Legg til din egen GIF som bakgrunn eller tegn en spinner med ren CSS
• Sentrer forhåndslasteren via flexbox, uten !important og hacks
• Hent en ferdiglaget animasjon fra loading.io, Icons8 eller CSS Loaders
• For versjoner under fem, den utdaterte hooken wpcf7_ajax_loader i functions.php

Slik fungerer CF7-forhåndslasteren nå

Contact Form 7 er for tiden på versjon 6.1.6, og spinnermekanikken har ikke endret seg siden versjon fem. Ikke mer <img src="ajax-loader.gif">. Nettleseren tegner selve pilen via ::before inne i <span class="wpcf7-spinner">. Ingen eksterne filer, umiddelbar rendering.

Den gamle selektoren div.wpcf7 .ajax-loader er død. Alle instruksjoner fra CF7 4.6-tiden hører hjemme i arkivet. Nå er alt enklere: overstyr bakgrunnen på .wpcf7-spinner, skjul pseudoelementet, ferdig.

Dette eliminerte også behovet for wpcf7_ajax_loader-hooken. Ikke mer functions.php for å erstatte pilen, ren CSS, tre linjer.

Endre spinneren via CSS: trinn for trinn

La oss si at du har custom-spinner.gif i images-mappen til ditt child theme. To trinn, og standardpilen forsvinner.

Først, deaktiver den innebygde animasjonen. Selektoreren treffer nøyaktig pseudoelementet, ingenting annet påvirkes:

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

Fest nå din egen GIF som bakgrunn til selve <span>-elementet:

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
}

Begge blokkene legges inn i style.css i ditt child theme. Sti: «Utseende → Temafilredigering» eller «Utseende → Tilpass → Ekstra CSS». Ikke rør selve plugin-filene; endringene dine vil gå tapt ved første oppdatering.

Juster bredde og høyde slik at de passer til GIF-størrelsen din. Gjennomsiktig spinner på et mørkt skjema? Fjern background-color; den trengs ikke der.

CSS-animasjon uten filer: ren ring

GIF krever en HTTP-forespørsel og blir pikselert på retina-skjermer. Den moderne tilnærmingen er å tegne spinneren ved hjelp av nettleseren. border pluss @keyframes gir perfekt skarphet ved enhver oppløsning. Ingen filer, umiddelbar lasting, full kontroll over farge.

Her er en dobbel ring med en aksentfarge fra merkevaren:

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
}

Bruk dine egne farger. Erstatt #262b2e og #FF3D00 med ditt merkepar. Linjetykkelsen er 2px, full rotasjon på ett sekund. Vil du ha den raskere? Reduser 1s til 0.6s. Langsommere? 1.5s.

Sentrering av forhåndslasteren

Som standard ligger spinneren helt inntil venstre kant av send-knappen. På mobilbredde går dette ubemerket hen, men på desktop ser det slurvete ut. Løst med flexbox i to regler:

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
}

Den første regelen gjør skjemaet til en flex-beholder med senterjustering. Den andre gir spinneren toppmarg og automatiske marger for å skyve den til midten av raden. Ikke noe float: inherit !important, ingen negativ margin-bottom; alt forblir ryddig og knekker ikke ved temabytte.

Hvis skjemaet er komplekst og flex-wrap: wrap ødelegger feltlayouten, pakk spinneren inn i en separat <div> med text-align: center. Men ni av ti ganger er flexbox-tilnærmingen tilstrekkelig.

Hvor du får tak i ferdiglagde animasjoner

ajaxload.info, som ble anbefalt i alle gamle guider, har stengt ned. Tre levende alternativer:

• loading.io, en spinner-bygger. Du velger form, farge, størrelse. Eksporter til GIF, SVG, CSS og APNG. Gratisalternativene er rikelige for et kontaktskjema.
• Icons8 Preloaders, en samling på over tusen ikoner: ringer, streker, prikker, 3D-varianter. Generatoren gir ut GIF, SVG og APNG. Noen er gratis med kreditering, noen er premium.
• CSS Loaders, rene CSS-spinnere uten en eneste ekstern fil. Velg en du liker, kopier HTML+CSS, tilpass den for .wpcf7-spinner. Perfekt for dem som prinsipielt ikke vil laste en eneste kilobyte.

Skaff en spinner med gjennomsiktig bakgrunn; den vil passe inn i et skjema uansett farge. Optimal størrelse er 24×24 eller 32×32 piksler. Mindre flimrer, større stjeler oppmerksomhet fra send-knappen.

Hva med versjoner under 5.x: utdatert metode

Hvis nettstedet ditt fortsatt kjører CF7 4.x, oppdater plugin-en. Seriøst. Gjeldende versjon 6.1.6 har lukket en rekke sårbarheter, og den gamle wpcf7_ajax_loader-hooken kan slutte å fungere når som helst. Utvikleren garanterer ikke bakoverkompatibilitet.

Men hvis oppdatering er umulig (egendefinert kode er tett knyttet til gamle hooker), her er metoden via 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
}

Koden legges i functions.php i child-temaet ditt. Filen ajax-loader.gif lastes opp på forhånd til images/ inne i child-temaet. For child-tema: stylesheet_directory. For parent-tema: template_directory.

Og oppdater likevel ved første anledning.

Live-eksempel på video

Videoen nedenfor viser en komplett gjennomgang: hvordan problemet med den uendelig snurrende spinneren ser ut, hvorfor gamle instruksjoner ikke virker, og hvordan du fikser det på to minutter via CSS:

⁉️🤔 Ofte stilte spørsmål

Hvorfor blir ikke CSS-en tatt i bruk, spinneren endrer seg ikke?

Nesten helt sikkert sikter du mot den gamle selektoren div.wpcf7 .ajax-loader. Siden versjon fem er den ubrukelig. Du må sikte mot .wpcf7-spinner::before (for å skjule standardspinneren) og .wpcf7-spinner (for å feste din egen). Sjekk plugin-versjonen: «Utvidelser → Installerte utvidelser → Contact Form 7». Åpne DevTools (F12), finn i Elements <span class="wpcf7-spinner"> inne i skjemaet. Hvis den har et ::before-pseudoelement med en kantlinje, er du på gjeldende versjon; bruk selektorene fra CSS-delen. Hvis du ser et <img>-element med klassen ajax-loader, er plugin-en håpløst utdatert.

Kan jeg lage spinneren med gradient eller flerfarget?

Ja, uten en eneste piksel med grafikk. Den grunnleggende CSS-spinneren fra animasjonsdelen godtar alle farger via border-top og border-bottom. For en gradient, erstatt den ensfargede fargen med conic-gradient i en maske. Eksempel på en ring med rød-gul-grønn overgang:

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
}

Fungerer i moderne nettlesere. Ringtykkelsen settes i mask via calc().

Hvordan fjerner jeg spinneren helt?

Én linje: .wpcf7-spinner { display: none !important; }. Men tenk deg om to ganger. Spinneren er det eneste signalet til brukeren om at skjemaet ble sendt og serveren behandler forespørselen. Uten den vil personen klikke «Send» igjen, og du får en duplikatinnsending. Det er bedre å ikke fjerne den, men å erstatte den med en minimalistisk ring i en nøytral farge.

Påvirker en egendefinert spinner lastehastigheten?

Det avhenger av metoden. En GIF på 2-5 KB legger til én HTTP-forespørsel, noe som praktisk talt ikke påvirker sidehastigheten. En CSS-spinner legger verken til en forespørsel eller en byte utover 300-400 byte med kode (det raskeste alternativet). SVG i base64 inne i CSS krever heller ingen forespørsel, men veier 1-2 KB. For et kontaktskjema er forskjellen mellom de tre metodene usynlig for øyet. CSS-animasjon vinner totalt sett: ingen filer, ingen pikselering, roter ikke til mediebiblioteket.

Hvor bør jeg lagre spinnerfilen for å unngå å miste den ved temaoppdateringer?

Kun i child-temaet. Legg custom-spinner.gif i parent-temaet, og når det oppdateres vil filen forsvinne. Riktig struktur:

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

I CSS skriver du banen uten innledende skråstrek: url('images/custom-spinner.gif'). Dette er en relativ bane fra barnetemaets stilfil. Absolutte baner som /wp-content/themes/... ryker når du migrerer nettstedet til et annet domene.

Hvilken erstatningsmetode du bør velge for ditt tilfelle

Tre scenarioer, i rekkefølge etter økende kompleksitet og tilpasningsmuligheter.

For ni av ti nettsteder er det første scenarioet nok. Ta en ferdig spinner fra loading.io, slipp den inn i child-temaet, skriv tre linjer med CSS, så vil standardpilen aldri røpe nettstedet ditt igjen.