diff options
| author | akiyamn | 2022-05-30 15:20:07 +1000 |
|---|---|---|
| committer | akiyamn | 2022-05-30 15:20:07 +1000 |
| commit | 3b334c06b06a5aefffebbe3d1df040c8fc8305bd (patch) | |
| tree | df08afed664feed8c659eaf88edad00b8ce3ea5a /progressbar.css | |
| download | css-3b334c06b06a5aefffebbe3d1df040c8fc8305bd.tar.gz css-3b334c06b06a5aefffebbe3d1df040c8fc8305bd.zip | |
first commit
Diffstat (limited to 'progressbar.css')
| -rw-r--r-- | progressbar.css | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/progressbar.css b/progressbar.css new file mode 100644 index 0000000..0c1300d --- /dev/null +++ b/progressbar.css @@ -0,0 +1,29 @@ +:root { + --progress-bar-height: 6px; + --progress-bar-width: 87%; + --progress-bar-radius: 3px; +} +.progress-bar { + display: flex; + align-items: center; + justify-content: space-between; +} +.progress-bar div.progress-bar__base { + background-color: #bbb; + width: 100%; + height: var(--progress-bar-height); + width: var(--progress-bar-width); + border-radius: var(--progress-bar-radius); + +} +.progress-bar div.progress-bar__progress { + background-color: var(--dark-grey); + width: 68%; /* this can be controlled with javascript to set percent loaded */ + height: var(--progress-bar-height); + border-radius: var(--progress-bar-radius); +} +.progress-bar div.progress-bar__percentage { + font-size: var(--font-size-14); + font-weight: bold; + color: var(--light-grey); +}
\ No newline at end of file |