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.

Come rilevare e arrestare il monitoraggio dei messaggi

Esistono numerosi servizi che consentono al mittente di tenere traccia delle e-mail, incluso quando è stata aperta la posta elettronica, quali collegamenti sono stati cliccati, quale dispositivo è stato utilizzato e anche la posizione corrente del destinatario. E tutto ciò senza il consenso del lettore.Pe

(Consigli tecnici e di design)

5 modi per monetizzare i tuoi vecchi disegni

Dopo un paio d'anni come designer freelance, costruirai una serie di lavori che hai fatto per i clienti e, idealmente, anche per te stesso. Se hai un sacco di vecchi design, sembra uno spreco lasciarli semplicemente seduti sul tuo disco rigido, senza fare nulla.C'è una buona possibilità che tu possa guadagnare un po 'di soldi in più da questi progetti. E

(Consigli tecnici e di design)