Créer une skill bar avec jQuery

Introduction

La skill bar est un des nombreux petits éléments que peuvent composer les sites internet, notamment pour les portfolios de développeur, par exemple. En effet, elle permet d’habiller de manière plus graphique une donnée chiffrée. Bien que nous pourrions réaliser cette skill bar en CSS mais pour plus de simplicité, nous allons utiliser le jQuery. Ce tutoriel va vous expliquer comment développer une fonction pour créer une skill bar en jQuery.

Développement d’une skill bar

En premier lieu, nous allons séparer les différentes parties qui vont composer ce tutoriel. Premièrement, une partie HTML afin de l’afficher. Ensuite, une partie CSS afin de lui donner du style (c’est le cas de le dire !). Et pour finir, la partie jQuery qui va rendre le tout dynamique et bien plus facile à gérer si vous avez plusieurs skill bar à gérer.

Placer une skill bar en HTML

Tout d’abord, nous allons placer notre skill bar avec ce code HTML :

<span class="skillBar" data-value=""><span></span></span>

Un élément de type span avec une class skillBar qui va nous permettre de l’identifier en CSS et en jQuery. Par la suite, nous ajoutons un attribut data, que l’on nommera data-value, qui nous permettra de mettre les données chiffrées. Pour finir, nous plaçons un second élément span à l’intérieur du premier qui servira à afficher le résultat.

Styliser une skill bar avec CSS

Pour la partie CSS, je développe avec SASS pour plus de faciliter. Nous allons donc mettre en place la classe .skillBar avec à l’intérieur de celle-ci, l’élément span interne.

Voici le code SASS pour la skill bar :

.skillBar {
  position: relative;
  display: block;
  background: rgba(53, 59, 71, .25);
  height: 5px;
  border-radius: 5px;
  overflow : hidden;
  span {
    position: absolute;
    display: block;
    content: "";
    background: #35cd3a;
    height: 100%;
    top: 0;
    left: 0;
  }
}

Dynamiser une skill bar avec jQuery

Enfin, pour la partie jQuery, nous allons rendre dynamique la largeur width de l’élément span interne à la classe .skillBar. Pour se faire, voici le code jQuery à utiliser :

$('.skillBar').each(function () {
  var skill = $(this).attr('data-value');
  $(this).find('span').css({
    width: skill + '%'
  });
});

Pour plus de compréhension, je vous explique cette fonction en français dans le texte.

Création d’une fonction qui va identifier chaque class .skillbar dans laquelle nous allons créer une variable qui va localiser l’attribut data-value de CETTE skillbar. Par la suite, nous allons localiser l’élément span de CETTE skillbar où nous attribuerons une option css width avec la valeur de la variable créée précédemment.

Conclusion

Et voilà, la skill bar est prête ! Maintenant vous savez en faire et surtout, vous avez compris le principe de fonctionnement de la fonction jQuery. On place avec le HTML, on stylise avec le CSS avec SASS et enfin, on termine avec le jQuery pour faire fonctionner le tout. Si ce n’est pas le cas, je vous invite à poster votre ou vos questions en commentaire ci-dessous. Je vous apporterai autant de précisions que possible.