Skip to content

Commit 23f3cc5

Browse files
committed
Restore loader styles for realz
1 parent 9f5fcde commit 23f3cc5

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@use "sass:map";
2+
3+
$reactium-blue: #4f82ba !default;
4+
$reactium-white: #ffffff !default;
5+
$jmj-loading-bg: radial-gradient(#1D2758, #111735);
6+
$jmj-image-logo: map.get($assets, "jmj-loader-logo") !default;
7+
8+
$reactium-loading-zindex: 1000 !default;
9+
10+
.reactium-loading {
11+
z-index: $reactium-loading-zindex;
12+
top: 0;
13+
left: 0;
14+
width: 100vw;
15+
height: 100vh;
16+
position: fixed;
17+
background-color: $reactium-white;
18+
background-image: $jmj-loading-bg;
19+
20+
&,
21+
* {
22+
box-sizing: border-box;
23+
}
24+
25+
&:before {
26+
content: '';
27+
width: 224px;
28+
height: 224px;
29+
border-radius: 100%;
30+
z-index: $reactium-loading-zindex + 1;
31+
left: 50%;
32+
top: 50%;
33+
position: absolute;
34+
transform: translate(-50%, -50%);
35+
box-shadow: 0 0 0 0 rgba(#111735, 1);
36+
animation: reactium-pulse 1.2s infinite;
37+
}
38+
39+
&:after {
40+
content: '';
41+
width: 224px;
42+
height: 150px;
43+
z-index: 2;
44+
left: 50%;
45+
top: 50%;
46+
position: absolute;
47+
transform: translate(-50%, -50%);
48+
background-size: cover;
49+
background-position: center;
50+
background-repeat: no-repeat;
51+
background-image: url($jmj-image-logo);
52+
}
53+
}
54+
55+
@keyframes reactium-pulse {
56+
0% {
57+
box-shadow: 0 0 0 0 rgba(#111735, 0.7);
58+
}
59+
60+
70% {
61+
box-shadow: 0 0 0 48px rgba(#1D2758, 0);
62+
}
63+
64+
100% {
65+
box-shadow: 0 0 0 0 rgba(#fff, 0);
66+
}
67+
}

0 commit comments

Comments
 (0)