Progress bar di caricamento in stile youtube? Ecco come...

Forum misto con frammenti di codice
Rispondi
Avatar utente
salvocortesiano
Membro phpBB3World
Membro phpBB3World
Messaggi: 58
Iscritto il: 20 gen 2013, 9:22
Località: Firenze
Contatta:

Progress bar di caricamento in stile youtube? Ecco come...

Messaggio da salvocortesiano » 17 gen 2014, 18:53

[Snip] Progress bar di caricamento in stile youtube? Ecco come... (2014)

Immagine
Con questo piccolo snippet potrete avere anche voi l'ormai famosa barra di caricamento in stile youtube. Quella barra Rossa che si nota in cima per intenderci :D

1. Scaricatevi l'archivio "progress.rar"
2. Uplodare il file (pace.min.js) contenuto nell'archivio dentro la cartella "js" del vostro forum.
- Se la cartella non ci fosse, createla via FTP!
3. Uplodare il file (pace_progress.css) in: root/styles/prosilver/theme/
4. Seguite le istruzioni riportate di seguito.

APRI:

Codice: Seleziona tutto

root/styles/subsilver2/overall_header.html
TROVA:

Codice: Seleziona tutto

</head>
AGGIUNGI PRIMA:

Codice: Seleziona tutto

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<script type="text/javascript" src="{SITE_FULL_URL}/js/pace.min.js"></script>
Nel caso nell'overall_header.html si trovasse già una chiamata che punta alla "jquery.min.js", omettetela, in caso contrario lasciatela!
APRI:

Codice: Seleziona tutto

root/styles/subsilver2/stylesheet.css
TROVA:

Codice: Seleziona tutto

.username-coloured {
	font-weight: bold;
}
AGGIUNGI DOPO:

Codice: Seleziona tutto

/* Pace.js Loader */
.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
}
Questo per quanto riguarda lo stile subsilver2. Adesso procediamo con lo stile prosilver.
APRI:

Codice: Seleziona tutto

root/styles/prosilver/overall_header.html
TROVA:

Codice: Seleziona tutto

</head>
AGGIUNGI PRIMA:

Codice: Seleziona tutto

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<script type="text/javascript" src="{SITE_FULL_URL}/js/pace.min.js"></script>
Nel caso nell'overall_header.html si trovasse già una chiamata che punta alla "jquery.min.js", omettetela, in caso contrario lasciatela!
APRI:

Codice: Seleziona tutto

root/styles/prosilver/stylesheet.css
TROVA:

Codice: Seleziona tutto

@import url("colours.css");
AGGIUNGI DOPO:

Codice: Seleziona tutto

@import url("pace_progress.css");
Fatto! Uplodare tutti i files modificati via FTP nelle rispettive cartelle di appartenenza. Accedete al PCA (Pannello di Controllo Amministratore) svuotate la cache e fate un refresh dei rispettivi templates. Avete finito! Adesso ogni volta che una qualsiasi pagina del vostro forum verrà caricata, avrete l'effetto barra di avanzamento in stile youtube![/i][/b]
YouTube
Un video dimostrativo tanto per farvi capire cos'è e come funziona. Guardatelo in full-screens e possibilmente ad una risoluzione di 720dpi...
Download:
Scaricatevi l'allegato oppure cliccate sul link sottostante. Per chiarimenti e/o supporto, contattatemi pure ;)

[Click] per scaricare l'archivio con i files

[Edit]: Per chi volesse la barra di scorrimento di color "rosso" proprio come quella di youtube e magari con qualche effetto in più, tipo: oltre alla barra anche un semicerchio localizzato in alto alla destra del forum. Procedere alla seguente modifica:

X subsilver2
APRI:

Codice: Seleziona tutto

root/styles/subsilver2/stylesheet.css
TROVA:

Codice: Seleziona tutto

/* Pace.js Loader */
.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
}
SOSTITUISCI CON:

Codice: Seleziona tutto

/* Pace.js Loader */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ff0000;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #ff0000, 0 0 5px #ff0000;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #ff0000;
  border-left-color: #ff0000;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
X prosilver
APRI:

Codice: Seleziona tutto

root/styles/prosilver/pace_progress.css
TROVA:

Codice: Seleziona tutto

/* Pace.js Loader */
.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
}
SOSTITUISCI CON:

Codice: Seleziona tutto

/* Pace.js Loader */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ff0000;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #ff0000, 0 0 5px #ff0000;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #ff0000;
  border-left-color: #ff0000;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
Fatto! Uplodare tutti i files modificati via FTP nelle rispettive cartelle di appartenenza. Accedete al PCA (Pannello di Controllo Amministratore) svuotate la cache e fate un refresh dei rispettivi templates. Avete finito! Adesso ogni volta che una qualsiasi pagina del vostro forum verrà caricata, avrete l'effetto barra di avanzamento di color "rosso" più l'effetto semicerchio in stile youtube![/b]
YouTube
Gurda il video dimostrativo! Consiglio una risoluzione a 720dpi o 1080dpi....
Per chi volesse cambiare il colore della barra di avanzamento. Aprite il foglio di stile .css
trovare: background: #ff0000; e sostituire #ff0000 con il colore che più vi piace ;)
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
Ultima modifica di salvocortesiano il 18 gen 2014, 23:10, modificato 2 volte in totale.
Sono amico di tutti, ma alle condizioni di nessuno!

Avatar utente
Rey
Staff phpBB3World
Staff phpBB3World
Messaggi: 563
Iscritto il: 3 nov 2012, 13:41
Località: 在世界上
Contatta:

Re: Progress bar di caricamento in stile youtube? Ecco come.

Messaggio da Rey » 17 gen 2014, 19:19

Bellissimo effetto è grandissima guida, che dire superbo. :/>

Avatar utente
salvocortesiano
Membro phpBB3World
Membro phpBB3World
Messaggi: 58
Iscritto il: 20 gen 2013, 9:22
Località: Firenze
Contatta:

Re: Progress bar di caricamento in stile youtube? Ecco come.

Messaggio da salvocortesiano » 17 gen 2014, 20:06

Grazie Rey :D
Volevo quell'effetto a tutti i costi, ma le varie guide in rete erano troppo complesse e alle volte troppo semplicistiche, infatti non funzionavano, oppure prevedevano la barra di caricamento a dei link images o video! Questa, scorre benissimo fino a che, qualsiasi pagina del sito o forum non viene caricata del tutto ;)
Sono amico di tutti, ma alle condizioni di nessuno!

Avatar utente
salvocortesiano
Membro phpBB3World
Membro phpBB3World
Messaggi: 58
Iscritto il: 20 gen 2013, 9:22
Località: Firenze
Contatta:

Re: Progress bar di caricamento in stile youtube? Ecco come.

Messaggio da salvocortesiano » 18 gen 2014, 23:06

Topic aggiornato:
La barra di progresso adesso è di color rosso in vero stile youtube.
Oltre alla barra, verrà anche visualizzato un semicerchio di caricamento situato in alto a destra del forum o sito web.
Aggiornato anche lo stile .css, reso compatibile con i maggiori browser web: IE 8/9/10/11, Firefox, Opera, Google Chrome!
Compatibile anche con WordPress ;)
Sono amico di tutti, ma alle condizioni di nessuno!

Avatar utente
Rey
Staff phpBB3World
Staff phpBB3World
Messaggi: 563
Iscritto il: 3 nov 2012, 13:41
Località: 在世界上
Contatta:

Re: Progress bar di caricamento in stile youtube? Ecco come.

Messaggio da Rey » 18 gen 2014, 23:49

Preciso e premuroso. :/>

Avatar utente
salvocortesiano
Membro phpBB3World
Membro phpBB3World
Messaggi: 58
Iscritto il: 20 gen 2013, 9:22
Località: Firenze
Contatta:

Re: Progress bar di caricamento in stile youtube? Ecco come.

Messaggio da salvocortesiano » 20 gen 2014, 4:14

Grazie Rey :mrgreen:
Sono amico di tutti, ma alle condizioni di nessuno!

Rispondi

Torna a “Snippets”

Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti