1 | .loadingScreen {
|
2 | z-index: 99;
|
3 | position: absolute;
|
4 | top: 0;
|
5 | left: 0;
|
6 | width: 100%;
|
7 | height: 100%;
|
8 | pointer-events: all;
|
9 | display: grid;
|
10 | grid-template-columns: 50%;
|
11 | grid-template-rows: 3fr 10em 1fr 4em 4em 3fr;
|
12 | justify-items: center;
|
13 | align-items: center;
|
14 | justify-content: center;
|
15 | grid-row-gap: 2em;
|
16 | grid-template-areas: "."
|
17 | "logo"
|
18 | "."
|
19 | "bar"
|
20 | "percentage"
|
21 | ".";
|
22 |
|
23 | .logo-wrapper{
|
24 | grid-area: logo;
|
25 |
|
26 | img {
|
27 | max-width: 100%;
|
28 | max-height: 100%;
|
29 | }
|
30 | }
|
31 |
|
32 | .progression-bar-wrapper {
|
33 | grid-area: bar;
|
34 | box-sizing: border-box;
|
35 | width: 100%;
|
36 | height: 100%;
|
37 | border-radius: 30px;
|
38 | padding: 5px;
|
39 |
|
40 | .progression-bar {
|
41 | height: 100%;
|
42 | border-radius: inherit;
|
43 | }
|
44 | }
|
45 |
|
46 | .percentage-number {
|
47 | grid-area: percentage;
|
48 | font-weight: bold;
|
49 | font-size: 2.5em;
|
50 | }
|
51 | }
|