(Sample)
進捗バーを動かすためには、一定時間ごとにバーの幅を変更するJavaScriptを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- ① -->
<!-- Bootstrap CSS -->
<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>animated-progress-bar.html</title>
<style>
.progress-bar-text {
position: absolute;
width: 100%;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2>アニメーションストライプの進捗バー</h2>
<div class="progress position-relative">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<span class="progress-bar-text">0%</span>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const progressBar = document.querySelector('.progress-bar');
const progressBarText = document.querySelector('.progress-bar-text');
let progress = 0;
function updateProgressBar() {
progress += 1;
if (progress > 100) {
progress = 0;
}
progressBar.style.width = progress + '%';
progressBar.setAttribute('aria-valuenow', progress);
progressBarText.textContent = progress + '%';
}
setInterval(updateProgressBar, 100); // 100ミリ秒ごとに進捗バーを更新
});
</script>
</body>
</html>このコードのポイントは以下の通りです。
progress-bar要素とprogress-bar-text要素を取得して、それぞれの幅とテキストを更新します。updateProgressBar関数で進捗バーの幅を増加させ、100%を超えたら0%に戻ります。setInterval関数を使ってupdateProgressBar関数を100ミリ秒ごとに実行します。
以上。