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 トランザクション、分離レベル、ロックの使用例の分析

この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...

シンプルなウェブデザインコンセプトのカラーマッチング

(I)ウェブページのカラーマッチングの基本概念(1)白黒の言葉は永遠のテーマです。誰もそれを悪く言う...

Ubuntu システムにおけるネットワーク構成ファイルの分析と説明

今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...

MySql のグループ化と各グループからランダムに 1 つのデータを取得する

アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...

Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています

1. まずリクエスト設定ファイルを見て、axios.createメソッドを見てください。baseUR...

Zabbix による VMware Exsi ホストの監視のグラフィカルな手順

1. 仮想化 vcenter に入り、ブラウザでログインし (クライアントは設定する場所を見つけませ...

Dockerは元のタグのイメージの再タグ付けと削除を実装します

docker イメージ ID は一意であり、イメージを物理的に識別できます。repository: ...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

VUE+Express+MongoDBのフロントエンドとバックエンドの分離によるノートウォールの実現

付箋紙の壁シリーズを実現しようと思っています。シンプルなものはシンプル、複雑なものは多機能です。開発...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...

vue v-for ループ オブジェクトの属性

目次1. ループオブジェクト内の値2. ループオブジェクト3. キーと値のループ1. ループオブジェ...

k8sとDockerの関係についての簡単な説明

最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...

JavaScript の構造化代入の一般的なシナリオと例 5 つ

目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...