Skapa Single-Element Spinners och Loaders med CSSPIN

Du kan bygga några fantastiska saker med CSS3, från anpassade inmatningsfält till menyerna och även vektorgrafik. Dessa tekniker är snabbt överträffar JavaScript, vilket gör det lättare för utvecklare att skapa bättre användarupplevelser.

En av de svåraste sakerna att bygga är a laddning spinner animation men modern CSS-animering gör det till och med ganska enkelt.

För att spara tid byggnad från början, kan du använda ett bibliotek som CSSPIN med massor av fördefinierade anpassade spinnare. Alla dessa animationer är gratis att klona och helt öppna, så du har full tillgång att redigera koden som du önskar.

Att skapa en spinner med det här biblioteket är en bris. Du bara kopiera CSS-biblioteket till din sida, då lägg till anpassade HTML-element vart du vill att dom ska visas.

Dessa anpassade spinnare använder bara ett HTML-element för att skapa animeringseffekten. Detta är enormt eftersom grafiken och animeringseffekten är gjordes rent genom CSS-klasser.

Och eftersom du har tillgång till källkoden du kan Byt ut former, färger, storlekar och animationshastigheter för att bättre passa dina projekt.

Notera bara koden använder LESS syntax, så du måste känna till det förbehandlingsspråket för att göra några större ändringar.

Men du kan hitta gott om vanliga CSS-exempel på huvuddemosidan, tillsammans med enkla instruktioner på GitHub-sidan.

Om du är bekant med npm eller Lövsal dessa är alternativa metoder för att installera biblioteket.

Oavsett hur du får det installerat, det här är ett bra CSS animationsbibliotek att arbeta med. Det är tänkt att vara helt modulär med gott om utrymme för nya spinnare, nya animeringar och anpassningar från andra utvecklare.

För att lära dig mer och bläddra igenom all dokumentation, kolla in CSSPIN repo på GitHub. Skaparen gjorde också en liten setup video som du kan titta nedanför.