Kuinka luoda ihana latausnäyttö 5 minuutissa

Ensinnäkin tässä me rakennamme. Aseta ajastin!

Tässä on rakennettava DEMO.

Näyttääkö tämä tutulta?

Jos kyllä, niin koska olet nähnyt tämän jonnekin - löysä!

Otetaan oppia muutamia asioita luomalla tämä uudelleen vain CSS: llä ja hyvällä HTML-koodilla.

Jos olet innoissasi jonkin koodin kirjoittamisesta, siirry Codepenille ja luo uusi kynä.

Mennäänpä!

1. Merkintä

Tätä varten tarvittava merkintä on melko yksinkertainen. Tässä se on:

Jos haluat saada uusia sivupalkin värejä, napsauta työtilan nimeä ja valitse sitten Asetukset> Sivupalkki> Teema
 - ystäväsi Slackissa 
     

Yksinkertainen, vai mitä?

Jos et ole varma, miksi luokkien nimissä on omituisia viivoja, selitin tämän artikkelin syyn.

Animaatiokuvakkeen “jäljittelemiseksi” on joukko tekstiä ja .loading__anim-span.

Tuloksena on alla oleva yksinkertainen näkymä.

Ei niin paha, eikö niin?

2. Keskitä sisältö

Tulos ei ole kaunein näkemästä kamaa. Olkoon koko .loading-osio syötetty sivulle.

vartalo {
  näyttö: flex;
  perustele sisältö: keskusta;
  Kohdista tuotteet: keskusta;
  min-korkeus: 100vh;
}
Nyt keskitetty!

Näytätkö paremmalta?

3. Muotoile latausteksti

Tiedän. Pääset animoituihin juttuihin pian. Muistamme nyt, että latausteksti näyttää paljon paremmalta.

.Ladataan {
  max-leveys: 50%;
  linjan korkeus: 1,4;
  kirjasinkoko: 1,2rem;
  kirjasinpaino: lihavoitu;
  tekstin kohdistaminen: keskusta;
}

4. Muotoile kirjoittajan teksti näyttämään hieman erilaiselta.

.lataus__author {
  kirjasinpaino: normaali;
  fonttikoko: 0,9rem;
  väri: rgba (189, 189, 189, 1);
  marginaali: 0,6rem 0 2rem 0;
  näyttö: estää;
}

Ole hyvä!

5. Luo animoitu latauslaite

Kauan odotettu askel on täällä. Tämä on pisin vaiheista, koska käytän jonkin aikaa varmistaakseni, että ymmärrät miten se toimii.

Jos jumiudut, pudota kommentti ja autan mielelläni.

Hei, katsokaa kuormainta uudelleen.

Huomaat, että puolet sen aivohalvauksesta on sinistä ja toinen puoli harmaata. Okei, se on selvitetty. Myös HTML-elementtejä ei pyöristetä oletuksena. Kaikki on laatikkoelementti. Ensimmäinen todellinen haaste on kuinka antaa .loading__anim -elementti puolikkaat.

Älä huoli, jos et ymmärrä tätä vielä. Palaan siihen.

Ensin selvitetään kuormaajan mitat.

.loading__anim {
  leveys: 35px;
  korkeus: 35px;
 }

Tällä hetkellä kuormaaja on samalla rivillä kuin teksti. Sitä, että se on span-elementti, joka sattuu olemaan HTML-inline-elementti.

Varmista, että kuormain istuu toiselle riville, ts. Se alkaa toiselta riviltä toisin kuin rivielementtien oletuskäyttäytyminen.

.loading__anim {
   leveys: 35px;
   korkeus: 35px;
   näyttö: inline-block;
  }

Varmista lopuksi, että kuormaajassa on jokin reunus asetettu.

.loading__anim {
   leveys: 35px;
   korkeus: 35px;
   näyttö: inline-block;
   reuna: 5px kiinteä rgba (189,189,189, 0,25);
  }

Tämä antaa harmahtavan 5px-reunan elementin ympärille.

Nyt, tässä on seuraus tästä.

Näet harmaat rajat, eikö niin?

Ei niin mahtavaa - vielä. Tehdään tämä vielä paremmaksi.

Elementillä on neljä sivua, ylä, ala, vasen ja oikea

Aikaisemmin asettamamme rajailmoitus sovellettiin elementin kaikkiin puoliin.

Kuormaimen luomiseen tarvitaan elementin kaksi puolta, joilla on eri värit.

Sillä ei ole merkitystä, mitkä puolet valitset. Olen käyttänyt ylä- ja vasenta reunaa alla

.loading__anim {
  leveys: 35px;
  korkeus: 35px;
  näyttö: inline-block;
  reuna: 5px kiinteä rgba (189,189,189, 0,25);
  vasen reunus-väri: rgba (3 155 229, 1);
  yläreunan väri: rgba (3 155 229, 1);
  }

Nyt vasemmalla ja yläpuolella on sinertävä väri reunoillaan. Tässä on seuraus tästä:

hmmmm. näyttää hyvältä.

Olemme menossa jonnekin!

Kuormaaja on pyöreä, EI suorakaiteen muotoinen. Muutetaan tämä antamalla .loader__anim -elementille rajasäde 50%

Nyt meillä on tämä:

Ei niin paha, eikö niin?

Viimeinen vaihe on tämän animointi.

@ avainkehykset kiertävät {
 {
  muuntaa: kiertää (1 käännös)
 }
}

Toivottavasti sinulla on käsitys CSS-animaatioiden toiminnasta. 1 käännös on yhtä suuri kuin 360 astetta, eli täydellinen käännös kiertää 360 astetta.

Ja levitä sitä näin:

animaatio: kierrä 600 ms ääretöntä lineaarista;

Yo! Me teimme sen. Onko tällä kaikella järkeä?

Muuten, katso tulos alla:

lo hicimos! (Espanja)

Aika siistiä, vai mitä?

Jos jokin vaiheista hämmentää sinua, pudota kommentti ja autan mielelläni.

Oletko valmis tulemaan Pro: ksi?

Olen luonut ilmaisen CSS-oppaan saadaksesi CSS-taitosi hellittämään heti. Hanki ilmainen e-kirja.

Seitsemän CSS-salaisuutta, joista et tiennyt