Vue は動的な円形のパーセンテージ進捗バーを実装します

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装する必要があることに気付きました。

初心者なので実装が難しいと感じたので、他の人のやり方を見るためにBaiduに行きましたが、満足のいくものは見つかりませんでした。静的な実装か、多くのDOM操作が必要でした。ミニプログラムで直接DOM操作を行うことは避けたほうがよいでしょう。

以下は、Vue コンポーネントの形式で作成した動的実装です。まずは効果図を示します。

効果

実装手順

円グラフを描く

.pie {
  表示: インラインブロック;
  位置: 相対的;
  幅: 150ピクセル;
  高さ: 150px;
  上マージン: 40px;
  境界線の半径: 50%;
  背景: #ccc;
  背景画像: linear-gradient(右へ、透明度 50%、#4479FD 0);
  色: 透明;
  テキスト配置: 中央;
}

比例効果を実現する

これは、疑似要素の遮蔽と動きを追加することで実現されます。コードは次のとおりです。

.pie::before {
  コンテンツ: '';
  位置: 絶対;
  上: 0; 左: 50%;
  幅: 50%; 高さ: 100%;
  境界線の半径: 0 100% 100% 0 / 50%;
  背景色: 継承;
  変換の原点: 左;
  アニメーション: スピン 5 秒 線形無限、背景 10 秒 ステップ終了 無限。
}
@keyframes スピン {
  に { transform: rotate(.5turn); }
}
@キーフレーム背景{
  50% { 背景: #4479FD; }
} 

CSSアニメーション遅延プロパティの使用

上記のアニメーション時間をそれぞれ50、100に変更すると、対応する遅延秒数をanimation-delayに直接渡すことができます。たとえば、-60秒は60%で表示されます。

アニメーション再生状態: 一時停止;
アニメーション遅延: -60秒;

トーラス形状の実現

div内に直接配置されたdivを追加する

<div class="pie">
  <div class="pie-inner">
  {{num}}%
  </div>
</div>

一定速度のアニメーションを追加する

startAnimate (ステップ、制限、速度) {
  タイムアウトを設定する(() => {
  // numはパーセンテージです if (this.num < limit) {
      this.num += ステップ
      this.startAnimate(ステップ、制限、速度)
    } それ以外 {
      this.num = 制限
    }
  }、 スピード)
}

計算プロパティをアニメーション遅延にバインドする

数値を対応する遅延秒数にリアルタイムで変換します

計算: {
    遅れ () {
      `-${this.num}s` を返す
    }
}

要約する

これまでのところ、動的な円形のパーセンテージ進捗バーは基本的に実現されていますが、まだ完璧ではありません。ご意見やご質問がございましたら、お気軽にお寄せください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue+ElementUI+echarts フロントエンドとバックエンドのインタラクションを使用して、Springboot プロジェクトで動的なドーナツ チャートを実現する (推奨)
  • Springboot は、vue+echarts のフロントエンドとバックエンドのインタラクションを使用して、動的なドーナツ チャートを実現します。
  • Vue 円形パーセンテージ プログレスバー コンポーネントの機能の実装
  • Vue で円形プログレスバーを実装する例
  • Vueは3/4ドーナツチャートの効果を動的に描画します
  • echarts を使用して Vue でドーナツ チャートを作成するサンプル コード
  • Vueはキャンバスを使用して円を描画します

<<:  MySQL コマンドラインモードアクセス操作 MySQL データベース操作

>>:  Linux ディスク パーティションの実装の原理と方法の分析

推薦する

MySQL 5.7.19 Winx64 ZIP アーカイブのインストールと使用に関する問題の概要

今日はMySQLのインストール方法を学びましたが、その過程でいくつか問題が発生しました。関連記事をい...

Vueはキャンバスの手書き入力を使用して中国語を認識します

効果画像: 序文:最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくか...

Linux での感嘆符コマンド (!) の使用の概要

序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...

MySQL トランザクション分離レベルの原則例分析

導入あなたも面接でこれに遭遇したことがあるはずです。トランザクションの分離レベルについてお話ししまし...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

JavaScript操作要素は、ページコンテンツのスタイルを変更する方法を教えます

目次1. 操作要素1.1. 要素コンテンツの変更1.2. innerText と innerHtml...

クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析

概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...

Vue プロジェクトでブラウザ キャッシュ設定を無効にする例

プロジェクトをリリースするときに、キャッシュをクリーンアップする必要があるという問題に遭遇することが...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

MySQL の CPU 負荷が高い問題のトラブルシューティング

MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...

システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル

ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...