0x1eef/postman
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Try to follow accessibility best practices

Browse source 
ref https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
This commit is contained in:
0x1eef 2024-07-12 03:26:32 -03:00
parent 4f222ffda6
commit f28c7ace87
3 changed files with 57 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
README.md
View file

@ -20,13 +20,30 @@ progress bar is removed once the delivery is complete:
<head> <head>
<title>Postman</title> <title>Postman</title>
<script type="module" src="delivery.js"></script> <script type="module" src="delivery.js"></script>
<style>
html, html body { height: 100%; }
main.postman {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main.postman progress {
max-width: 200px;
}
main.postman .percent {
font-family: courier;
font-size: smaller;
}
</style>
</head> </head>
<body> <body>
<div class="postman loader"> <main class="postman">
<progress value="0" max="100"></progress> <label>
<span class="percentage"></span> <progress id="progress" value="0" max="100"></progress>
</div> </label>
</div> </main>
</body> </body>
</html> </html>
``` ```
@ -36,8 +53,9 @@ progress bar is removed once the delivery is complete:
```typescript ```typescript
import postman, { item } from "postman"; import postman, { item } from "postman";
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const bar = document.querySelector("progress"); const postman = document.querySelector("main.postman");
const span = document.querySelector(".percentage"); const bar = postman.querySelector("progress");
const span = postman.querySelector(".percent");
const delivery = postman( const delivery = postman(
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"), item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.script("/js/app.js"), item.script("/js/app.js"),
@ -45,7 +63,7 @@ document.addEventListener("DOMContentLoaded", () => {
item.css("/css/app.css"), item.css("/css/app.css"),
item.progress((percent) => { item.progress((percent) => {
bar.value = percent; bar.value = percent;
span.innerText = `${percent}%`; bar.innerText = span.innerText = `${percent}%`;
}) })
).deliver(); ).deliver();
@ -54,9 +72,8 @@ document.addEventListener("DOMContentLoaded", () => {
package.fonts.forEach((font) => documents.fonts.add(font)); package.fonts.forEach((font) => documents.fonts.add(font));
package.scripts.forEach((script) => document.body.appendChild(script)); package.scripts.forEach((script) => document.body.appendChild(script));
package.css.forEach((css) => document.head.appendChild(css)); package.css.forEach((css) => document.head.appendChild(css));
/* Replace progress bar */ /* Replace loading screen */
bar.remove(); postman.remove();
span.remove();
}); });
}); });
``` ```

12
share/postman/examples/progressbar/delivery.js
View file

@ -1,7 +1,8 @@
import postman, { item } from "postman"; import postman, { item } from "postman";
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const bar = document.querySelector("progress"); const postman = document.querySelector("main.postman");
const span = document.querySelector(".percentage"); const bar = postman.querySelector("progress");
const span = postman.querySelector(".percent");
const delivery = postman( const delivery = postman(
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"), item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.script("/js/app.js"), item.script("/js/app.js"),
@ -9,7 +10,7 @@ document.addEventListener("DOMContentLoaded", () => {
item.css("/css/app.css"), item.css("/css/app.css"),
item.progress((percent) => { item.progress((percent) => {
bar.value = percent; bar.value = percent;
span.innerText = `${percent}%`; bar.innerText = span.innerText = `${percent}%`;
}) })
).deliver(); ).deliver();
@ -18,8 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
package.fonts.forEach((font) => documents.fonts.add(font)); package.fonts.forEach((font) => documents.fonts.add(font));
package.scripts.forEach((script) => document.body.appendChild(script)); package.scripts.forEach((script) => document.body.appendChild(script));
package.css.forEach((css) => document.head.appendChild(css)); package.css.forEach((css) => document.head.appendChild(css));
/* Replace progress bar */ /* Replace loading screen */
bar.remove(); postman.remove();
span.remove();
}); });
}); });

29
share/postman/examples/progressbar/index.html
View file

@ -2,13 +2,30 @@
<html> <html>
<head> <head>
<title>Postman</title> <title>Postman</title>
<script type="module" src="postman.js"></script> <script type="module" src="delivery.js"></script>
<style>
html, html body { height: 100%; }
main.postman {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main.postman progress {
max-width: 200px;
}
main.postman .percent {
font-family: courier;
font-size: smaller;
}
</style>
</head> </head>
<body> <body>
<div class="postman loader"> <main class="postman">
<progress value="0" max="100"></progress> <label>
<span class="percentage"></span> <progress id="progress" value="0" max="100"></progress>
</div> </label>
</div> </main>
</body> </body>
</html> </html>