I was able to get a loading screen working and I noticed there wasn’t a good thread on here about it. so i figured i would make one since i got this working
here is the advanced style sheet. I found this on a free CSS website so feel free to look for other loading screens just make sure to add the .psc- in front if you want it to load in the perspective preview
.psc-container {
width: 100px;
height: 125px;
margin: auto auto;
}
.psc-loading-title {
display: block;
text-align: center;
font-size: 20;
font-family: 'Inter', sans-serif;
font-weight: bold;
padding-bottom: 15px;
color: #888;
}
.psc-loading-circle {
display: block;
border-left: 5px solid;
border-top-left-radius: 100%;
border-top: 5px solid;
margin: 5px;
animation-name: Loader_611;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.psc-sp1 {
border-left-color: #F44336;
border-top-color: #F44336;
width: 40px;
height: 40px;
}
.psc-sp2 {
border-left-color: #FFC107;
border-top-color: #FFC107;
width: 30px;
height: 30px;
}
.psc-sp3 {
width: 20px;
height: 20px;
border-left-color: #8bc34a;
border-top-color: #8bc34a;
}
@keyframes Loader_611 {
0% {
transform: rotate(0deg);
transform-origin: right bottom;
}
25% {
transform: rotate(90deg);
transform-origin: right bottom;
}
50% {
transform: rotate(180deg);
transform-origin: right bottom;
}
75% {
transform: rotate(270deg);
transform-origin: right bottom;
}
100% {
transform: rotate(360deg);
transform-origin: right bottom;
}
}
I started with a flex container column:
make sure overflow is visible on all of these components or you may get some random scroll bars. also pay attention to the align and justify for each
inside that flex container I created a label:
Below the Label I Added a flex row this will be the red first spinner:
it needs both classes applied for it to spin correctly if you are using the same CSS
inside that flex row add another flex row to act as the yellow second spinner:
note that for the spinners to appear right the align and justify have to be centered. Also, in the perspective preview the spinners may appear to be showing incorrectly but in an actual webpage they will show the full rotation
Add one more flex row into the already nested flex row for the yellow spinner:
The overall file view:
The label and Table are originally not displayed with the loading screen, a binding on the table to make the loading screen display false and the table true
this code will only run after the query’s has finished meaning the loading screen will turn off as soon as the query is done.