ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、jQuery: アニメーション化された読み込み進行状況バーを作成する
HTML、CSS、jQuery: アニメーション化された読み込み進行状況バーを作成する
- 王林オリジナル
- 2023-10-27 10:00:521563ブラウズ
HTML、CSS、および jQuery: アニメーション効果を備えた読み込み進行状況バーを作成する
読み込み進行状況バーは、一般的な Web ページの読み込み効果であり、ユーザーが明確に確認できるようにします。ユーザーエクスペリエンスを向上させるために、現在のページの読み込みの進行状況を確認します。この記事では、HTML、CSS、jQuery を使用してアニメーション効果のある読み込み進行状況バーを作成し、具体的なコード例を示します。
HTML 構造
まず、HTML の基本構造を作成します。進行状況バーを含むコンテナ要素が必要で、その中に進行状況を表示する要素を追加します。
<!DOCTYPE html>
<html>
<head>
<title>加载进度条</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS スタイル
次に、進行状況バーを美しくするための CSS スタイル シートを作成する必要があります。疑似要素を使用して、プログレス バーにアニメーション効果を作成します。
body {
background-color: #f1f1f1;
}
.progress-container {
width: 100%;
background-color: #ddd;
}
.progress-bar {
width: 0%;
height: 20px;
background-color: #4CAF50;
animation: progress-animation 2s linear;
}
/* 创建进度条动画 */
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 100%; }
}jQuery コード
最後に、jQuery を使用して進行状況バーの読み込み効果を制御する必要があります。 animate() メソッドを使用して、指定された時間内で進行状況バーの幅を変更します。
$(document).ready(function(){
// 定义进度条的目标宽度（根据需要自行修改）
var targetWidth = 80;
// 获取进度条元素
var progressBar = $(".progress-bar");
// 使用animate()方法来改变进度条的宽度
progressBar.animate({
width: targetWidth + "%"
}, 2000);
});上記のコードでは、ページが読み込まれた後、animate() メソッドを使用して、進行状況バーの幅を 0% から指定されたターゲット幅まで徐々に増やします (ここではは 80%)、プロセスには 2 秒かかります。
上記のコードを script.js ファイルとして保存し、CSS スタイルを style.css ファイルとして保存し、HTML ファイルと同じディレクトリに配置します。 。
HTML ファイルを開いてブラウザでページをプレビューすると、アニメーション付きの読み込み進行状況バーが表示されます。
要約すると、HTML、CSS、jQuery を使用して、アニメーション効果のある読み込み進行状況バーを作成することができました。これらの基本知識を習得することで、Web ページでより豊かなインタラクティブな効果を実現し、ユーザー エクスペリエンスを向上させることができます。この記事がお役に立てば幸いです!
以上がHTML、CSS、jQuery: アニメーション化された読み込み進行状況バーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。