Визуализация шагов на Bootstrap 5

Иногда некоторые процессы взаимодействия пользователя с сайтом удобно разбить на несколько шагов. Например, это может быть форма регистрации, заполнения анкеты или процесс оформления заказа в интернет-магазине. Для этих целей в Bootstrap 5 есть готовое решение, которое может прекрасно справиться с этой задачей. Сделано оно на компоненте аккордеона Bootstrap 5, и вы можете разместить внутри каждого шага любой контент. Это может быть простой текст, либо элементы формы, которые будут отображаться по мере прохождения каждого шага.

Давайте рассмотрим простой пример реализации шагов на Bootstrap 5. Для начала нам следует подключить саму библиотеку Bootstrap 5. Для этого в заголовке страницы, между тегами head добавьте строку подключения CSS-библиотеки из CDN.

<!-- Bootstrap 5.1 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

Далее размещаем основную вёрстку страницы, соответственно она должна находиться между тегами body:

<div class="container">
	<div class="accordion" id="accordionExample">
		<div class="steps">
			<progress id="progress" value=0 max=100 ></progress>
			<div class="step-item">
				<button class="step-button text-center" type="button" data-bs-toggle="collapse"
					data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					1
				</button>
				<div class="step-title">шаг</div>
			</div>
			<div class="step-item">
				<button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"
					data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					2
				</button>
				<div class="step-title">шаг</div>
			</div>
			<div class="step-item">
				<button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"
					data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					3
				</button>
				<div class="step-title">шаг</div>
			</div>
		</div>

		<div class="card">
			<div  id="headingOne"></div>
			<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
				data-bs-parent="#accordionExample">
				<div class="card-body">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
				</div>
			</div>
		</div>
		<div class="card">
			<div  id="headingTwo"></div>
			<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
				<div class="card-body">
					In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
				</div>
			</div>
		</div>
		<div class="card">
			<div  id="headingThree"></div>
			<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
				data-bs-parent="#accordionExample">
				<div class="card-body">
					Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
				</div>
			</div>
		</div>
	</div>
</div>

Так же следует дополнительно прописать стили для визуализации, для этого в CSS файле вашего проекта или на самой страницы следует добавить записи:

.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}
.step-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: var(--prm-gray);
    transition: .4s;
}
.step-button[aria-expanded="true"] {
    width: 60px;
    height: 60px;
    background-color: var(--prm-color);
    color: #fff;
}
.done {
    background-color: var(--prm-color);
    color: #fff;
}
.step-item {
    z-index: 10;
    text-align: center;
}
#progress {
  -webkit-appearance:none;
    position: absolute;
    width: 95%;
    z-index: 5;
    height: 10px;
    margin-left: 18px;
    margin-bottom: 18px;
}

/* правим стили прогресс-бара */
#progress::-webkit-progress-value {
    background-color: var(--prm-color);
    transition: .5s ease;
}
#progress::-webkit-progress-bar {
    background-color: var(--prm-gray);
}

Ну и в завершении, чтобы всё это дело начало работать, внизу страницы, до закрывающего тега body следует подключить JS-библиотеку Bootstrap 5, а так же добавить небольшой код:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script>
const stepButtons = document.querySelectorAll('.step-button');
const progress = document.querySelector('#progress');

Array.from(stepButtons).forEach((button,index) => {
    button.addEventListener('click', () => {
        progress.setAttribute('value', index * 100 /(stepButtons.length - 1) );// 3 кнопки / 2 пробела

        stepButtons.forEach((item, secindex)=>{
            if(index > secindex){
                item.classList.add('done');
            }
            if(index < secindex){
                item.classList.remove('done');
            }
        })
    })
})
</script>

Как вы уже наверное поняли количество шагов можно менять произвольно.
Ссылка на пример: Демо / Скачать архив