Ronde skill bars

Ronde skill bars

Bekijk een online voorbeeld via deze link:  https://www.leerschool.be/api/examples/rond.html

In het onderstaande voorbeeld toon ik je hoe je ronde geanimeerde skill bars kan bouwen met de combinatie html, css en javascript. 

Opgelet: ik toon je in het voorbeeld hieronder enkel hoe je skill bars kan toevoegen aan een webpagina. Ik leg je niet uit hoe de code precies werkt. 

CSS-code toevoegen

Voeg de onderstaande code toe aan je CSS-bestand. 

.bars {
    display:flex;
    width:80%;
    margin:auto;
    flex-wrap:wrap;
}

.bar {
    flex: 0 0 20%;
    text-align: center;
}

.bar-circle {
    display: block;
    margin: 0.7em auto;
}
Als je meerdere skill bars aan je website of webpagina wil toevoegen, moet je deze code slechts één keer toevoegen.

Het javascript toevoegen

Aan elke pagina waar je een of meerdere skill bars aan wil toevoegen, moet je een stuk javascriptcode toevoegen. Die code staat hieronder. Voeg die toe net voor </body>. Je moet die code slechts één keer in de pagina plakken om de skill bars te activeren.   

<script src="https://www.leerschool.be/api/js/roundskillbars.js"></script>

Een "ronde" skill bar bouwen met HTML

In principe kan je op heel eenvoudige manier een "ronde skill bar" toevoegen. Wil je echter gebruik maken van bovenstaande CSS, dan is het belangrijk om alle "skill bars" die samen horen, in een wrapper-element met de stijlklasse "bars" te stoppen.  

<section class="bars"></section>

Vervolgens kan je één of meerdere "skill bars" toevoegen aan dat wrapper-element:

  • Een skillbar voeg je toe met een <article>-element. Dat article-element krijgt de stijlklasse "bar". Het attribuut "data-percent" geeft het percentage weer. 
  • Elk <article>-element bevat een <h3>-titelelement met het "opschrift/label".
  • Elk <article>-element bevat een <canvas>-element (dat is een "tekengebied"). 

Elk <canvas>-element krijgt 3 attribuutwaarden:

  1. class="bar-circle" (noodzakelijk)
  2. data-color: hier voer je de kleur voor de cirkel in (optioneel)
  3. data-textcolor: hier voor je de kleur voor het label in (optioneel)
<section class="bars">
     <article class="bar" data-percent="90">
          <h3>Nederlands</h3>
          <canvas class="bar-circle" data-color="orange" data-textcolor="orange"></canvas>
     </article>
     <article class="bar" data-percent="60">
          <h3>Frans</h3>
          <canvas class="bar-circle" data-color="orange" data-textcolor="orange"></canvas>
     </article>
</section>
Volgende pagina