Создание прогресс бара при помощи элементов before и after

Question

Как сделать прогрессбар как на скриншоте при помощи элементов before и after?

Answer 1

Вот сделал на быструю руку. Для before прописываете цвет заливки и процент который должен быть залит. Также можно использовать keyframes для анимации.

.progressbar{
    height: 15px;
    width: 200px;
    background: #ddd;
}
.progressbar::before{
    content: "";
    background: red;
    width: 70%;
    float: left;
    height: 15px;
    animation: anim 1s ease;
}
@keyframes anim{
   0%{
       width: 0%;
   }
   100%{
       width: 70%;
   }
}

<div class="progressbar">
</div>

Answer 2

Еще как пример:

let progress = document.querySelectorAll('[data-progress]');

window.addEventListener('load', () => {
	progress.forEach(element => {
	let progress_width = +(element.getAttribute('data-progress'));
		
	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>

Answer 3

Вариант с использованием псевдоэлементов, при этом сам прогресс бар работает при помощи css переменных.

body {
  background: #1d1d24;
  color: #fff;
}

.progress {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 30px;
  margin-bottom: 10px;
}

.progress-bar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: #bcbcbe;
  position: relative;
  margin-right: 10px;
  --progress: 0;
  --progress-color: #e85662;
  --progress-dot-size: 12px;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: inherit;
  border-radius: inherit;
  background: var(--progress-color);
}

.progress-bar::before {
  content: '';
  display: block;
}

.progress-bar::after {
  content: '';
  display: block;
  width: var(--progress-dot-size);
  height: var(--progress-dot-size);
  border-radius: 100%;
  background: var(--progress-color);
  position: absolute;
  left: calc((var(--progress) * 1%) - var(--progress-dot-size) / 2);
  top: calc(50% - var(--progress-dot-size) / 2);
}

.progress-num::after {
  content: '%';
}

<div class="title">User Experience</div>
<div class="progress">
  <div class="progress-bar" style="--progress: 90"></div>
  <div class="progress-num">90</div>
</div>

<div class="title">User Interface</div>
<div class="progress">
  <div class="progress-bar" style="--progress: 98"></div>
  <div class="progress-num">98</div>
</div>

<div class="title">Web Design</div>
<div class="progress">
  <div class="progress-bar" style="--progress: 70"></div>
  <div class="progress-num">70</div>
</div>

<div class="title">Default</div>
<div class="progress">
  <div class="progress-bar" style="--progress: 0"></div>
  <div class="progress-num">0</div>
</div>

БЛОГ НА HUSL

Создание прогресс бара при помощи элементов before и after

Ответы (3 шт):