diff options
| author | MacDue <macdue@dueutil.tech> | 2022-07-22 16:13:42 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-07-23 01:45:49 +0200 |
| commit | bc29161bac49339a9d58a5cb51d4a1c944ebb52e (patch) | |
| tree | d20d9ccd3b280ec5fb91ac474799521736af2b5d /Base | |
| parent | 980964d8f34226ecb44f4f578a2c72b14af34f14 (diff) | |
| download | serenity-bc29161bac49339a9d58a5cb51d4a1c944ebb52e.zip | |
Base: Add some more progress bar demos
This adds an example of a progress bar with just `appearance none`,
and one with `appearance none` and some custom styling.
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/misc/progressbar.html | 120 |
1 files changed, 76 insertions, 44 deletions
diff --git a/Base/res/html/misc/progressbar.html b/Base/res/html/misc/progressbar.html index 1eb8c0234f..1ce648efd6 100644 --- a/Base/res/html/misc/progressbar.html +++ b/Base/res/html/misc/progressbar.html @@ -1,56 +1,88 @@ <html> +<body> + <input type=button data-position="0" value="Set 0%"> + <br> + <input type=button data-position="25" value="Set 25%"> + <br> + <input type=button data-position="50" value="Set 50%"> + <br> + <input type=button data-position="75" value="Set 75%"> + <br> + <input type=button data-position="100" value="Set 100%"> + <br> -<body bgcolor="#408080" text="#ffffff"> - <input type=button id=button1 value="Set 0%"> - <br /> - - <input type=button id=button2 value="Set 25%"> - <br /> + <div style="display: inline-block;"> + <pre>Progress bar position: <span id="position-text"></span></pre> + </div> + <br> + <br> + <em>A system progress bar (appearance: auto)</em> + <br> + <br> + <progress value="25" max="100"></progress> + <br> + <br> + <em>A primitive progress bar (appearance: none)</em> + <br> + <br> + <progress style="appearance: none" value="25" max="100"></progress> + <br> + <br> + <em>A primitive progress bar (appearance: none) with some styling</em> + <br> + <br> + <progress id="custom-progress" value="25" max="100"></progress> + <br> - <input type=button id=button3 value="Set 50%"> - <br /> + <style> + body { + background-color: #060606; + color: white; + margin-left: 20px; + } - <input type=button id=button4 value="Set 75%"> - <br /> + input { + color: black; + } - <input type=button id=button5 value="Set 100%"> - <br /> + #custom-progress { + appearance: none; + width: 200px; + height: 20px; + margin-top: 20px; + } - <progress id="progress" value="25" max="100"></progress> - <div style="display: inline-block;"> - <pre>Progress bar position: <span id=pos></span></pre> - </div> + #custom-progress::-webkit-progress-bar { + border-radius: 10px; + overflow: hidden; + box-shadow: 0 0 10px 4px #ff3863d2; + background-color: #eee; + } + #custom-progress::-webkit-progress-value { + border-radius: 10px; + background-color: #ff3863d2; + } + </style> <script> - var progressBar = document.getElementById('progress'); - document.getElementById('pos').innerHTML = progressBar.position; - - document.getElementById('button1').addEventListener('click', function () { - progressBar.value = 0; - document.getElementById('pos').innerHTML = progressBar.position; - }); - - document.getElementById('button2').addEventListener('click', function () { - progressBar.value = 25; - document.getElementById('pos').innerHTML = progressBar.position; - }); - - document.getElementById('button3').addEventListener('click', function () { - progressBar.value = 50; - document.getElementById('pos').innerHTML = progressBar.position; - }); - - document.getElementById('button4').addEventListener('click', function () { - progressBar.value = 75; - document.getElementById('pos').innerHTML = progressBar.position; - }); - - document.getElementById('button5').addEventListener('click', function () { - progressBar.value = 100; - document.getElementById('pos').innerHTML = progressBar.position; - }); + const progressBars = document.querySelectorAll('progress'); + const buttons = document.querySelectorAll('input[type=button]'); + const positionText = document.getElementById('position-text'); + + const setProgressPositions = (position) => { + progressBars.forEach(progressBar => { + progressBar.value = position; + }) + positionText.innerHTML = position; + } + + buttons.forEach(button => { + button.onclick = event => { + const position = event.target.getAttribute("data-position") | 0; + setProgressPositions(position); + } + }) </script> </body> - </html> |