Skip to content

Commit 02fd2a3

Browse files
martinrisseeuwmartinrisseeuw
committed
style: add loading to app html
1 parent c44f8e6 commit 02fd2a3

4 files changed

Lines changed: 174 additions & 156 deletions

File tree

‎UI_DSM.Client/Components/App/LoadingComponent/LoadingComponent.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818
else
1919
{
20-
<div class="container">
20+
<div class="loading-container">
2121
<div class="moon">
2222
<div class="crater crater1"></div>
2323
<div class="crater crater2"></div>

‎UI_DSM.Client/Components/App/LoadingComponent/LoadingComponent.razor.css‎

Lines changed: 1 addition & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1 @@
1-
.container{
2-
height: 370px;
3-
width: 370px;
4-
position: absolute;
5-
margin: auto;
6-
left: 0;
7-
right: 0;
8-
top: 0;
9-
bottom: 0;
10-
transform: scale(0.75);
11-
}
12-
13-
.moon {
14-
background-color: var(--colors-primary-100);
15-
height: 170px;
16-
width: 170px;
17-
border-radius: 50%;
18-
position: absolute;
19-
margin: auto;
20-
left: 0;
21-
right: 0;
22-
top: 0;
23-
bottom: 0;
24-
overflow: hidden;
25-
}
26-
27-
.crater {
28-
background-color: var(--colors-primary-300);
29-
height: 30px;
30-
width: 30px;
31-
border-radius: 50%;
32-
position: relative;
33-
}
34-
35-
.crater:before{
36-
content: "";
37-
position: absolute;
38-
height: 25px;
39-
width: 25px;
40-
border-radius: 50%;
41-
box-shadow: -5px 0 0 2px var(--colors-primary-400);
42-
top: 2px;
43-
left: 7px;
44-
}
45-
46-
.crater1 {
47-
top: 27px;
48-
left: 90px;
49-
transform: scale(0.9);
50-
}
51-
52-
.crater2 {
53-
bottom: 15px;
54-
left: 61px;
55-
transform: scale(0.6);
56-
}
57-
58-
.crater3 {
59-
left: 15px;
60-
transform: scale(1.05)
61-
}
62-
63-
.crater4 {
64-
top: 23px;
65-
left: 118px;
66-
transform: scale(1.1)
67-
}
68-
69-
.crater5 {
70-
left: 35px;
71-
transform: scale(0.5)
72-
}
73-
74-
.crater6 {
75-
left: 70px;
76-
top: -70px;
77-
transform: scale(0.9)
78-
}
79-
80-
81-
.shadow {
82-
height: 190px;
83-
width: 190px;
84-
box-shadow: 21px 0 0 5px rgba(0,0,0,0.15);
85-
border-radius: 50%;
86-
position: relative;
87-
bottom: 157.5px;
88-
right: 46px;
89-
filter: blur(3px)
90-
}
91-
92-
.orbit {
93-
height: 280px;
94-
width: 280px;
95-
border-radius: 50%;
96-
position: absolute;
97-
margin: auto;
98-
left: 0;
99-
right: 0;
100-
bottom: 0;
101-
top: 0;
102-
animation: spin 5s infinite linear;
103-
}
104-
105-
@keyframes spin {
106-
100%{
107-
transform: rotate(360deg)
108-
}
109-
}
110-
111-
.rocket {
112-
background-color: var(--colors-primary-100);
113-
height: 50px;
114-
width: 25px;
115-
border-radius: 50% 50% 0 0;
116-
position: relative;
117-
left: -11px;
118-
top: 115px;
119-
}
120-
121-
.rocket:before{
122-
position: absolute;
123-
content: "";
124-
background-color: var(--colors-primary-500);
125-
height: 20px;
126-
width: 55px;
127-
z-index: -1;
128-
border-radius: 50% 50% 0 0;
129-
right: -15px;
130-
bottom: 0;
131-
}
132-
133-
.rocket:after{
134-
position: absolute;
135-
content: "";
136-
background-color: var(--colors-primary-500);
137-
height: 4px;
138-
width: 15px;
139-
border-radius: 0 0 2px 2px;
140-
bottom: -4px;
141-
left: 4.3px;
142-
}
143-
144-
.window {
145-
position: relative;
146-
height: 10px;
147-
width: 10px;
148-
background-color: #151845;
149-
border: 2px solid #b8d2ec;
150-
border-radius: 50%;
151-
top: 15px;
152-
left: 5px;
153-
}
1+


‎UI_DSM.Client/wwwroot/css/site.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,4 +470,158 @@ div.invisible {
470470
.budget-report-selector {
471471
display: flex;
472472
gap: var(--spacing-2);
473+
}
474+
475+
.loading-container{
476+
height: 370px;
477+
width: 370px;
478+
position: absolute;
479+
margin: auto;
480+
left: 0;
481+
right: 0;
482+
top: 0;
483+
bottom: 0;
484+
transform: scale(0.75);
485+
}
486+
487+
.moon {
488+
background-color: var(--colors-primary-100);
489+
height: 170px;
490+
width: 170px;
491+
border-radius: 50%;
492+
position: absolute;
493+
margin: auto;
494+
left: 0;
495+
right: 0;
496+
top: 0;
497+
bottom: 0;
498+
overflow: hidden;
499+
}
500+
501+
.crater {
502+
background-color: var(--colors-primary-300);
503+
height: 30px;
504+
width: 30px;
505+
border-radius: 50%;
506+
position: relative;
507+
}
508+
509+
.crater:before{
510+
content: "";
511+
position: absolute;
512+
height: 25px;
513+
width: 25px;
514+
border-radius: 50%;
515+
box-shadow: -5px 0 0 2px var(--colors-primary-400);
516+
top: 2px;
517+
left: 7px;
518+
}
519+
520+
.crater1 {
521+
top: 27px;
522+
left: 90px;
523+
transform: scale(0.9);
524+
}
525+
526+
.crater2 {
527+
bottom: 15px;
528+
left: 61px;
529+
transform: scale(0.6);
530+
}
531+
532+
.crater3 {
533+
left: 15px;
534+
transform: scale(1.05)
535+
}
536+
537+
.crater4 {
538+
top: 23px;
539+
left: 118px;
540+
transform: scale(1.1)
541+
}
542+
543+
.crater5 {
544+
left: 35px;
545+
transform: scale(0.5)
546+
}
547+
548+
.crater6 {
549+
left: 70px;
550+
top: -70px;
551+
transform: scale(0.9)
552+
}
553+
554+
555+
.shadow {
556+
height: 190px;
557+
width: 190px;
558+
box-shadow: 21px 0 0 5px rgba(0,0,0,0.15);
559+
border-radius: 50%;
560+
position: relative;
561+
bottom: 157.5px;
562+
right: 46px;
563+
filter: blur(3px)
564+
}
565+
566+
.orbit {
567+
height: 280px;
568+
width: 280px;
569+
border-radius: 50%;
570+
position: absolute;
571+
margin: auto;
572+
left: 0;
573+
right: 0;
574+
bottom: 0;
575+
top: 0;
576+
animation: spin 5s infinite linear;
577+
}
578+
579+
@keyframes spin {
580+
100%{
581+
transform: rotate(360deg)
582+
}
583+
}
584+
585+
.rocket {
586+
background-color: var(--colors-primary-100);
587+
height: 50px;
588+
width: 25px;
589+
border-radius: 50% 50% 0 0;
590+
position: relative;
591+
left: -11px;
592+
top: 115px;
593+
}
594+
595+
.rocket:before{
596+
position: absolute;
597+
content: "";
598+
background-color: var(--colors-primary-500);
599+
height: 20px;
600+
width: 55px;
601+
z-index: -1;
602+
border-radius: 50% 50% 0 0;
603+
right: -15px;
604+
bottom: 0;
605+
}
606+
607+
.rocket:after{
608+
position: absolute;
609+
content: "";
610+
background-color: var(--colors-primary-500);
611+
height: 4px;
612+
width: 15px;
613+
border-radius: 0 0 2px 2px;
614+
bottom: -4px;
615+
left: 4.3px;
616+
}
617+
618+
.window {
619+
position: relative;
620+
height: 10px;
621+
width: 10px;
622+
background-color: #151845;
623+
border: 2px solid #b8d2ec;
624+
border-radius: 50%;
625+
top: 15px;
626+
left: 5px;
473627
}

‎UI_DSM.Client/wwwroot/index.html‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,25 @@
2020
<body>
2121

2222
<div id="app">
23-
<div class="spinner-border"></div>
24-
<span style="display: inline-block; vertical-align: super">Loading...</span>
23+
<div class="loading-container">
24+
<div class="moon">
25+
<div class="crater crater1"></div>
26+
<div class="crater crater2"></div>
27+
<div class="crater crater3"></div>
28+
<div class="crater crater4"></div>
29+
<div class="crater crater5"></div>
30+
<div class="crater crater6"></div>
31+
<div class="shadow"></div>
32+
</div>
33+
34+
<div class="orbit">
35+
<div class="rocket">
36+
<div class="window"></div>
37+
</div>
38+
</div>
39+
</div>
2540
</div>
41+
2642
<div id="blazor-error-ui">
2743
An unhandled error has occurred.
2844
<a href="" class="reload">Reload</a>

0 commit comments

Comments
 (0)