プログレスバー - Scrapboxカスタマイズコレクション

プログレスバー

https://gyazo.com/a8f8e9dc2b5cb345589188f3d0ce3240

昔進捗管理に利用していた物ですpon.icon

code:style.css

Scrapbox用の進捗バー

https://scrapbox.io/pon-no-blog/Progress_Bar_for_Scrapbox

.deco-\% {

display: inline-block !important; min-width: 10.0em; border-radius: .2em; border-style: solid; border-width: 1px; border-color: #888;

text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #222; font-size: 14px; line-height: 24px; font-weight: bold;

--bar-bgcolor: #fff; --bar-color: #000; --complete: 0%;

}

.line strong:has(.deco-\%) { line-height:100% !important; font-size: 16px !important; }

.line .level-1 .deco-\% { --bar-color: #FC446F; --complete: 10%; }

.line .level-2 .deco-\% { --bar-color: #FC446F; --complete: 20%; }

.line .level-3 .deco-\% { --bar-color: #FC446F; --complete: 30%; }

.line .level-4 .deco-\% { --bar-color: #FF9A42; --complete: 40%; }

.line .level-5 .deco-\% { --bar-color: #FF9A42; --complete: 50%; }

.line .level-6 .deco-\% { --bar-color: #FF9A42; --complete: 60%; }

.line .level-7 .deco-\% { --bar-color: #FF9A42; --complete: 70%; }

.line .level-8 .deco-\% { --bar-color: #38FFB9; --complete: 80%; }

.line .level-9 .deco-\% { --bar-color: #38FFB9; --complete: 90%; }

.line .level-10 .deco-\% { --bar-color: #38FFB9; --complete: 100%; }

.deco-\% { background: linear-gradient(to right, var(--bar-color) var(--complete), var(--bar-bgcolor) var(--complete), var(--bar-bgcolor)) !important; }