Skill bars

Geanimeerde "skill bars" 

Bekijk een live voorbeeld:  https://www.leerschool.be/api/examples/info.html

In het onderstaande voorbeeld toon ik je hoe je 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. 

Opgelet: het is belangrijk dat je deze code gewoon toevoegt en niet wijzigt. Enkel in de regel "background-color:black" kan je de kleur "black" vervangen door je eigen kleurcode. 
.skillbar li{
   list-style:none;
   display:flex;
   justify-content: space-between;
   align-items:center;
}

.skillbar span:nth-child(odd){
   width:13%;
}
           
.skillbar span:nth-child(even){
   background-color:black;
   border-radius: 10px;
   height:20px;
   margin-bottom:6px;
   width:80%;
}

.skillbar span:nth-child(even) span{
   height:20px;
   border-radius:10px;
   display:block; 
   /*animation: test 2s;*/
}

@keyframes animSkills {
   0% {width: 0;}
}
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/skillbars.js"></script>

Een skill bar bouwen met HTML

Tot slot maken we een skill bar in HTML. Hiervoor gebruiken we een HTML-lijst nl. het <ul>-element. Als je aan zo'n <ul>-element de stijlklasse "skillbar" toekent, wordt die automatisch opgezet in een geanimeerde weergave. 

<ul class="skillbar"></ul>

Vervolgens voegen we "items" toe aan de <ul>-lijst. Elk lijstitem is een <li>-element (= list item). Elk <li>-element in de lijst kan vervolgens automatisch worden geanimeerd.  

<ul class="skillbar">
    <li></li>
</ul>

Tot slot voegen we aan elk <li>-element twee onderliggende <span>-elementen toe. In het eerste plaatsen we het "opschrift". Aan het tweede <span>-element geven we 2 attribuutwaarden mee. Bekijk het onderstaande voorbeeld: 

  • Bij het attribuut "data-color" geef je de gewenste kleurcode of kleurvariabele uit je CSS-bestand in.
  • Bij het attribuut "data-width" geef je een procentuele waarde in (bijvoorbeeld: hoe goed je bent in een vak).
<ul class="skillbar">
    <li>
      <span>Nederlands</span>
      <span data-color="var(--cp1)" data-width="90"></span>
    </li>
    <li>
      <span>Frans</span>
      <span data-color="var(--cp2)" data-width="60"></span>
    </li>
    <li>
      <span>Nederlands</span>
      <span data-color="var(--cp1)" data-width="90"></span>
    </li>
    <li>
      <span>Frans</span>
      <span data-color="var(--cp2)" data-width="75"></span>
    </li>
</ul>
Wil je meerdere skill bars aan je webpagina toevoegen? Dat kan. Dan maak je meerder <ul>-elementen met de stijlklasse "skillbar". 
Volgende pagina