diff options
| author | MacDue <macdue@dueutil.tech> | 2022-07-31 01:21:55 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-08-08 22:39:06 +0200 |
| commit | da79883b60d90d9d09498fecd430f1b18f7349a5 (patch) | |
| tree | 28d1ad787264534c38f17e719fd06005fca88ad1 | |
| parent | d0511ec650eac23631d14c31f05d606851a43d60 (diff) | |
| download | serenity-da79883b60d90d9d09498fecd430f1b18f7349a5.zip | |
Base: Add the styled progress bar demo from css-tricks.com
See: https://css-tricks.com/html5-progress-element/ this is a neat
demo of a pure CSS progress bar that makes use of linear-gradients,
background-repeat, and background-size. All of which now work :^)
| -rw-r--r-- | Base/res/html/misc/progressbar.html | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/Base/res/html/misc/progressbar.html b/Base/res/html/misc/progressbar.html index db4d0fd0be..cd4fb0cd54 100644 --- a/Base/res/html/misc/progressbar.html +++ b/Base/res/html/misc/progressbar.html @@ -33,6 +33,12 @@ <br> <progress id="custom-progress" value="25" max="100"></progress> <br> + <br> + <em>A super fancy progress bar done purely in CSS</em> + <br> + <br> + <progress id="really-fancy-progress" value="25" max="100"></progress> + <br> <style> body { @@ -58,6 +64,34 @@ border-radius: 10px; background-color: #ff3863d2; } + + /* The following example is taken from https://css-tricks.com/html5-progress-element/ */ + + #really-fancy-progress[value] { + appearance: none; + width: 500px; + height: 40px; + } + + #really-fancy-progress[value]::-webkit-progress-bar { + background-color: #eee; + border-radius: 2px; + /* FIXME: Should be an inset shadow (not supported yet) */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); + } + + #really-fancy-progress[value]::-webkit-progress-value { + background-image: + -webkit-linear-gradient(-45deg, + transparent 33%, rgba(0, 0, 0, .1) 33%, + rgba(0,0, 0, .1) 66%, transparent 66%), + -webkit-linear-gradient(top, + rgba(255, 255, 255, .25), + rgba(0, 0, 0, .25)), + -webkit-linear-gradient(left, #09c, #f44); + border-radius: 2px; + background-size: 70px 40px, 100% 100%, 100% 100%; + } </style> <script> |