円形プログレスバー自動生成&設定 (CSS,SVG,JS)

Last updated at 2024-07-11Posted at 2021-07-22

#円形プログレスバー自動生成&設定 (CSS,SVG,JS)
※ 更新履歴メモ：

2024/07/12：見出し体裁修正etc、メンテ
2021/07/30：CSS部追記 ex. ppc表示横並び(大きい丸と小さい丸sが横並び可)etc...
- これに伴いこの記事も使い方など追記＆上書き(主な追記見出しに“💫”)
- 表示横並びver. こんな感じ→ https://blog-imgs-153.fc2.com/g/t/r/gtrinthesky/fc2_272_ppc.html (リンクページ変更：2022/04/04)

2021/07/25：カスタムしやすいようにコード改良、それに伴いこの記事も上書き
2021/07/22：初稿

🔹序文:百聞は一見に如かず：CodePen

まずは見てもらうとこう。CodePen埋め込み：

See the Pen dyWVvqp by Tomoya Chiba (@tomoasleep) on CodePen.

方向性
🔸表示がキレイ・ビジュアル的・ほぼ自動で済ませたい
🔸CheckList(的なもの)だかToDoList(的なもの)から自動生成 ※スクロールするとリストがある
※ 以降、CheckListだかToDoListだかは表記を統一し__checklist__
※ 以降、円形プログレスバーだかprogress-pie-chartだかcircular barだかcircular graphだかは表記を統一し__ppc__
　
🔸check済み行が目立たない色、残ってるtask(?)が目立つような色
※ ただし目立たない色のままだと読みづらいのでhover時には読みやすい色
　
🔸ppc子要素のアイテム名は英語(見栄え)、checklistの各行末尾のtag的txtは日本語(可読性)
※ 例では'Design','Basic-ability','Extra-ability') 、と 'デザイン','基本機能','拡張機能')それぞれ対応してるけど英単語と日本語のちがい
　
　
補足１
題) progress-pie-chart(ppc) auto generated & set (SVG,CSS,JS)
訳) プログレス円形バー(ppc)を自動で生成＆設定 (SVG,CSS,JS)

　
補足２
(HTML｜CSS｜JSのどれかをonにして)コードを読む場合、Result(=ブラウザ表示)はoffった方が読みやすいです

🔹概要・目的

プログレスバー(進捗バー)を円形で・アニメーションで
パーセンテージ表示や進捗率(達成率)は自動生成＆自動設定
checklistのcheck済みはhtml編集：任意のclass名doneを付けたらチェック済み・・・⇒ ✨✨そうするとppcの方は自動生成✨✨
- totalとtotalを自動生成する各要素(ppc)
- totalを自動生成する各要素(例では'Design','Basic-ability','Extra-ability')、を自動生成するダミーリスト(#check_list)
checklistの増減に自動対応
checklistに子要素がある場合も対応
checklistに子要素がある場合のみ、少し注意が必要(後述)

各コードソース：アウトライン

概要=アウトラインとしてはこんな感じ。いろいろ略してるけど。

HTML部

超・略してる

html

<div id="ppcArea_checklistArea">
  <div id="ppcArea" data-txt="totalとtotalを自動生成する各要素">
    <ul class="progressT">
      〜略:ppc total〜
    </ul>
    <ul class="progress" id="p_pie_charts">
      〜略: ppc Items(カテゴリとかジャンルとか)〜
    </ul>
    <svg id="pie_color" width="0" height="0"> 
    〜略〜
    </svg>
 </div><!--//ppcArea-->
    〜略：コメントアウトで注意書き〜
  <div id="check_listArea" data-txt="totalを生成する各要素、を生成するダミーリスト (#check_list)">
  <ul id="check_list">
    〜略: ココがメインで編集する領域〜
  </ul>
  </div><!--//check_listArea-->
</div><!--//ppcArea_checklistArea-->

CSS部

略してても長い( ꒪﹃ ꒪)
そしてここでは詳細解説はなし。実際はコメントアウトで結構説明書いてるのでそれ読んで下さい。コメントが英文混じりなのはCodePenがEnのサイトだからそれを考慮して！

css

/*=========== FOR SETTING =============================*/
/*-- if no-need, del below: --*/
#ppcArea::after,   
#check_listArea::after{〜略:両方に共通〜}
#ppcArea::after{〜略〜}
#check_listArea::after{〜略〜}
/*------------------//if del--*/
#ppcArea{
  width:530px; /*<== YOUR SETTING == def 350px.  if Side by side,  520px or more & set flex, below:*/
  /*flex == FLEX SETTING(1/2) == ----- 
  display:flex; 
  justify-content:space-around; 
  align-items:center;
  --------------------//flex---*/
  outline:solid 1px #f2f2f2;
}
.progress {/*flex == FLEX SETTING(2/2) == -----
  display:flex; 
  --------------------//flex---*/
}
#check_list{ 
  width:550px; /*<== YOUR SETTING*/
  outline:solid 1px #f2f2f2;
}
/* ppc stroke-width (total,items), max 20 for circle*/
.progressT svg:nth-child(2) path,
.progress svg:nth-child(2) path,
.progressT svg g[fill=none],
.progress svg g[fill=none]{
  stroke-width:7;/*<== YOUR SETTING*/
}
:root{
  /* ## COLOR SETTING  */
  〜略〜
  /* ## PPC SETTING  */
  〜略〜
}
/*--- custom as you like below: ---*/
#ppcArea:hover, #check_list:hover{/*for check document*/
  border-color:#f2f2f2;
  box-shadow:0 0 1em rgba(0,0,0, 0.3);
}
#check_list li:hover{ /*for check list when mouse-over-effect*/
  background:#f2f2f2;
}
.progress > li::before {/*CATEGORY: data-name string length */
  〜略〜
}
/*=====================================//setting=======*/

/*------- optional display ------------*/
#ppcArea{
  margin:0 auto 3rem;/*top right&left botoom*/
  position:relative;
}
#check_list{
  margin:0 auto 3rem;
  padding:0.5em 1em 1em 1em;/*top rihgt bottom left*/
  position:relative;
}
#ppcArea:hover + #check_list::before{ 
  opacity:0.44;
}
#check_list::before{
  display:block;
  content:"▲"; opacity:0.18;
  〜
  略
  〜
  transition:all 0.3s linear;
}
#check_list:hover::before{
  opacity:0.44;
  transition:all 0.3s linear;
}

/*------- bgcolr ----------------*/
/*--- ppc items: data-name bgcolor */
.progress > li:nth-child(1)::before {〜略〜}
〜
略
〜
/*--- check_list: like tag icon bgcolor */
#check_list li[class^=forC1] b{〜略〜}
〜
略
〜
/*------PPC------------------------------*/
〜
略
〜
.progressT 関連
.progress 関連
.progressT li 関連
.progress li 関連

.progressT svg:nth-child(2),
.progress svg:nth-child(2) {〜略〜}
@keyframes load{〜略〜}
#pie_color .stop_clr1{ 〜略〜}
〜
#pie_color .stop_clr6{ 〜略〜}


/*top,bottom余白 globalのli設定によっては余白ありすぎるのを抑制*/
.progress > li::before,
#check_list li b[class^=forC]{
  line-height:160%; 
}

/*------ LIST ------------------------------*/
#check_list li{/*-----------#check-list: status=uncheck--*/
  list-style-type:none;
  list-style-position:inside;
  position:relative;
  cursor:default; 
  color:#089B8E;/*grn-dark*/
  padding-left:1.2em;
  margin-bottom:0.2em;
  text-decoration:none;
  transition:all 0.3s linear;
}
#check_list li > ul{ /*check-list's children elements*/
  margin-left:0.5em;
  padding-left:0;/*if no-set, too match left padding*/
}

#check_list li[class*=done]{/*-----#check-list: status=checked--*/
  color:#C0FBF6;/*grn-pale*/
  text-decoration:solid line-through #C0FBF6;/*grn-pale*/
  transition:all 0.3s linear;
}
#check_list li > i{ 
  /*done時、日にちなどの追記用 */
  display:inline-block; 
  color:#089B8E;/*var(--n3u_grn-dark);*/ 
  font-style:normal; 
  text-decoration:none; 
  font-size:0.7em;
} 

#check_list li > i::before,
#check_list li:not(li[class*=done]) > i::before{ 
  display:inline-block; 
  padding-right:0.2em; 
  content:" ⇒ draft✅ "; /*好きなsuffixで*/
  /*もしくはattr(data-txt)"";でタグに内にdata-txtで設定*/
}
#check_list li:not(li[class*=done]) > i::before{ 
  content:"";/*上書き .doneが無ければ表示しない*/
}
#check_list li[class*=done]:hover{ /* when hover view */
  text-decoration: none; 
  color:#089B8E;/*grn-dark*/
}

#check_list li::before{/*--------------#check-squea-base: sutatus=uncheck---*/
  display:block;content:""; 
  width:0.8em; height:0.8em;
  position:absolute;
  left:0.2em;top:0.3em;
  border:1px solid #089B8E;/*grn-dark*/
  border-radius:0.2em;
}
#check_list li[class*=done]::before{/*----------#check-squea-base: status=checked--*/
  border-color:;
  background:; 
}
#check_list li[class*=done]::after{/*-----------#checked-mark: status=checked*/
  display:block;content:""; 
  width:0.5em; height:0.2em;
  position:absolute;
  left:0.35em;top:0.5em;
  border-left:0.1em solid #089B8E;/*grn-dark*/
  border-bottom:0.1em solid #089B8E;/*grn-dark*/
  transform:rotate(-50deg);
}

/* Category like tag icon*/
#check_list li[class^=forC]:not(li[class$=_0]) b,
#check_list li[class$=_0] b{
  display:inline-block;
  color:#fff;
  padding:0 0.2em 0 0.2em;
  margin-right:0.2em; 
  margin-left:0.2em;
  font-size:calc(0.7em * 0.8);
  font-weight:normal;/**/ 
}

#check_list li[class^=forC]:not(li[class$=_0]) b{ /* forC1, forC2, forC3, ...*/
  position:relative; top:-0.2em; 
  left:0; right:0; /*相殺用*/
  opacity:1;
}

#check_list li[class$=_0] b{/* forC1_0, forC2_0, forC3_0, ...*/
  /*あれ？ 単独だと効かない？
   あれ？ 同時に.hasChildがあると効かんのか？？*/
  font-size:2em;
  position:absolute; top:0em; right:-0.2em;
  opacity:0.2;
}


/*---- global -------------------*/
〜
略
〜
/* for document: global */ 
〜
略
〜

JS部

設定ヶ所冒頭にまとまってる
コメントが英文混じりなのはCodePenがEnのサイトだからそれを考慮して！

'use strict';
/*---------------------------------------------------------
  js by Reng modified@2021/07/25,  edited@2021/07/22
---------------------------------------------------------*/
/*=========== FOR SETTING =============================*/
// ppc children's data-name, for display : ex.) category, Genrre, etc...
// reccomend set  3  or max set 5 (or maxi 7)
const data_nameVal=[
  //[En, Ja] set (or [En, En] set)
  ['Design','デザイン'],  //1
  ['Basic-ability','基本機能'],  //2
  ['Extra-ability','拡張機能'],  //3
  //['brush-up', 'ブラッシュアップ'],  //4
  //['bugfix', 'バグ解消'],  // max 5
  //['something', '他'],  //6
  //['something', '他'],  //maxi 7
]; 
/*=====================================//setting=======*/

// ▼Category progress-pie-charts set & get ID 
// get ppc childlen's id
const ppc_cArr=[];
$qcls('#p_pie_charts >li').forEach( v=> ppc_cArr.push($(v.id)) );
//console.info('ppc_cArr->',ppc_cArr);//check
//ex.) ppc_cArr=[$('ppc_c1'), $('ppc_c2'), $('ppc_c3')];
// get ppc-child Item number
const cN=data_nameVal.length;

// ▼set ppc childlen's data_name / list tag_name
const data_nameArr=data_nameVal.map(v =>  v = v[0] ,[]);
const tag_nameArr=data_nameVal.map(v =>  v = v[1] ,[]);
//console.info('data_nameArr->',data_nameArr);//check

// ▼variable, array
const dn='done'; //checked class-name

/*--------------- main func ---------------------
Automatically generated & set from related lists.
〜略〜
------------------------------------------------*/
function aplay_ppcVal(flag){
  // empty array
  const hasC_liNArr=[];

  // ▼checklist's-li Child (=li): length, else  
  const hasC_li=()=>{
    /*
      処理 〜略〜
    */
  };//hasC_li

  // ▼ppc auto generated & set :CATEGORY
  const child=()=>{
    /*
      処理 〜略〜
    */
  };//child

  // ▼ppc auto generated & set : TOTAL
  const total=()=>{
    /*
      処理 〜略〜
    */
  };//total
  
  // run
  hasC_li(); child(); total();
}//aplay_ppcVal

//aplay web page
window.addEventListener( 'DOMContentLoaded', ()=>{
  aplay_ppcVal()
},false);

more改良するとしたら?

どれかのCategoryのみ割合を上げる/下げることができる
~~checklistの行末につく、ppcのcategoryと対応したtagみたいな文字もjs部で設定~~ →jsで指定できるように改良＠2021/07/25
- ~~現状ppcのCategoryはjsで設定、checklist行末の対応tagはcssで設定~~

Categoryの割合の上げ/下げの詳細...

現状すべてのCategory(=ppcの子要素)を、等分に分割してtotalの進捗率(だか達成率だか)に割り当てている。これは、Categoryが３つあれば、Totalに占めるCategory１つあたりの割合はどのCategoryも等しく三等分の 33.333...% 程、ということ。

単純に考えて、上記のように等分に分割する、が合う場合もあると思う。
むしろ等分分割が最適なケースの場合は最高にマッチしてる。

メリット
が、いざ運用シーンを考えてみると、この等分する仕様だと、

内容(=Category)の'重要度'が低い or 'リストアップすると数が多い'だけで、『totalに占める自分の中のイメージの割合はせいぜい15%くらいだよ』、という場合。こういう場合、この等分に分割の仕様では、なーんかイメージする達成率とはチガウ…！！と、いうことになるな、というケースがある(あるはず)

デメリット
例えば・・・Categoryのうちの1つが、最終check的・ディティール的なアレコレのもので括りたいと考え、そして『totalに占めるこのCategoryの割合を下げたいな〜〜』とか、思うかもしれない、というか、ワタシは思った。『あれ？　このままじゃイメージする達成率と随分とかけ離れるな？？』と。では、ということは実際のニーズに合ってないかな？不完全かな？と。

パターンを考えると

１). 1つのCategoryだけ割合を下げる/上げる = (残りのNコ分は残った割合で等分)
２). 1つのCategoryだけ割合を下げる/上げる、かつ１つのCategoryの割合を上げる/下げる =(残りのNコ分は残った割合で等分)
３). すべてのCatgoryに、好きに割合を充てがう = (合計が100%になるように調節する必要あり)

---- //詳細ここまで --

なにかをどうにかしたらこのオプションも実装できそうな気はするのだけど、いまは「totalは等分分割された項目数-ひいてはカテゴリから自動生成」で力尽きた。JSのとこ。誰か代わりにこのオプション部分の変数と計算部分を考えてくれないかなー。

checklist行末の対応tagもjsで指定の詳細...

片方はjsで指定、片方はcssで指定、て使う側からしたら設定場所が２つに分かれててやりにくいな、と思い至り、作り直そうとして途中まではヨカッタが思いの外うまくいかなくて、結局元の状態に戻した。

htmlのタグは極力変更したくない、シンプルがいい(具体的には id #check_list の領域)
cssは下記jsだけでうまくやる方法と連動してやり直すヶ所あるならやり直す
jsだけで設定して(=例では'カテゴリ1'〜'カテゴリ3'の日本語)、しかるべきhtmlを取得し、しかるべきhtmlに設定or追加すること実現したい

---- //詳細ここまで --

~~どちらもjsで指定できるよう作り直そうとして思いの外うまくいかなくて、結局元に戻した。~~ →jsで指定できるようにコードを改良＠2021/07/25

🔹詳細(=CodePen内の詳細パートと同じ)

以下はCodePen内のスクロールしてページの一番下にある｢詳細：ppcパーセンテージ表示 from 'ToDoList' ｣で展開する日本語の部分と同じです。

＊項目-項目内項目(子要素ありの場合)についての割合いの分も反映
＊checkbox風だがユーザー操作(=クリックなど)ではなく、htmlタグ編集によるプログレス=進捗=達成率(class名 .done をつけたらchecked)
＊Totalのパーセントは子円バー要素から自動算出&自動設定
＊そして、それぞれの子円バー要素も自動算出&自動設定：それぞれに対応した(forC1,forC2,forC2)ダミーリストのclass名=doneの数から
::::注意::::
子要素内包liは自動的に check済みマークがつく：その全ての子要素に check済みの class名 done があれば:
- なので子要素内包liに、class名 done を付けない付けたらダメNG。

子要素内包liは、suffixとして '_0' を付けたclass名 (例:forC2_0)。

🔹仕様と使用方法、カスタム方法(概要)

仕様と使用方法

html=checklist部分について：基本ただのul liタグ
check済みにするには：liタグにclass名doneを付ける
- check済みな装飾(見た目) _by css (::before や ::after で指定)
checklist側の各li と ppc子要素(例では'Design','Basic-ability','Extra-ability')の対応：
- 各liのclass名(例: forC1、forC2、forC3)で指定
- 各文末に対応タグ的なtxt(例では'デザイン','基本機能','拡張機能')も同時に自動的に付加 _by css

カスタム方法(概要)

CSS部：

冒頭部にまとめてる(範囲は下記参照)、:root{...}ヶ所で色の設定
/*=== FOR SETTING ===*/ 〜 /*=======//setting====*/の間にまとめてるので、値を変えたりカスタムするなら主にこの領域
- 例では3色グラデにしてるが、6色とも違う色にしたら6色グラデになる
- checklist行末のタグ的なテキスト(例では'デザイン','基本機能','拡張機能')、&もし増減あるなら~~css記述そのものを削除したり追加したり~~ 特に何かする必要ナシ
- 詳細カスタムはcssがわかる人ならやればいい：コメントアウトのメモ書きetcを参考に
  - checklist：マウスオーバー時の装飾とか、気に入らなければ変えればいい
  - checklist：未チェックの行の前に自動で付く四角い枠(□みたいなの)はcssでの設定なので気に入らなければ (以下同文)
  - checklist：チェック済みの行の前に自動で付く四角い枠(□みたいなの)とチェック印(✔️みたいなの)はcssでの設定なので気に入らなければ (以下同文)
  - checklist：チェック済みの行の後ろに自動で付く draft ⇒ ✅はcssでの設定なので気に入らなければ (以下同文)。削除するか代わりに draft ⇒ @とか？？ __※使用想定:日付け__だから
    - その直後の日付けは自動ではなく、直に記入する分 ※使用想定:日付け

HTML部：

ppcの子要素(例では'Design','Basic-ability','Extra-ability')のli、もし増減あるなら~~タグを削除したり追加したり~~ <ul class="progress" id="p_pie_charts">のliタグを必要な分だけ__コメントアウトから外して有効に__する

JS部：

冒頭部にまとめてる(範囲は下記参照)
/*=== FOR YOUR SETTING ===*/ 〜 /*=======//setting====*/の間、~~２コだけ~~ →1ヶ所だけ
- ppc 子要素のdata-name const data_nameValの値を[En ,Ja]のセットで
- ~~ppc 子要素の数 const cNの値 (整数3〜5 *初期値 3)~~ →必要ナシに

~~変更の必要なければ特に変更しないままで。~~ →必要な数だけコメントアウトから外して有効にして付けたい名前をつける。これはアイテム名だかカテゴリ名的なものの表示を[En,Ja]のセットで設定するもの。

補足：英単語と日本語のセットなのは冒頭にも書いたとおり「見栄え」・「可読性」用なので、別に[En,En]でも構わない

ブログ記事etcで使う場合：💫

※この項目は2021/07/30に追記※
①ブログ記事などへの適用方法
②webページで作成する場合：其の壱
　　　　　〃　　　　　　　：其の弐

①ブログ記事などへの適用方法：
前提：CodePen での CSS部や JS部はそれぞれファイル化して任意の場所へアップロードしてあるものとする:
・例) CodePen の　CSS部をファイルppc_v1.cssとして、任意の場所にアップロード済み
・例) CodePen の　JS部をファイルppc_v1.jsとして、任意の場所にアップロード済み

ブログ記事etcの本文を書くトコロに CodePenでの

→CSS部は <style>タグ内に @import:url("CSS_FILE_URL");で外部リンクから参照。
→HTML部はコピペ。
→JS部は<script src="JS_FILE_URL"></script>で外部リンクから参照。

・・・という感じで記述 or コピペすればOK. 下記コードでppc startからppc endまでのヶ所

HTML

<!---前提memo：ここはblog記事内の本文欄≒既にbodyや何らかのdivタグ内--->

<!-- この場所は 他の記事本文があってもいい -->

<!--ppc start----------------------------------------------->
<style>
@import:url("https://xxxxx/yyyyy/zzz/ppc_v1.css");
/*---cssファイルはあまり変更しないで、idやclassを上書きなどするなら以下に--*/
#ppcArea{
  width:350px; /*<== YOUR SETTING== */
}
</style>

<!--- 直下に CodePen の HTML部 をコピペ --->
〜
コピぺ場所
〜
<!------------------//htmlコピペここまで-->

<!---以下のようにscriptタグを書き外部ファイル化したJSをリンク --->
<script src="https://xxxxx/yyyyy/zzz/ppc_v1.js"></script>
<!--//ppc end----------------------------------------------->

<!-- この場所は 他の記事本文があってもいい -->

記述順は、おおまかには下記が望ましい：
・CSS外部リンクは、HTML部コピペ場所よりも前
・JS外部リンクは、HTML部コピペ場所より後

　
②webページで作成する場合：

webページで作成する場合：其の壱〜htmlファイルに全部入れテンプレ〜

HTML

<!DOCTYPE html>
<html>
<head>
  <title>何かタイトル</title>
<style>
/*--- 直下に CodePen の CSS部 をコピペ ---*/

</style>
</head>
<body>
  <section><!--sectionタグはなくてもいいが今回はCodePenのHTML部をコピペする目安として-->
<!--- 直下に CodePen の HTML部 をコピペ --->
〜
コピぺ場所
〜
  </section>
</body>
<script>
/*--- 直下に CodePen の JS部 をコピペ ---*/
〜
コピぺ場所
〜
</script>
</html>

　
webページで作成する場合：其の弐〜cssとjsは外部ファイル化テンプレ〜

HTML

<!DOCTYPE html>
<html>
<head>
  <title>何かタイトル</title>
<!--- 例) CodePen の　CSS部 をファイル「ppc_v1.css」として、任意の場所にアップロードし、それを外部リンクすることで適用 --->
<link rel="stylesheet" rel="https://xxxxx/yyyyy/zzz/ppc_v1.css">

</head>
<body>
  <section><!--sectionタグはなくてもいいが今回はCodePenのHTML部をコピペする目安として-->
<!--- 直下に CodePen の HTML部 をコピペ --->
〜
コピぺ場所
〜
  </section>

<!--- 例) CodePen の JS部を 外部ファイル「ppc_v1.js」として、任意の場所にアップロードし、それを外部リンクすることで適用--->
<script src="https://xxxxx/yyyyy/zzz/ppc_v1.js"></script>
</body>
</html>

<script>タグでのリンクは</body>直前でも直後でもどっちでもいい。
ただ<script async src="JS_FILE_URL"></script>のようにasyncを入れたらエラーになる。ppcがカラフルに表示されない(ただのppc円状下地状態=薄グレーの輪っか)。

🔹ppc表示横並び💫

※このセクションは2021/07/30に追記※
* #ppcAreaのwidthを520px以上にする (初期値は 350px)
* コメントアウトされてる == FLEX SETTING ==2ヶ所を有効にする

CSS冒頭のヶ所

/*=========== FOR SETTING =============================*/
/*-- if no-need, del below: --*/
〜
略
〜
/*------------------//if del--*/
#ppcArea{
  width:350px; /*<== YOUR SETTING == def 350px.  if Side by side,  520px or more & set flex, below:*/
  /*flex == FLEX SETTING(1/2) == ----- 
  display:flex; 
  justify-content:space-around; 
  align-items:center;
  --------------------//flex---*/
  outline:solid 1px #f2f2f2;
}
.progress {/*flex == FLEX SETTING(2/2) == -----
  display:flex; 
  --------------------//flex---*/
}


/*~~~~~~~~~~~~~~~~~ ↑ 上記初期値を ~~~~~~~~~~~~~~~~~~~~~~
  width: 600pxは例です。 
  90% や 50em などでも可。
 ~~~~~~~~~~~~~~~~~~~ 下記のように ↓ ~~~~~~~~~~~~~~~~~~~~~*/


/*=========== FOR SETTING =============================*/
/*-- if no-need, del below: --*/
〜
略
〜
/*------------------//if del--*/
#ppcArea{
  width:600px; /*<== YOUR SETTING == def 350px.  if Side by side,  520px or more & set flex, below:*/
  /*flex == FLEX SETTING(1/2) == ----- */
  display:flex; 
  justify-content:space-around; 
  align-items:center;
  /*--------------------//flex---*/
  outline:solid 1px #f2f2f2;
}
.progress {/*flex == FLEX SETTING(2/2) == -----*/
  display:flex; 
  /*--------------------//flex---*/
}

表示横並びver. こんな感じ→ https://gtrinthesky.blog.fc2.com/blog-entry-272.html

🔹ppcの円環グラデを5色にしたい場合

※このセクションは2021/07/25に新規追加※
__表示例の３色の設定：__これは、元は6色設定できるグラデを、２コずつ同じ色にして結果的に３色グラデのようにしてるだけです -CSS部 :root内(カンタンに出来る)

5色に設定するには：元は6色設定できるグラデを5コとも別の色にし(6コ目はあってもいいけど使われない)
HTML部の<ul class="progress" id="p_pie_charts">タグ下の各liと後続のsvgの中身を編集します。※ちなみに各liの中のsvgはすべて同じです：

❶その__すべてのliの中身のsvgを同じように変更__=5色グラデにする場合は１つのliタグ無効化(削除かコメントアウト)。

❷それらliのすぐ後にある、(というか<ul class="progress" id="p_pie_charts">の閉じタグ</ul>の直後にあるsvg、) <svg id="pie_color" width="0" height="0">タグの中身を指示の通りに変更。

そうすると、５色グラデになる。

同じような要領で4色グラデも可能。しようと思えば逆の要領で増やせばいいので7色グラデも可能。8色以上はあまり意義がない気がする、グラデ増やすとしても最大でも7色グラデ(=虹の色数)までかな〜。

❶liの中身 =共通=

html

<!-- ulタグ(.progress #p_pie_charts)の各liの中身、liの数だけ同じように無効化(削除かコメントアウト) -->

        <svg viewBox="-10 -10 220 220">
        <g fill="none" stroke-width="7" transform="translate(100,100)">
        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
        </g>
        </svg>

<!-- 上記をこう、最後の path (stroke="url(#cl6)"の分)を削除かコメントアウト(で無効化)　@全てのliで -->

        <svg viewBox="-10 -10 220 220">
        <g fill="none" stroke-width="7" transform="translate(100,100)">
        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
        <!--<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/> これはコメントアウトした場合-->
        </g>
        </svg>

　
❷liのすぐ後にあるsvgタグの中身を変更

html

<!-- 
よくよく見たらわかるが、6コあるタグとclass名(stop_clr1〜stop_clr6)で、色が循環するようになってるので 
linearGradientタグを5コまでにし(6コ目を削除)、新たに最後の分となった linearGradient内のstopタグの class名を初めの色 stop_clr1 に変更
-->

  <svg id="pie_color" width="0" height="0">
  <defs>
  <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
    <stop class="stop_clr1"/>
    <stop offset="100%" class="stop_clr2"/>
  </linearGradient>
  <!--
  〜中略〜
  -->
  <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0"> 
    <stop class="stop_clr5"/>
    <stop offset="100%" class="stop_clr6"/> <!-- <==ココ== -->
  </linearGradient>
  <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
    <stop  class="stop_clr6"/>
    <stop offset="100%" class="stop_clr1"/>
  </linearGradient>
  </defs>
  </svg>

<!--　上記を、下記のように書き換える
新たに最後の分となった linearGradient内のstopタグの class名を初めの色 stop_clr1 に変更
-->

  <svg id="pie_color" width="0" height="0">
  <defs>
  <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
    <stop class="stop_clr1"/>
    <stop offset="100%" class="stop_clr2"/>
  </linearGradient>
  <!--
  〜中略〜
  -->
  <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
    <stop  class="stop_cl5"/>
    <stop offset="100%" class="stop_clr1"/> <!-- <==ココ== -->
  </linearGradient>
  <!--最後の6こ目のlinearGradientタグを無効化(削除するかこのようにコメントアウト)
  <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
    <stop  class="stop_clr6"/>
    <stop offset="100%" class="stop_clr1"/>
  </linearGradient>
  -->
  </defs>
  </svg>

このようにすると、５色グラデになる。

🔹配色について

色の設定CSS部： :rootヶ所、カラーリングに関しては、好きなようにカスタムすればいいんだけど、やみくもに色を選ぶより、なにかしら任意の配色パターンにのっとって色を決めた方が、多分キレイな仕上がりになると思われる。

具体例として、トーン、明度、彩度を合わせたカラーリングで整合性≒簡単にいうと見た目的に色調が揃った感じになるように、等々。

ちなみに例として使ってる3色のppc(円形バー)配色は、水色系・緑系・紫系。で、これは__歌声合成シンセサイザー NEUTRINO__のアイコン色からでっす。

cheklist各行末tag的txt(＝例だと ppcの'Design','Basic-ability','Extra-ability'に対応)の3色は、NHK「英雄たちの選択」で、選択肢3択のときのスーパーの字幕の背景色が、黄色系・水色系・桃色系、だったような気がして、(実際はだいぶそれらとは違って、合ってるの色の系統だけやけども)そんなような感じの色合いをと思っての配色でっす。

ppcの方の当の文字列は(例では'Design','Basic-ability','Extra-ability')、円環の色を目立たせるために、かなり薄い色にしてる(カラフルじゃない方がいいかなと思って)。

参考用) 配色ページいくつか

世の中には便利に使えるweb配色ページがある・・・。

↑｜原色大辞典｜和色大辞典｜洋色大辞典｜web216｜パステルカラー｜ビビッドカラー｜モノトーン｜メトロカラー｜...という、色調がある程度揃ったカラーセットがある

↑同系色、明度別(薄さ〜濃さ別)など
　

↑１つ色を決めると、配色例の提示明度別、色相関関連など
　

↑色相関的 x 明度別 step数別
　

↑配色例の提示
　

🔹不要なものを書き換える or 削除

- HTML部：

タグid="ppcArea"とid="check_list"のdata-txtは説明表示用なので書き換えたり、不要ならdata-txtそのものを削除する
あと、念のため言及するけど、<details>〜</details>タグは人に見せる用=説明用なのでまるっと不要、削除する
- Result(ブラウザ表示)で下部にある｢詳細：ppcパーセンテージ表示 from 'ToDoList' ｣部分のこと

html

<div id="ppcArea" data-txt="totalとtotalを自動生成する各要素">

<!-- 上記行を、不要なら削除してこう -->
<div id="ppcArea">

html

 <ul id="check_list" data-txt="totalを生成する各要素(例では'Design','Basic-ability','Extra-ability')、を生成するダミーリスト (#check_list)">

<!--上記行を、不要なら削除してこう -->
 <ul id="check_list">

- CSS部：

特に削除するヶ所ナシ・・・!
人に見せるように設定してる装飾もあるが上記のように html部で削除したらcssはそのままでも問題ない
あ、コメントアウト行が邪魔というなら、それは削除してもいい

- JS部：

特に削除するヶ所ナシ・・・!
あ、コメントアウト行が邪魔というなら、それは削除してもいい

🔹参考記事

元記事
以下の記事を見て作った成果物です。紹介記事(日本語)と、紹介記事内に埋め込みの CodePenのページ(英語)

CodePenでForkで記事作ろうとしたら何故かうまくいかなかったので、新規記事として作った...、htm部冒頭にCodePenの元記事url記載

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

円形プログレスバー 自動生成&設定 (CSS,SVG,JS)

🔹序文:百聞は一見に如かず：CodePen

🔹概要・目的

各コードソース：アウトライン

HTML部

CSS部

JS部

more改良するとしたら?

🔹詳細(=CodePen内の詳細パートと同じ)

🔹仕様と使用方法、カスタム方法(概要)

仕様と使用方法

カスタム方法(概要)

CSS部：

HTML部：

JS部：

ブログ記事etcで使う場合：💫

🔹ppc表示横並び💫

🔹ppcの円環グラデを5色にしたい場合

🔹配色について

参考用) 配色ページいくつか

🔹不要なものを書き換える or 削除

- HTML部：

- CSS部：

- JS部：

🔹参考記事

円形プログレスバー自動生成&設定 (CSS,SVG,JS)