Vakiona Contact Form 7 -spinneri tunnistaa heti ensisilmäyksellä. Harmaa nuoli, loputon pyöritys, ja on heti selvää: sivusto pyörii oletusasetuksilla. Design on kymmenen vuotta vanha, ja esilatausanimaatio kaksikymmentä.

Mutta tätä ei tarvitse sietää. Spinnerin korvausmekanismi on sisäänrakennettu liitännäisen omaan CSS-kehykseen, ilman lähdetiedostojen muokkausta, ilman riskiä muutosten katoamisesta automaattipäivityksissä. Kolme koodinpätkää, viisi minuuttia, ja lomake näyttää täsmälleen mockupin mukaiselta.

💡 Pikaopas:

• Piilota vakioanimaatio display: none -määrityksellä .wpcf7-spinner::before -elementille
• Lisää oma GIF taustakuvaksi tai piirrä spinneri puhtaalla CSS:llä
• Keskitä esilatauskuvake flexboxilla, ilman !important-määrityksiä ja virityksiä
• Nappaa valmis animaatio loading.io:sta, Icons8:sta tai CSS Loadersista
• Alle version viisi tapauksessa vanhentunut wpcf7_ajax_loader-koukku functions.php:ssa

Miten CF7:n esilatauskuvake toimii nyt

Contact Form 7 on tällä hetkellä versiossa 6.1.6, eivätkä spinnerin mekaniikat ole muuttuneet version viisi jälkeen. Ei enää <img src="ajax-loader.gif">. Selain piirtää nuolen itse ::before-pseudoelementillä <span class="wpcf7-spinner"> -elementin sisällä. Ei ulkoisia tiedostoja, välitön renderöinti.

Vanha valitsin div.wpcf7 .ajax-loader on kuollut. Kaikki CF7:n 4.6-aikakauden ohjeet kuuluvat arkistoon. Nyt kaikki on yksinkertaisempaa: korvaa tausta .wpcf7-spinner-elementissä, piilota pseudoelementti, valmista.

Tämä poisti myös tarpeen wpcf7_ajax_loader-koukulle. Ei enää functions.php-tiedostoa nuolen korvaamiseen, puhdasta CSS:ää, kolme riviä.

Spinnerin vaihtaminen CSS:llä: askel askeleelta

Oletetaan, että sinulla on custom-spinner.gif lapsiteeman images-kansiossa. Kaksi vaihetta, ja vakionuoli katoaa.

Ensiksi, poista sisäänrakennettu animaatio käytöstä. Valitsin kohdistuu tarkasti pseudoelementtiin, mikään muu ei muutu:

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

Nyt liitä oma GIF taustakuvaksi itse <span>-elementtiin:

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
}

Molemmat lohkot menevät lapsiteemasi style.css-tiedostoon. Polku: "Ulkoasu → Teematiedostoeditori" tai "Ulkoasu → Mukauta → Lisä-CSS". Älä koske itse liitännäisen tiedostoihin; muutoksesi katoavat ensimmäisessä päivityksessä.

Säädä leveys ja korkeus vastaamaan GIF:si kokoa. Läpinäkyvä spinneri tummalla lomakkeella? Poista background-color; sitä ei siinä tarvita.

CSS-animaatio ilman tiedostoja: puhdas rengas

GIF vaatii HTTP-pyynnön ja pikselöityy retina-näytöillä. Moderni tapa on piirtää spinneri selaimella. border ja @keyframes tuottavat täydellisen terävyyden millä tahansa resoluutiolla. Ei tiedostoja, välitön lataus, täysi hallinta väristä.

Tässä kaksoisrengas korostevärillä brändivärillä:

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
}

Käytä omia värejäsi. Korvaa #262b2e ja #FF3D00 omalla brändiväriparillasi. Viivan paksuus on 2px, täysi kierros yhdessä sekunnissa. Haluatko nopeammin? Pienennä 1s arvoon 0.6s. Hitaammin? 1.5s.

Esilatauskuvakkeen keskittäminen

Oletuksena spinneri on kiinni lähetyspainikkeen vasemmassa reunassa. Mobiilileveydellä tätä ei huomaa, mutta työpöydällä se näyttää huolimattomalta. Ratkaisu flexboxilla kahdella säännöllä:

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
}

Ensimmäinen sääntö muuttaa lomakkeen flex-kontiksi, jossa on keskitys. Toinen antaa spinnerille ylämarginaalin ja auto-marginaalit työntääkseen sen rivin keskelle. Ei float: inherit !important-määrityksiä, ei negatiivista margin-bottom-arvoa; kaikki pysyy siistinä eikä hajoa teemaa vaihdettaessa.

Jos lomake on monimutkainen ja flex-wrap: wrap rikkoo kenttien asettelun, kääri spinneri erilliseen <div>-elementtiin, jossa on text-align: center. Mutta yhdeksän kertaa kymmenestä flexbox-ratkaisu riittää.

Mistä valmiita animaatioita saa

ajaxload.info, jota kaikissa vanhoissa oppaissa suositeltiin, on suljettu. Kolme toimivaa vaihtoehtoa:

• loading.io, spinnerikonstruktori. Valitset muodon, värin, koon. Vie GIF-, SVG-, CSS- ja APNG-muodoissa. Ilmaiset vaihtoehdot riittävät mainiosti yhteydenottolomakkeelle.
• Icons8 Preloaders, yli tuhannen ikonin kokoelma: renkaita, palkkeja, pisteitä, 3D-versioita. Generaattori tuottaa GIF-, SVG- ja APNG-tiedostoja. Osa on ilmaisia maininnalla, osa maksullisia.
• CSS Loaders, puhtaita CSS-spinnereitä ilman ainuttakaan ulkoista tiedostoa. Valitse mieleisesi, kopioi HTML+CSS, sovita se .wpcf7-spinner-luokalle. Täydellinen niille, jotka eivät periaatteessa halua ladata kilotavuakaan.

Hanki spinneri läpinäkyvällä taustalla; se sopii minkä tahansa väriseen lomakkeeseen. Optimaalinen koko on 24×24 tai 32×32 pikseliä. Pienemmät välkkyvät, suuremmat vievät huomion lähetyspainikkeesta.

Entä versiot alle 5.x: vanhentunut menetelmä

Jos sivustosi on yhä CF7 4.x:ssä, päivitä liitännäinen. Ihan oikeasti. Nykyinen versio 6.1.6 on paikannut lukuisia haavoittuvuuksia, ja vanha wpcf7_ajax_loader-koukku voi lakata toimimasta milloin tahansa. Kehittäjä ei takaa taaksepäin yhteensopivuutta.

Mutta jos päivittäminen on mahdotonta (räätälöity koodi on tiukasti sidottu vanhoihin koukkuihin), tässä menetelmä functions.php:n kautta:

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
}

Koodi lisätään lapsiteeman functions.php-tiedostoon. ajax-loader.gif-tiedosto on ladattu etukäteen images/-kansioon lapsiteeman sisällä. Lapsiteemalle: stylesheet_directory. Vanhempana olevalle teemalle: template_directory.

Ja päivitä silti heti kun mahdollista.

Live-esimerkki videolla

Alla oleva video näyttää täydellisen läpikäynnin: miltä loputtomasti pyörivän spinnerin ongelma näyttää, miksi vanhat ohjeet eivät toimi ja miten se korjataan kahdessa minuutissa CSS:n avulla:

⁉️🤔 Usein kysytyt kysymykset

Miksi CSS ei toimi, spinneri ei vaihdu?

Lähes varmasti kohdistat vanhaan valitsimeen div.wpcf7 .ajax-loader. Versiosta viisi lähtien se on hyödytön. Sinun täytyy kohdistaa .wpcf7-spinner::before (oletusspinnerin piilottamiseen) ja .wpcf7-spinner (oman spinnerin liittämiseen). Tarkista liitännäisen versio: "Lisäosat → Asennetut lisäosat → Contact Form 7". Avaa DevTools (F12), etsi Elements-välilehdeltä <span class="wpcf7-spinner"> lomakkeen sisältä. Jos siinä on ::before-pseudoelementti, jossa on reunus, olet nykyisessä versiossa; käytä CSS-osion valitsimia. Jos näet <img>-elementin, jolla on luokka ajax-loader, liitännäinen on toivottoman vanhentunut.

Voinko tehdä spinneristä liukuvärjätty tai monivärisen?

Kyllä, ilman ainuttakaan grafiikkapikseliä. Animaatio-osion perus-CSS-spinneri hyväksyy mitkä tahansa värit border-top- ja border-bottom-ominaisuuksien kautta. Liukuväriä varten korvaa tasainen väri conic-gradient-arvolla maskissa. Esimerkki renkaasta, jossa on puna-kelta-vihreä-siirtymä:

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
}

Toimii moderneissa selaimissa. Renkaan paksuus asetetaan mask-ominaisuudessa calc()-funktion avulla.

Miten poistan spinnerin kokonaan?

Yksi rivi: .wpcf7-spinner { display: none !important; }. Mutta mieti kahdesti. Spinneri on ainoa signaali käyttäjälle siitä, että lomake on lähetetty ja palvelin käsittelee pyyntöä. Ilman sitä henkilö klikkaa "Lähetä" uudelleen, ja saat tuplalähetyksen. On parempi olla poistamatta sitä, vaan korvata se minimalistisella renkaalla neutraalissa värissä.

Vaikuttaako mukautettu spinneri latausnopeuteen?

Riippuu menetelmästä. 2-5 kt:n GIF lisää yhden HTTP-pyynnön, millä ei ole käytännössä mitään vaikutusta sivun nopeuteen. CSS-spinneri ei lisää pyyntöä eikä tavuakaan 300-400 tavun koodia enempää (nopein vaihtoehto). CSS:n sisällä base64-muodossa oleva SVG ei myöskään vaadi pyyntöä, mutta painaa 1-2 kt. Yhteydenottolomakkeella näiden kolmen menetelmän eroa ei huomaa silmällä. CSS-animaatio voittaa kokonaisuutena: ei tiedostoja, ei pikselöitymistä, ei täytä mediakirjastoa.

Minne spinneritiedosto kannattaa tallentaa, jotta se ei katoa teemapäivityksissä?

Ainoastaan lapsiteemaan. Laita custom-spinner.gif vanhempana olevaan teemaan, ja kun se päivittyy, tiedosto katoaa. Oikea rakenne:

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:ssä kirjoita polku ilman alkavaa kauttaviivaa: url('images/custom-spinner.gif'). Tämä on suhteellinen polku lapsiteeman tyylitiedostosta. Absoluuttiset polut, kuten /wp-content/themes/..., hajoavat, kun sivusto siirretään eri verkkotunnukselle.

Mikä korvausmenetelmä valita omaan tapaukseesi

Kolme skenaariota, järjestyksessä kasvavan monimutkaisuuden ja muokkausmahdollisuuksien mukaan.

Yhdeksässä tapauksessa kymmenestä ensimmäinen skenaario riittää. Nappaa valmis spinneri loading.io-palvelusta, pudota se child-teemaan, kirjoita kolme riviä CSS:ää, eikä oletusnuoli enää koskaan paljasta sivustoasi.