Animated Progress Bar

BBCode database
BBCode che hanno bisogno di niente altro che un installazione per ACP
Regole del forum
Immagine
Rispondi
Avatar utente
Galandas
Staff phpBB3World
Staff phpBB3World
Messaggi: 813
Iscritto il: 4 nov 2012, 9:18
Località: phpbb3world
Umore:
Contatta:

Animated Progress Bar

Messaggio da Galandas » 10 nov 2013, 22:53

Animated Progress Bar

Autore: Dugi
Descrizione: Questo BBCode apparirà come una barra di avanzamento con un valore percentuale di riempimento a vostra scelta. La barra di avanzamento ha un'animazione interessante per esso.

Puro CSS3. Non ci sono immagini incluse!

BBCODE:

Codice: Seleziona tutto

[progress]{NUMBER}[/progress]
HTML:

Codice: Seleziona tutto

<style> @-webkit-keyframes progress{to{background-position: 30px 0;}}@-moz-keyframes progress{to{background-position: 30px 0;}}@keyframes progress{to{background-position: 30px 0;}} </style><div style="display: inline-block; background-color: #282828; border-radius: 7px; box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3); height: 17px; padding: 6px; width: 380px;"><div style="display: inline-block; height: 100%; width: {NUMBER}%; max-width: 100%; background-color: CornflowerBlue; border-radius: 3px;"><div style="width: 100%; height: 15px; border-radius: 20px; -webkit-animation: progress 1s linear infinite; -moz-animation: progress 1s linear infinite; animation: progress 1s linear infinite; background-repeat: repeat-x; background-size: 30px 30px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);"></div></div></div>
Aiuto in linea:

Codice: Seleziona tutto

[progress]Numero da 1 a 100[/progress]
Esempio:

Codice: Seleziona tutto

[progress]67[/progress]
Demo:
test.gif
Menu Forum ha scritto:

Rispondi

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti