JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<span class="level" data-progress="80">Competence 1</span>
<span class="level" data-progress="40">Competence 2</span>
<span class="level" data-progress="12">Competence 3</span>
<span class="level" data-progress="38">Competence 4</span>
<span class="level" data-progress="91">Competence 5</span>

CSS

span.level {
    background-image: url(http://www.bubblews.com/assets/images/news/1049498622_1386367180.jpg);
    background-color: #0C0;
    border: 2px solid #CCC;
    background-repeat: no-repeat;
    width: 200px;
    padding: 3px;
    display: inline-block;    
}

JavaScript

$('span.level').each(function() {
    $(this).css('background-position', $(this).attr('data-progress')*2+'px 0'); 
});