cory/tildefriends
5
6
Fork 2
Code Issues 28 Pull Requests Actions Releases 39 Wiki Activity

ssb: Make the progress bar more indefinite-looking.
Some checks failed
Build Tilde Friends / Build-All (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Cory McWilliams
2025-07-30 20:04:34 -04:00
parent 3c5c1756d1
commit f1d0151d71
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🦀", "emoji": "🦀",
"previous": "&Sxc7sz+X6FHHJiaLQU+E9Q0guS5yvqKyrZjF3ZyFStc=.sha256" "previous": "&JRzG7VkGOP1IzLdknli36Gr4PddIvkOEKt7L6IMw/lk=.sha256"
} }

23
apps/ssb/tf-app.js
View File

@@ -453,9 +453,9 @@ class TfElement extends LitElement {
reset_progress() { reset_progress() {
if (this.progress === undefined) { if (this.progress === undefined) {
this._progress_start = new Date();
requestAnimationFrame(this.update_progress.bind(this)); requestAnimationFrame(this.update_progress.bind(this));
} }
this.progress = 0;
} }
update_progress() { update_progress() {
@@ -463,8 +463,7 @@ class TfElement extends LitElement {
this.progress = undefined; this.progress = undefined;
return; return;
} }
const factor = 0.75; this.progress = (new Date() - this._progress_start).valueOf();
this.progress = (this.progress * factor) + (100.0 * (1.0 - factor));
requestAnimationFrame(this.update_progress.bind(this)); requestAnimationFrame(this.update_progress.bind(this));
} }
@@ -772,13 +771,17 @@ class TfElement extends LitElement {
Loading... Loading...
</div>` </div>`
: this.render_tab(); : this.render_tab();
let progress = this.progress !== undefined ? let progress =
html` this.progress !== undefined
<div style="position: absolute; width: 100%" id="progress"> ? html`
<div class="w3-theme-l2" style=${`height: 4px; width: ${this.progress}%`}></div> <div style="position: absolute; width: 100%" id="progress">
</div> <div
` : class="w3-theme-l2"
undefined; style=${`height: 4px; position: absolute; right: ${Math.cos(this.progress / 250) > 0 ? 'auto' : '0'}; width: ${50 * Math.sin(this.progress / 250) + 50}%`}
></div>
</div>
`
: undefined;
return html` return html`
<div <div
style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column" style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column"