円形グラデーションプログレスバー効果を実現する CSS サンプルコード

円形グラデーションプログレスバー効果を実現する CSS サンプルコード

実装のアイデア

  • 一番外側は大きな円(グラデーションカラー)
  • グラデーションの円を覆うように、内側に半円を 2 つ描きます (わかりやすくするために、左側と右側の色が異なり、グレーブルーに設定されています)
  • 右側の青い半円を時計回りに回転させると、下のグラデーションの円が現れます。例えば、45 度 (45/360 = 12.5%) 回転させ、右側の青い半円をグレーに設定すると、12.5 の円グラフが描画されます。
  • より大きな角度で回転してみてください。180 度回転すると、右側の半円が重なります。さらに回転させると、角度がどんどん小さくなるように見え、ニーズを満たしていません。右側の円を元の位置に戻し、背景色を基本色と同じに設定し、左側の半円を時計回りに回転させます。
  • 最後に、パーセンテージを示すために中央に小さな白い円を追加します。

図に示すように:

パーセント

注目すべき特性:

  • background-image は、要素に 1 つ以上の背景画像を設定するために使用されます。グラデーション カラーは linear-gradient によって実現できます。
  • クリップは、要素のどの部分が表示されるかを定義します。 clip プロパティは、position:absolute の要素にのみ適用されます。

次のコードは33%の円を描きます

<div class="circle-bar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
    <div class="mask">
        33%
    </div>
</div>
.circle-bar {
    背景画像: 線形グラデーション(#7affaf, #7a88ff);
    幅: 182ピクセル;
    高さ: 182px;
    位置: 相対的;
}
.circle-bar-left {
    背景色: #e9ecef;
    幅: 182ピクセル;
    高さ: 182px;
    クリップ: rect(0, 91px, 自動, 0);
}
.circle-bar-right {
    背景色: #e9ecef;
    幅: 182ピクセル;
    高さ: 182px;
    クリップ: rect(0, auto, auto, 91px);
    変換: 回転(118.8度);
}
。マスク {
    幅: 140ピクセル;
    高さ: 140px;
    背景色: #fff;
    テキスト配置: 中央;
    行の高さ: 0.2em;
    色: rgba(0, 0, 0, 0.5);
    位置: 絶対;
    左: 21px;
    上: 21px;
}
.マスク > スパン {
    表示: ブロック;
    フォントサイズ: 44px;
    行の高さ: 150px;
}
/*すべての子孫は水平方向と垂直方向に中央に配置され、同心円になります*/
.circle-bar * {
    位置: 絶対;
    上: 0;
    右: 0;
    下部: 0;
    左: 0;
    マージン: 自動;
}
/*要素自体とそのサブ要素は両方とも円です*/
.circle-bar、
.circle-bar > * {
    境界線の半径: 50%;
}

これで、CSS で円形グラデーション プログレス バー効果を実装するサンプル コードに関するこの記事は終了です。CSS グラデーション プログレス バーのコンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL UPDATE ステートメントの「典型的な」落とし穴

>>:  ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決

推薦する

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

HTML検証 HTML検証

HTML 検証はHTML 検証を指します。これは、HTML ドキュメントを分析し、標準の HTML ...

Linux での rpm、yum、ソースコードの 3 つのインストール方法の詳細な紹介

第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...

Mysqlは隣接リスト(隣接リスト)を通じてツリー構造を保存します。

以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...

Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...

WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策

WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...

Docker可視化ツールPortainerの導入と中国語翻訳

#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...

要素テーブルテーブルコンポーネントの複数フィールド(複数列)ソート方法

目次必要:発生した問題:解決する:必要:要素テーブル内の複数の列を並べ替えるには、日付の並べ替えをク...

Ubuntu 16.04 64ビット版を3つのステップで32ビットプログラムと互換性を持たせる

ステップ1: システムのアーキテクチャを確認する dpkg --print-architecture...

Centos7はMySQLログに基づいてデータを復元するためのサンプルコードを実装します

導入Binlog ログ、つまりバイナリ ログ ファイルは、データベースに対するユーザー操作の SQL...

ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します

プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

Tomcatのサーバーオプションの詳細な説明

1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...

MySQLデータベースのnullに関する知識ポイントのまとめ

MySQL データベースでは、null は一般的な状況です。MySQL での null に関する注意...