File tree Expand file tree Collapse file tree 1 file changed +67
-0
lines changed Expand file tree Collapse file tree 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