Progress bar [BBcode]

[Astro86]

Descrizione:
Visualizza una barra progresso, utile per far capire a che punto è un progetto per essere ultimato...

BBcode

Codice: Seleziona tutto

[prog]{NUMBER}[/prog]

HTML

Codice: Seleziona tutto

<div style="color: white; background-color: green; margin: 10px 0px 5px 0px; padding: 0px 10px 0px 10px; font-weight: bold; min-width:18px; max-width: 400px; width:{NUMBER}px; border: 1px solid black;">{NUMBER}%</div>

Aiuto:

Codice: Seleziona tutto

Prog: [prog]numero da 1 a 100[/prog]

Anteprima:
QUI! - link esterno

[gennyna]

Grazie


Essendo che io la utilizzo per indicare lo stato delle donazioni di paypal volevo chiedere se è possible farla più larga...
Io ho modificato l'height e ho messo 800px ma non cambia nulla perchè?

[Carlo]

Credo che dovresti modificare questa parte:

Codice: Seleziona tutto

max-width: 400px;

[gennyna]

è quella che ho modificato ma non cambia nulla

[Barrnet]

Pulito la cache?

[tonylson]

Ma il link per vedere la demo non funziona

[Jaheira]

Ciao! Utilizzo questo thread perché la mia domanda riguarda proprio la progress bar. Sto cercando una barra simile, ma che non mi dia i valori percentuali. Ad esempio vorrei che indicasse 10/50 o 13/65, non quindi un valore da 1 a 100 ma uno variabile, da definire di volta in volta. E' possibile? Magari anche modificando questa...
Grazie comunque a chi mi risponderà!

[Darkman]

Mi sembra difficile in quanto ha poco senso a mio parere.

Un avanzamento al 25% (un quarto di percorso) è intuibile, mentre un 10/65 costringe l'utente a farsi calcoli non facili.

[Jaheira]

Se utilizzi la barra come è stata prevista in origine sì. Ma io la utilizzo in un Gioco di Ruolo via Forum e mi servirebbe per tenere conto della vita dei personaggi. Ne cercavo una che potessi inserire nel profilo dell'utente, ma ancora non l'ho trovata e quindi ho ripiegato sui bbcode.
L'ho modificata quel tanto che mi consente di farlo e la posto qui, nel caso in cui servisse a qualcun altro.

Codice: Seleziona tutto

[prog2={NUMBER1}/{NUMBER2}]{TEXT}[/prog2]

Codice: Seleziona tutto

<div>{TEXT}<div style="background:url(images/prog_grey.png) repeat-x; background-color: #cccccc; border: 1px solid black; width: {NUMBER2}0px; margin-top: 2px;"><div style="background:url(images/prog_green.png) repeat-x;background-color: #008040; color: white; font-weight:bold; max-width:100%; width: {NUMBER1}0px; height:18px;">&nbsp;{NUMBER1}/{NUMBER2}</div></div></div>

Codice: Seleziona tutto

Progress Bar: [prog2=Number/Number MAX]Text[/prog2]

In questa versione del codice, come potete vedere, i numeri sono automaticamente moltiplicati per 10 a livello grafico, perché avevo necessità di mostrare la barra più lunga.
Per chi invece la vuole con la lunghezza determinata dai numeri originali, ecco il codice:

Codice: Seleziona tutto

<div>{TEXT}<div style="background:url(images/prog_grey.png) repeat-x; background-color: #cccccc; border: 1px solid black; width: {NUMBER2}px; margin-top: 2px;"><div style="background:url(images/prog_green.png) repeat-x;background-color: #008040; color: white; font-weight:bold; max-width:100%; width: {NUMBER1}px; height:18px;">&nbsp;{NUMBER1}/{NUMBER2}</div></div></div>

I file immagine sono stati presi da questa discussione: http://www.phpbb3bbcodes.com/viewtopic.php?t=307