TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere progressi animati o barra delle abilità in Weebly?

15

Le barre di avanzamento o abilità sono set di barre semplici o animate generalmente utilizzate per mostrare i dati con barre orizzontali. Le barre di avanzamento sono utili in molti scenari come:

  • Mostrando le tue abilità su una pagina su di me
  • Metti in mostra le abilità dei membri del tuo team
  • Confrontando set di attributi, ad esempio confrontando tutti gli strumenti gratuiti per la creazione di siti su una scala del 100%

In questo articolo spiegheremo come aggiungere la barra di avanzamento o abilità nel sito Weebly con l’animazione jQuery al caricamento. Dai un’occhiata a questo articolo, se vuoi aggiungere il grafico dei progressi a torta cerchiato in WEebly.

Aggiunta della barra di avanzamento animata jQuery

La barra di avanzamento apparirà come di seguito. Viene creato con CSS e jQuery che verranno animati automaticamente alla percentuale specificata quando la pagina viene caricata.

Come aggiungere progressi animati o barra delle abilità in Weebly?

Ha tre componenti principali:

  • Un titolo con colore di sfondo fisso controllato in CSS
  • Animazione della barra di avanzamento controllata in jQuery con la larghezza definita in HTML
  • Percentuale di testo controllata in HTML

Nota: si consiglia di posizionare il widget nella parte superiore della pagina in modo che l’animazione sia visibile agli utenti.

CSS per barra di avanzamento animata jQuery

Aggiungi il seguente CSS nella sezione "Codice intestazione" della pagina o a livello di sito. Puoi anche aggiungere il codice nel file "main.less" senza i tag.

<style> .progressbar { position:relative; display:block; margin-bottom:15px; width:100%; background:#eee; height:35px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-transition:0.4s linear; -moz-transition:0.4s linear; -ms-transition:0.4s linear; -o-transition:0.4s linear; transition:0.4s linear; -webkit-transition-property:width, background-color; -moz-transition-property:width, background-color; -ms-transition-property:width, background-color; -o-transition-property:width, background-color; transition-property:width, background-color; } .progressbar-title { position:absolute; top:0; left:0; width:170px; font-weight:600; font-size:16px; color:#ffffff; background:#93ab3a; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; border-top-left-radius:3px; border-bottom-left-radius:3px; } .progressbar-title span { display:block; background:rgba(0, 0, 0, 0.1); padding:0 20px; height:35px; line-height:35px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; border-top-left-radius:3px; border-bottom-left-radius:3px; } .progressbar-bar { height:35px; width:0px; background:#6adcfa; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .progress-bar-percent { position:absolute; right:10px; top:0; font-size:15px; height:35px; line-height:35px; color:#ffffff; color:rgba(0, 0, 0, 0.4); } </style>

Come accennato in precedenza, lo sfondo del titolo viene corretto utilizzando "background:#93ab3a;" attributo definito nella classe “.progressbar-title".

Script per barra di avanzamento animata jQuery

Aggiungi lo script seguente nella sezione "Codice piè di pagina" della pagina in cui desideri aggiungere la barra di avanzamento.

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.progressbar').each(function(){ jQuery(this).find('.progressbar-bar').animate({ width:jQuery(this).attr('data-percent') },6000); }); }); </script>

La velocità di animazione è definita come 6000ms che può essere modificata per aumentare o diminuire la velocità (più basso è il valore maggiore è la velocità).

HTML per la barra di avanzamento del caricamento automatico

La parte finale è il codice HTML, aggiungi il codice HTML sottostante all’interno di un elemento "Codice da incorporare" nella tua pagina Weebly:

<!-- Start of 1 progress Bar --> <div class="progressbar clearfix " data-percent="60%"> <div class="progressbar-title"><span>SEO</span></div> <div class="progressbar-bar" style="background: #e67e22;"></div> <div class="progress-bar-percent">60%</div> </div> <!-- End of 1 progress Bar --> <!-- Start of 2 progress Bar --> <div class="progressbar clearfix " data-percent="75%"> <div class="progressbar-title"><span>Web Design</span></div> <div class="progressbar-bar" style="background: #3498db;"></div> <div class="progress-bar-percent">75%</div> </div>  <!-- End of 2 progress Bar --> <!-- Start of 3 progress Bar --> <div class="progressbar clearfix " data-percent="70%"> <div class="progressbar-title"><span>Weebly Design</span></div> <div class="progressbar-bar" style="background: #2c3e50;"></div> <div class="progress-bar-percent">70%</div> </div> <!-- End of 3 progress Bar --> <!-- Start of 4 progress Bar --> <div class="progressbar clearfix " data-percent="60%"> <div class="progressbar-title"><span>WordPress Design</span></div> <div class="progressbar-bar" style="background: #5a68a5;"></div> <div class="progress-bar-percent">60%</div> </div>  <!-- End of 4 progress Bar --> <!-- Start of 5 progress Bar --> <div class="progressbar clearfix " data-percent="65%"> <div class="progressbar-title"><span>Content Writing</span></div> <div class="progressbar-bar" style="background: #525252;"></div> <div class="progress-bar-percent">65%</div> </div>  <!-- End of 5 progress Bar --> <!-- Start of 6 progress Bar --> <div class="progressbar clearfix " data-percent="100%"> <div class="progressbar-title"><span>Blog Consulting</span></div> <div class="progressbar-bar" style="background: #2ecc71;"></div> <div class="progress-bar-percent">100%</div> </div>  <!-- End of 6 progress Bar --> <!-- Start of 7 progress Bar --> <div class="progressbar clearfix " data-percent="70%"> <div class="progressbar-title"><span>Plugin Development</span></div> <div class="progressbar-bar" style="background: #4288d0;"></div> <div class="progress-bar-percent">70%</div> </div> <!-- End of 7 progress Bar -->

Ogni singolo codice a barre di avanzamento è commentato all’interno del blocco di inizio e fine, è possibile copiare/incollare il blocco per aggiungere ulteriori barre.

Personalizzazione del codice HTML per le barre di avanzamento

Di seguito l’immagine indica come ogni riga del codice HTML influisce sui componenti della barra di avanzamento:

Come aggiungere progressi animati o barra delle abilità in Weebly?

Spiegazione del codice HTML della barra di avanzamento

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More