Opprett innebygd lasting effekt i knapper med LADDA

Det finnes ulike typer animasjoner du kan søke inn på nettsiden din. Animasjon for tekst, modal boks, overgang og fremdriftsindikator. For fremdriftsindikatorer, vanligvis i form av barer, viser fremdriften du ser på linjen, hvor mye fremgang er gjort (eller lastet). Hvis du er interessert i fremgang inne i en knapp, kan du prøve å laste ut.

Ladda er et jQuery-plugin laget av Hakim El Hattab for å gi deg lastingseffekten inne i en knapp . Det er et brukergrensesnitt som effektivt skiller gapet mellom handling og tilbakemelding. Brukerne vil bli gitt tilbakemelding i form av en lastindikator i stedet for å måtte forlate siden. Det finnes også en versjon av Last for WordPress tilgjengelig.

Grunnleggende bruk

Ladda kan brukes som et frittstående plugin som ikke trenger noen andre avhengigheter. For å komme i gang må du først ta med både upload.min.js og spin.min.js- filene du kan få fra GitHub-siden i prosjektet ditt, slik som det.

For å få knappen til å bruke standardlast-temaer, last CSS-filen til load.min.css . Hvis du bare vil ha funksjonsknappene uten temaet, laster du filen load-themeless.min.css .

HTML Markup

For å lage ladda-button arbeid, må du legge inn ladda-button i knappen. Her er et eksempel:

 Sende inn 

Ladda gir deg også muligheter i HTML ved hjelp av dataattributter for knappestilen. Som du kan se over, bruker knappen data-style for animasjonsstil. Hvis du vil bruke en annen stil, kan du sjekke hele listen på demoversiden.

For å endre fargen, kan du bruke data-color . For knappestørrelse, inkludere data-size til knappen.

Slå sammen med serveren

Og nå, for å få laste animasjonen til serveren (som vil laste siden etter animasjonen) trenger vi bind() . Dette vil binde fremdriftsknapper og simulere lasting fremgang:

Du kan også kontrollere knappene dine ved hjelp av Javascript API med følgende tilnærming:

Konklusjon

Med støtte fra Bootstrap og å være lydhør, er Ladda verdt et forsøk i prosjektet. Dessuten har den blitt testet og det fungerer bra i den nyeste versjonen av Chrome, Firefox, Safari samt IE9 og nyere. Ta gjerne beskjed om hva du synes i kommentarfeltet nedenfor.

15 lommebokspesifikasjoner for å hjelpe til med å spre julekjærligheten

Du har sikkert sjekket ut de fleste gaveideer som er tilgjengelige der ute, men hvis du ikke er i klumpete gaver som kan brenne et hull i lommen, så sjekk ut de lommestørrelsene vi har for deg i dette innlegget. Du finner søte småkameraer, kreative USB-flashdriverdesigner, bærbare batteribackup, en aktivitetssporing, en slank lommebok og til og med en manuell drevet espressomaskin.Merk

(Tekniske og design tips)

Hvordan bli rik som designer

Mange drømmer om å bli velstående ved å gjøre ting de elsker . Designere, i stor grad, kommer inn i design fordi de bare elsker det. Men til slutt, realitetene med å leve, betale regningene, matte familien din osv. Har forrang over dine kreative drømmer, og du kan finne deg selv å ta på kunder og prosjekter du aldri trodde du ville bare for pengene.De flest

(Tekniske og design tips)