Crea effetti di caricamento incorporati nei pulsanti con LADDA

Esistono vari tipi di animazione che puoi applicare alla tua pagina web. Animazione per testo, casella modale, transizione e indicatore di avanzamento. Per gli indicatori di progresso, solitamente sotto forma di barre, i progressi visualizzati sulla barra indicano quanti progressi sono stati fatti (o caricati). Se invece sei interessato a progredire all'interno di un pulsante, prova Ladda.

Ladda è un plugin jQuery realizzato da Hakim El Hattab per darti l' effetto di caricamento all'interno di un pulsante . È un concetto di interfaccia utente che separa efficacemente il divario tra azione e feedback. Gli utenti riceveranno un feedback sotto forma di un indicatore di caricamento invece di dover lasciare la pagina. È disponibile anche una versione di Ladda per WordPress.

Uso di base

Ladda può essere usato come un plugin standalone che non ha bisogno di altre dipendenze. Per iniziare, in primo luogo devi includere sia i file ladda.min.js che spin.min.js che puoi ottenere dalla pagina GitHub del tuo progetto, in questo modo.

Per applicare il pulsante ai temi Ladda predefiniti, caricare il file CSS di ladda.min.css . Se si desidera solo i pulsanti funzionali senza il tema, caricare il file ladda-themeless.min.css .

Markup HTML

Per far funzionare Ladda, devi includere la classe ladda-button nel pulsante. Ecco un esempio:

 Sottoscrivi 

Ladda fornisce anche opzioni all'interno dell'HTML che utilizzano gli attributi dei dati per lo stile del pulsante. Come puoi vedere sopra, il pulsante usa data-style per lo stile di animazione. Per applicare uno stile diverso, puoi controllare l'elenco completo nella pagina demo.

Per cambiare il colore, puoi usare il data-color . Per le dimensioni dei pulsanti, includere data-size sul pulsante.

Unione con il server

E ora, per fare in modo che l'animazione di caricamento venga inviata al server (che ricaricherà la pagina dopo l'animazione) avremo bisogno del metodo bind() . Ciò vincolerà i pulsanti di avanzamento e simulerà il progresso del caricamento:

Puoi anche controllare i tuoi pulsanti usando l'API di Javascript con il seguente approccio:

Conclusione

Con il supporto di Bootstrap e la sua reattività, Ladda merita una prova nel tuo progetto. Inoltre, è stato testato e funziona bene nell'ultima versione di Chrome, Firefox, Safari e IE9 e versioni successive. Sentiti libero di farci sapere cosa ne pensi nella casella di commento qui sotto.

Le 10 migliori app video per Windows Phone

Al giorno d'oggi, giriamo video con i nostri telefoni cellulari in varie occasioni. Con l'aiuto delle app mobili, siamo anche in grado di registrare e modificare il video immediatamente prima di inviarlo o condividerlo sui social network. Diverse app di terze parti sono state dotate di effetti speciali speciali preimpostati che rendono molto facile la creazione di un video accattivante

(Consigli tecnici e di design)

20+ fantastici font di gesso da scaricare

Pensa al gesso e probabilmente non lo considereresti come un font che sceglieresti di usare nel web design. Ma potresti essere sorpreso di come il gesso accattivante possa essere. Solo vederlo riporta i sentimenti nostalgici dei compiti e dover risolvere i problemi di matematica alla lavagna con tutti quegli occhi dietro la testa

(Consigli tecnici e di design)