diff options
| author | akiyamn | 2022-05-30 16:13:42 +1000 |
|---|---|---|
| committer | akiyamn | 2022-05-30 16:13:42 +1000 |
| commit | aa17ffb8d82490b1c05b34ac0dd2607622fafed2 (patch) | |
| tree | 0e855ee7606df83c9fc0c27ec609efc78106ee08 /src/css/progressbar.css | |
| parent | ce6bb6228cd032e67c4b3af588eb07808678623f (diff) | |
| download | css-aa17ffb8d82490b1c05b34ac0dd2607622fafed2.tar.gz css-aa17ffb8d82490b1c05b34ac0dd2607622fafed2.zip | |
Reorganised project structure
Diffstat (limited to 'src/css/progressbar.css')
| -rw-r--r-- | src/css/progressbar.css | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/src/css/progressbar.css b/src/css/progressbar.css new file mode 100644 index 0000000..0c1300d --- /dev/null +++ b/src/css/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 |