Как лучше сделать progress bar

let progress = document.querySelectorAll('[data-progress]'); 
 
window.addEventListener('load', () => { 
	progress.forEach(element => { 
	 
  let progress_width = +(element.getAttribute('data-progress'));  
	 
  //Если наши скиллы выше 100%, немного становимся скромнее. 
	if(progress_width > 100) { 
		progress_width = 100; 
	} 
		element.style.width = progress_width + '%'; 
	}) 
})

* { 
  box-sizing: border-box; 
} 
 
.wrapper { 
  width: 400px; 
  margin: 30px auto; 
} 
.wrapper .rating-title { 
  font-family: sans-serif; 
  font-weight: 600; 
} 
.wrapper .rating-item { 
  height: 10px; 
  border-radius: 10px; 
  border: 2px solid #42bcff; 
  position: relative; 
  margin-top: 15px; 
  margin-bottom: 35px; 
} 
.wrapper .rating-item_progress { 
  width: 0; 
  position: absolute; 
  left: 0; 
  top: 0; 
  height: 6px; 
  background-color: #42bcff; 
  -webkit-transition: cubic-bezier(0.86, 0, 0.07, 1) 1s; 
  transition: cubic-bezier(0.86, 0, 0.07, 1) 1s; 
} 
.wrapper .rating-item_progress:after { 
  content: ""; 
  display: block; 
  width: 20px; 
  height: 20px; 
  border: 3px solid #fff; 
  border-radius: 50%; 
  background-color: #42bcff; 
  position: absolute; 
  right: -10px; 
  top: 50%; 
  -webkit-transform: translatey(-50%); 
          transform: translatey(-50%); 
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); 
}

<div class="wrapper">  
	<div class="rating"> 
		<div class="rating-title"> 
			HTML 
		</div> 
		<div class="rating-item"> 
			<div class="rating-item_progress" data-progress="30"> 
				 
			</div> 
		</div> 
		<div class="rating-title"> 
			CSS 
		</div> 
		<div class="rating-item"> 
			<div class="rating-item_progress" data-progress="130"> 
				 
			</div> 
		</div> 
		<div class="rating-title"> 
			Javascript 
		</div> 
		<div class="rating-item"> 
			<div class="rating-item_progress" data-progress="70"> 
				 
			</div> 
		</div> 
	</div> 
</div>

<meter value=0.42></meter> 
<progress value=0.13></progress> 
<input type=range value=50>