(Sample)
Progressコンポーネントを使うと、進捗バーを表示することができます。
進捗バーは、タスクの進行状況を視覚的に示すために使用され、カスタマイズやスタイリングも可能です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- ① -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>progress-bar.html</title>
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap 5 Progress Examples</h1>
<!-- Basic Progress Bar -->
<h2>基本的な進捗バー</h2>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100">50%</div>
</div>
<!-- Striped Progress Bar -->
<h2>ストライプの進捗バー</h2>
<div class="progress mb-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%;" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<!-- Animated Striped Progress Bar -->
<h2>アニメーションストライプの進捗バー</h2>
<div class="progress mb-4">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<!-- Multiple Bars -->
<h2>複数のバー</h2>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0"
aria-valuemax="100">15%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100">30%</div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%;" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<!-- Progress Bar with Label -->
<h2>ラベル付き進捗バー</h2>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100">45%</div>
</div>
<!-- Progress Bar with Different Heights -->
<h2>異なる高さの進捗バー</h2>
<div class="progress mb-4" style="height: 1rem;">
<div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0"
aria-valuemax="100">55%</div>
</div>
<div class="progress mb-4" style="height: 1.5rem;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 70%;" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100">70%</div>
</div>
<div class="progress mb-4" style="height: 2rem;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 80%;" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<!-- Colored Progress Bars -->
<h2>カラフルな進捗バー</h2>
<div class="progress mb-4">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%;" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%;" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>