it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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:

  

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 creare un browser compatibile con le risorse (utilizzando Opera)

Come creare un browser compatibile con le risorse (utilizzando Opera)

Se disponi di un piano dati internet limitato o di un vecchio PC che non è in grado di gestire le tue esigenze di navigazione, puoi provare a rendere il browser più adatto alle risorse . Ciò significa che è possibile apportare modifiche per rendere il browser utilizza meno risorse .Sto usando il browser Opera per dimostrare come farlo, ma le modifiche qui sotto possono anche essere fatte in altri browser popolari . De

(Consigli tecnici e di design)

Instagram ora ti permette di aggiungere dei segnalibri ai post

Instagram ora ti permette di aggiungere dei segnalibri ai post

Ultimamente, Instagram ha rilasciato nuove funzionalità su un rotolo, ed ecco un altro aggiornamento piacevole: i post dei segnalibri.Disponibile su Instagram versione 10.2, vedrai un'icona segnalibro sotto i post nel feed. Toccando su di esso, il post verrà salvato in una cartella "Saved", visibile solo al proprietario .

(Consigli tecnici e di design)