Lag Single-Element Spinners og Loaders med CSSPIN

Du kan bygge noen fantastiske ting med CSS3, fra egendefinerte inputfelter til rullegardinmenyene Til og med vektorgrafik. Disse teknikkene er raskt overtakelse av JavaScript, noe som gjør det enklere for utviklere å lage bedre brukeropplevelser.

En av de vanskeligste tingene å bygge er en laster spinner animasjon men moderne CSS-animasjon gjør det enda ganske enkelt.

For å spare tid å bygge fra begynnelsen, kan du bruke et bibliotek som CSSPIN med tonnevis av forhåndsdefinerte tilpassede spinnere. Alle disse animasjonene er gratis å klone og helt åpen, så du har full tilgang å redigere koden som du ønsker.

Det er en bris å sette opp en spinner med dette biblioteket. Du bare kopier CSS biblioteket inn på siden din, da legg til egendefinerte HTML-elementer uansett hvor du vil at de skal vises.

Disse tilpassede spinnere bruker bare ett HTML-element for å opprette animasjonseffekten. Dette er stort fordi grafikk og animasjonseffekten er gjengis rent gjennom CSS klasser.

Og siden du har tilgang til kildekoden du kan Bytt ut former, farger, størrelser og animasjonshastigheter for å bedre passe dine prosjekter.

Legg merke til koden bruker LESS syntaks, så du må være kjent med det preprocessing-språket for å gjøre noen større endringer.

Men du kan finne nok av Vanlige CSS-eksempler på hoveddemosiden, sammen med enkle instruksjoner på GitHub siden.

Hvis du er kjent med NPM eller Bower disse er alternative metoder for å installere biblioteket.

Uansett hvordan du får det installert, er dette et flott CSS animasjonsbibliotek for å jobbe med. Det er ment til å være fullt modulær med god plass til nye spinnere, nye animasjoner og tilpasninger fra andre utviklere.

For å lære mer og bla gjennom all dokumentasjon, sjekk ut CSSPIN repo på GitHub. Skaperen gjorde også en liten oppsett video som du kan se nedenfor.