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.

Et innblikk i: Utvikling av kort med gratulasjonskort

Gratulasjonskort har eksistert i hundrevis av år som går tilbake til det gamle Kina og Egypt. Det er hvordan menneskelig uttrykker sin følelse av takknemlighet og takknemlighet, til og med denne teknologien når folk fremdeles sender gratulasjonskort, bare med flere alternativer som å sende såkalte "elektroniske kort". Ja,

(Tekniske og design tips)

Water Photo Manipulation: 28 Amazing Water Artworks

Hvor mange ganger vil du virkelig ta en seriøs titt på vann? Som menneske som bor i moderen Jorden, ser vi vannet overalt. Det er en av de viktigste eiendelene for å holde oss i live, men det ser så vanlig ut at vi behandler det som gjennomsiktig ting, til noen uvanlige kunstnere skjønte vannets skjønnhet og omgjort det til enorm visuell kunst.I det

(Tekniske og design tips)