L'uso delle glyph consete di aggiungere facilmente immagini vettoriali alle applicazioni, agendo su colori e dimensioni senza necessità di creare nuovamente gli asset.
Se si opta per una library come FontAwesome, sono già inclusi una serie di effetti da applicare, mentre per i glyph di Bootstrap questo non è vero.
Grazie alle animazioni di CSS3, è sufficiente aggiungere questo stile per avere il supporto per la rotazione:
.glyphicon-spin { -webkit-animation: spin 1000ms infinite linear; -moz-animation: spin 1000ms infinite linear; -o-animation: spin 1000ms infinite linear; animation: spin 1000ms infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-moz-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
Il principio su cui si basa questo codice è semplice: viene ruotato l'elemento, agendo sulla trasformazione. Questo effetto si applica a glyph che siano centrati e funziona con tutti i browser:
<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare gli operatori di RxJS per gestire operazioni asincrone con Javascript e TypeScript
Utilizzare una direttiva di Angular per limitare i caratteri inseribili in una textbox
Aggiungere e rimuovere un tag ad un work item in una pipeline di Azure DevOps
Utilizzare un web worker in Angular
Utilizzare i controlled component per gestire una form con React
Utilizzare app-shell per rendere un'applicazione Angular più responsiva alla partenza
Creare un Module Initializer in .NET 5
Condividere una variabile tra job in una pipeline YAML di Azure DevOps
Rendering di raw HTML in Blazor
Disabilitare un pulsante in Blazor durante il salvataggio
Autenticazione condizionale a due fattori con Azure Active Directory B2C
Monitorare lo stato di salute di un Azure App Service
I più letti di oggi
- Creare un web server locale con LiveReload
- Modificare la modalità di esecuzione delle query con Include in Entity Framework Core 5
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Abilitare il drag&drop delle righe di una tabella in Angular
- Testare le impostazioni CORS di un'applicazione ASP.NET Core
- Esecuzione condizionale dei task nelle pipeline YAML di Azure DevOps
- Attesa e validazione manuale nelle pipeline YAML di Azure DevOps