lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

cute progress bar animations

Browse source
This commit is contained in:
Matt Walsh 2022-08-05 15:53:16 -05:00
parent 8cc6e4a1eb
commit 068d3a438c
4 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
server/scripts/modules/progress.js
View file

@ -75,13 +75,13 @@ class Progress extends WeatherDisplay {
// calculate loaded percent // calculate loaded percent
const loadedPercent = (loadedCount / displays.length); const loadedPercent = (loadedCount / displays.length);
this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
if (loadedPercent < 1.0) { if (loadedPercent < 1.0) {
// show the progress bar and set width // show the progress bar and set width
this.progressCover.parentNode.classList.add('show'); this.progressCover.parentNode.classList.add('show');
this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
} else { } else {
// hide the progressbar // hide the progressbar after 1 second (lines up with with width transition animation)
this.progressCover.parentNode.classList.remove('show'); setTimeout(() => this.progressCover.parentNode.classList.remove('show'), 1000);
} }
} }

2
server/styles/main.css
View file

File diff suppressed because one or more lines are too long

2
server/styles/main.css.map
View file

File diff suppressed because one or more lines are too long

3
server/styles/scss/_progress.scss
View file

@ -134,7 +134,7 @@
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-name: progress-scroll; animation-name: progress-scroll;
animation-timing-function: linear; animation-timing-function: steps(8, end);
} }
.cover { .cover {
@ -144,6 +144,7 @@
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 24px; height: 24px;
transition: width 1s steps(6);
} }
} }
} }