eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-18 17:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

progress screen progress bar

Browse Source
This commit is contained in:
Matt Walsh
2022-08-05 15:40:53 -05:00
parent eae3b321c7
commit 8cc6e4a1eb
13 changed files with 148 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
server/styles/scss/_progress.scss
View File

@@ -11,7 +11,7 @@
top: 15px;
margin: 0px 10px;
box-sizing: border-box;
height: 280px;
height: 310px;
overflow: hidden;
.item {
@@ -82,4 +82,68 @@
}
}
}
#progress-html.weather-display .scroll {
@keyframes progress-scroll {
0% {
background-position: -40px 0;
}
100% {
background-position: 40px 0;
}
}
.progress-bar-container {
border: 2px solid black;
background-color: white;
margin: 20px auto;
width: 524px;
position: relative;
display: none;
&.show {
display: block;
}
.progress-bar {
height: 20px;
margin: 2px;
width: 520px;
background: repeating-linear-gradient(90deg,
c.$gradient-loading-1 0px,
c.$gradient-loading-1 5px,
c.$gradient-loading-2 5px,
c.$gradient-loading-2 10px,
c.$gradient-loading-3 10px,
c.$gradient-loading-3 15px,
c.$gradient-loading-4 15px,
c.$gradient-loading-4 20px,
c.$gradient-loading-3 20px,
c.$gradient-loading-3 25px,
c.$gradient-loading-2 25px,
c.$gradient-loading-2 30px,
c.$gradient-loading-1 30px,
c.$gradient-loading-1 40px,
);
// animation
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: progress-scroll;
animation-timing-function: linear;
}
.cover {
position: absolute;
top: 0px;
right: 0px;
background-color: white;
width: 100%;
height: 24px;
}
}
}