info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-29 20:21:50 +02:00
Code Issues Releases Wiki Activity

Animate progress on the homescreen

Browse Source
This commit is contained in:
Kamran Ahmed
2023-06-14 02:09:09 +01:00
parent ac892d2868
commit 3d62d2689f
2 changed files with 3 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/FeaturedItems/FeaturedItem.astro
View File

@@ -47,4 +47,5 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
</span>
)
}
<span data-progress class="z-10 bg-[#172a3a] absolute top-0 left-0 bottom-0 duration-300 transition-[width] w-0"></span>
</a>

13
src/lib/home-progress.ts
View File

@@ -37,21 +37,12 @@ async function renderProgress() {
const totalDone = progress.done + progress.skipped;
const percentageDone = (totalDone / progress.total) * 100;
const progressBar = document.createElement('div');
progressBar.style.backgroundColor = 'rgb(23 42 58)';
progressBar.style.position = 'absolute';
const progressBar: HTMLElement = element.querySelector('[data-progress]')!;
progressBar.style.width = `${percentageDone}%`;
progressBar.style.height = '100%';
progressBar.style.bottom = '0';
progressBar.style.left = '0';
progressBar.style.top = '0';
progressBar.style.zIndex = '1';
element.appendChild(progressBar);
});
}
// on DOM load
window.addEventListener('DOMContentLoaded', () => {
window.setTimeout(renderProgress, 0);
window.setTimeout(renderProgress, 0);
});