[HTML] Progress Bar

oliverat · 3 Lug 2016

Buona domenica a tutti

Devo realizzare delle Progress Bars per un curriculum, ho trovato un esempio che riporto a questo link, ma vorrei che l'animazione partisse quando io sono nella parte interessata, invece attualmente l'animazione parte al caricamento della pagina e quindi non si vede nemmeno.

Avete qualche consiglio, grazie.

cris8380 · 3 Lug 2016

Ciao, per poterti dare una mano abbiamo bisogno di eseguire delle verifiche sul codice.

oliverat · 3 Lug 2016

Hai ragione, perdonami non sono tanto esperto. Ti posto il codice della pagina:

<link rel='stylesheet' href='css/style.css'>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
});
</script>

<style>
.meter {
height: 18px; /* Can be anything */
border-radius: 25px;
padding:1px;
background:#CCC;
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.red > span {
background-color: #585858;
}

</style>

</head>

<body>
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="titoletto">Photoshop</td>
<td align="right" class="testo">90%</td>
</tr>
<tr>
<td colspan="2"><div id="page-wrap4">
<div class="meter red"> <span style="width: 90%"></span></div>
</div></td>
</tr>
</table>
<p> </p>
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="titoletto">Illustrator</td>
<td align="right" class="testo">80%</td>
</tr>
<tr>
<td colspan="2"><div id="page-wrap5">
<div class="meter red"> <span style="width: 80%"></span></div>
</div></td>
</tr>
</table>
<p> </p>
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="titoletto">Indesign</td>
<td align="right" class="testo">70%</td>
</tr>
<tr>
<td colspan="2"><div id="page-wrap6">
<div class="meter red"> <span style="width: 70%"></span></div>
</div></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>continua...</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="titoletto">Premiere</td>
<td align="right" class="testo">80%</td>
</tr>
<tr>
<td colspan="2"><div id="page-wrap7">
<div class="meter red"> <span style="width: 80%"></span></div>
</div></td>
</tr>
</table>
<p> </p>
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="titoletto">Pro</td>
<td align="right" class="testo">70%</td>
</tr>
<tr>
<td colspan="2"><div id="page-wrap8">
<div class="meter red"> <span style="width: 70%"></span></div>
</div></td>
</tr>
</table>

Max 1 · 3 Lug 2016

Come ti ha già detto cris8380 non è possibile capire il problema così con le tue scarse spiegazioni abbiamo bisogno di vedere la pagina in funzione dacci un link dove vedere cosa succede

oliverat · 3 Lug 2016

http://www.dimoreneitrulli.com/progressbar/

Ho messo 3 barre in alto e 2 barre più giù per dare l'idea. In pratica quando io arrivo alle 2 barre di sotto l'effetto è già andato, io vorrei partisse appena appaiono diciamo. Scusate se non mi spiego bene

Max 1 · 3 Lug 2016

Forse non capisco bene ciò che vuoi dire!
Ma io ho provato la tua pagina con una connessione lenta e ovviamente vado l'effetto bene per intero se invece la connessione è veloce il caricamento della pagina ovviamente è molto rapido e anche l'effetto è meno percettibile.
La progressbar ovviamente non può partire quando si vuole ma deve partire al caricamento della pagina altrimenti non ha senso che ci sia

Max 1 · 3 Lug 2016

Se invece vuoi che parta quando comincia a caricare un certo contenuto come un'immagine o altro allora devi usare un Preloader diverso

oliverat · 3 Lug 2016

Ok, grazie per la risposta. In effetti io vorrei creare un effetto simile:
http://demo.athemes.com/sydney/

Dopo Our Work, trovi la parte Who we are e accanto le barre che partono.

Max 1 · 3 Lug 2016

L'effetto Preloader è appunto quello che parte al caricamento di un oggetto ma è diverso dal tuo.
Io ora ti sto rispondendo da mobile e non posso fare grandi ricerche ma se tu fai una piccola ricerca in rete con Preloader troverai tanti script già pronti devi solo scegliere

oliverat · 3 Lug 2016

Grazie Max, vedo di trovare altro allora

Cerca

Cerca

[HTML] Progress Bar

oliverat

Nuovo Utente

cris8380

Moderatore

oliverat

Nuovo Utente

Max 1

Super Moderatore

oliverat

Nuovo Utente

Max 1

Super Moderatore

Max 1

Super Moderatore

oliverat

Nuovo Utente

Max 1

Super Moderatore

oliverat

Nuovo Utente

Discussioni simili