Opret Single-Element Spinners og Loaders med CSSPIN

Du kan bygge nogle fantastiske ting med CSS3, fra brugerdefinerede inputfelter til rullemenuerne og endda vektor grafik. Disse teknikker er hurtigt overhalede JavaScript, hvilket gør det nemmere for udviklere at udarbejde bedre brugeroplevelser.

En af de vanskeligste ting at bygge er en loading spinner animation men moderne CSS animation gør det også ret simpelt.

For at spare tid på at bygge fra bunden, kan du bruge et bibliotek som CSSPIN med tonsvis af foruddefinerede brugerdefinerede spinnere. Alle disse animationer er gratis at klone og helt åbne, så du har fuld adgang at redigere koden som du ønsker.

Opsætning af en spinner med dette bibliotek er en brise. Du bare kopier CSS biblioteket ind på din side, så Tilføj de tilpassede HTML-elementer hvor du vil have dem til at dukke op.

Disse brugerdefinerede spinners bruger kun et HTML-element for at skabe animationseffekten. Dette er enormt fordi grafikken og animationseffekten er gengivet udelukkende gennem CSS klasser.

Og da du har adgang til kildekoden, kan du erstatte former, farver, størrelser og animationshastigheder for bedre at passe til dine projekter.

Bare bemærk koden bruger LESS syntaks, så du bliver nødt til at være fortrolig med det præprocessionssprog for at foretage større ændringer.

Men du kan finde masser af almindelige CSS eksempler på hoveddemosiden sammen med enkle instruktioner på GitHub-siden.

Hvis du er bekendt med NPM eller Bower disse er alternative metoder for at installere biblioteket.

Uanset hvordan du får det installeret, er dette et godt CSS animationsbibliotek til at arbejde med. Det skal være fuldt modulære med masser af plads til nye spinnere, nye animationer og tilpasninger fra andre udviklere.

For at lære mere og gennemse hele dokumentationen, tjek den CSSPIN repo på GitHub. Skaberen lavede også en lille setup video at du kan se nedenfor.