TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä animoitu edistyminen tai taitopalkki Weeblyyn?

8

Edistymis- tai taitopalkit koostuvat yksinkertaisista tai animoiduista palkeista, joita käytetään yleensä tietojen esittämiseen vaakasuorilla palkeilla. Edistymispalkit ovat hyödyllisiä monissa tilanteissa, kuten:

  • Näytä osaamisesi Minua -sivulla
  • Esittele tiimisi jäsenen taidot
  • Vertaa määritteitä, esimerkiksi vertaamalla kaikkia ilmaisia ​​sivustonmuodostustyökaluja 100%: n asteikolla

Tässä artikkelissa kerromme, kuinka voit lisätä edistymis- tai taitopalkin Weebly -sivustoon jQuery -animaation avulla. Katso tämä artikkeli, jos haluat lisätä ympyröity piirakka edistymiskaavion WEeblyyn.

Lisätään jQuery Animated Progress Bar

Edistymispalkki näyttää alla olevalta. Se luodaan CSS: llä ja jQueryllä, joka animoidaan määritettyyn prosenttiosuuteen automaattisesti, kun sivu ladataan.

Kuinka lisätä animoitu edistyminen tai taitopalkki Weeblyyn?

Siinä on kolme pääkomponenttia:

  • Otsikko, jolla on kiinteä taustaväri CSS: ssä
  • Edistymispalkki -animaatio, jota ohjataan jQueryssä ja jonka leveys on määritetty HTML -muodossa
  • Prosentuaalinen teksti, jota hallitaan HTML: ssä

Huomautus: On suositeltavaa sijoittaa widget sivun päälle, jotta animaatio näkyy käyttäjille.

CSS jQuery Animated Progress Barille

Lisää alla oleva CSS sivun Otsikkokoodi -osioon tai sivuston tasolle. Voit myös lisätä koodin main.less -tiedostoon ilman tunnisteita.

<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>

Kuten edellä mainittiin, otsikon tausta korjataan käyttämällä "background:#93ab3a;" määritteellä, joka on määritelty luokassa ".progressbar-title".

Käsikirjoitus jQuery Animated Progress Barille

Lisää alla oleva komentosarja sen sivun alatunnisteen kohtaan, johon haluat lisätä edistymispalkin.

<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>

Animaationopeus on 6000 ms, jota voidaan muuttaa nopeuden lisäämiseksi tai vähentämiseksi (mitä pienempi arvo, sitä suurempi nopeus).

HTML automaattisen latauksen edistymispalkille

Viimeinen osa on HTML -koodi, lisää alla oleva HTML -koodi Weedly -sivusi Upota koodi -elementtiin:

<!-- 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 -->

Jokainen yksittäinen edistymisviivakoodi kommentoidaan aloitus- ja lopetuslohkossa, voit kopioida / liittää lohkon lisätäksesi lisää palkkia.

HTML -koodin mukauttaminen edistymispalkkeihin

Alla oleva kuva osoittaa, kuinka jokainen HTML -koodirivi vaikuttaa edistymispalkkiin:

Kuinka lisätä animoitu edistyminen tai taitopalkki Weeblyyn?

Progress Bar HTML Code Selitys

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja