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
const loadedPercent = (loadedCount / displays.length);
this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
if (loadedPercent < 1.0) {
// show the progress bar and set width
this.progressCover.parentNode.classList.add('show');
this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
} else {
// hide the progressbar
this.progressCover.parentNode.classList.remove('show');
// hide the progressbar after 1 second (lines up with with width transition animation)
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-iteration-count: infinite;
animation-name: progress-scroll;
animation-timing-function: linear;
animation-timing-function: steps(8, end);
}
.cover {
@ -144,6 +144,7 @@
background-color: white;
width: 100%;
height: 24px;
transition: width 1s steps(6);
}
}
}