File tree 1 file changed +67
-0
lines changed
1 file changed +67
-0
lines changed Original file line number Diff line number Diff line change
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
+ }
You can’t perform that action at this time.
0 commit comments