リング効果とマウスの迅速な情報を備えたフロントエンドの進行状況バーを実装する方法は？

クールなフロントエンドの進行状況バー：リングエフェクトとマウスのプロンプトを作成する

フロントエンドの進行状況バーの実装は簡単に思えますが、美学と機能の両方を考慮するにはスキルが必要です。この記事では、リング効果とマウスオーバープロンプトを備えたカスタムプログレスバーを作成する方法について説明します。

まず、中央のリングとマウスオーバープロンプトを含むコア要素を備えたプログレスバーを実装する必要があります。この記事では、特定のUIフレームワークに依存して柔軟性を高める代わりに、純粋にネイティブJavaScript、CSS、およびHTMLを使用します。

課題と解決策

1. リング効果の実装：既存のコンポーネントに直接ノードを挿入すると、互換性の問題や制限がある場合があります。したがって、CSSスタイルとHTML構造を介してリングを構築することを選択しました。

2. マウスホバープロンプト：これには、JavaScriptを使用してmousemoveイベントをリッスンし、迅速な情報を動的に生成または更新する必要があります。

実装の手順とコードの例

1. HTML構造：進行状況バーとリングを含むコンテナを作成します。

<div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-circle"></div>
</div>

2. CSSスタイル：進行状況のバー、リング、コンテナのスタイルを定義します。

 .progress-container {
  幅：200px; /*調整可能な幅*/
  高さ：20px;
  バックグラウンドカラー：＃f0f0f0;
  位置：相対; /*絶対に配置されたリングの参照を提供*/
}

.progress-bar {
  高さ：100％;
  バックグラウンドカラー：＃4CAF50; /*カスタマイズ可能な色*/
}

.progress-circle {
  幅：15px; /*リングサイズ*/
  高さ：15px;
  背景色：白。
  国境：2pxソリッド＃4caf50;
  ボーダーラジウス：50％;
  位置：絶対;
  右：0; /*リング位置*/
  トップ：2.5px; /*垂直センタリング調整*/
}

3. JavaScriptダイナミックアップデート： JavaScriptを使用して、進行状況バーの幅を動的に調整し、マウスイベントを処理します。

 const Progressbar = document.queryselector（ '。progress-bar'）;
const ProgressContainer = document.querySelector（ '。progress-container'）;
Progress = 0; //初期進行機能updateProgress（newProgress）{
  Progress = math.min（100、math.max（0、newprogress））; //進捗状況が0-100 ProgressBar.style.width = `$ {progress}％`;の間であることを確認してください。
}

ProgressContainer.AddeventListener（ 'mousemove'、（e）=> {
  const rect = progresscontainer.getBoundingClientRect（）;
  const x = e.clientx -rect.left;
  constulatedprogress =（x / rect.width） * 100;
  updateprogress（calculatedprogress）; //リアルタイム更新の進行状況//プロンプト情報を表示（ツールチップライブラリまたはカスタムプロンプトボックスを使用できます）
  const tooltip = document.createelement（ 'div'）;
  tooltip.classlist.add（ 'tooltip'）;
  tooltip.textContent = `$ {calculatedProgress.tofixed（0）}％`;
  tooltip.style.left = `$ {x} px`;
  tooltip.style.top = `$ {rect.bottom 5} px`; //プロンプトボックスの場所document.body.appendchild（tooltip）;
}）;


ProgressContainer.AddeventListener（ 'Mouseout'、（）=> {
  //プロンプトメッセージconst tooltip = document.queryselector（'。tooltip '）を削除します。
  if（tooltip）{
    document.body.RemoveChild（ToolTip）;
  }
}）;

//例：進行状況の変更setinterval（（）=> {
  UpdateProgress（Progress 5）;
}、1000）; //進捗を1秒あたり5％増加させます

ツールチップのスタイルを追加することを忘れないでください：

 .tooltip {
  位置：絶対;
  バックグラウンドカラー：＃333;
  色：白;
  パディング：5px 10px;
  ボーダーラジウス：5px;
  不透明：0.9;
  ポインターイベント：なし; /*マウス閉塞イベントを防ぐ*/
}

このコードは、マウスが動くときに進行状況の更新とプロンプト情報表示を実施するだけでなく、基本的な進行状況バーとリングエフェクトを実装します。 Animation Effectsの追加、より洗練された迅速な情報など、実際のニーズに応じてCSSスタイルとJavaScriptロジックを調整できます。ユーザーエクスペリエンスを改善するには、より成熟したツールチップライブラリを使用して迅速な情報を処理することを検討してください。

以上がリング効果とマウスの迅速な情報を備えたフロントエンドの進行状況バーを実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。