1- @use " sass:map" ;
2-
31$reactium-blue : #4f82ba !default ;
42$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 ;
93
104.reactium-loading {
11- z-index : $reactium-loading-zindex ;
125 top : 0 ;
136 left : 0 ;
147 width : 100vw ;
158 height : 100vh ;
169 position : fixed ;
1710 background-color : $reactium-white ;
18- background-image : $jmj-loading-bg ;
1911
2012 & ,
2113 * {
@@ -24,22 +16,22 @@ $reactium-loading-zindex: 1000 !default;
2416
2517 & :before {
2618 content : ' ' ;
27- width : 224 px ;
28- height : 224 px ;
19+ width : 64 px ;
20+ height : 64 px ;
2921 border-radius : 100% ;
30- z-index : $reactium-loading-zindex + 1 ;
22+ z-index : 1 ;
3123 left : 50% ;
3224 top : 50% ;
3325 position : absolute ;
3426 transform : translate (-50% , -50% );
35- box-shadow : 0 0 0 0 rgba (#111735 , 1 );
27+ box-shadow : 0 0 0 0 rgba ($reactium-blue , 1 );
3628 animation : reactium- pulse 1.2s infinite ;
3729 }
3830
3931 & :after {
4032 content : ' ' ;
41- width : 224 px ;
42- height : 150 px ;
33+ width : 64 px ;
34+ height : 64 px ;
4335 z-index : 2 ;
4436 left : 50% ;
4537 top : 50% ;
@@ -48,20 +40,20 @@ $reactium-loading-zindex: 1000 !default;
4840 background-size : cover ;
4941 background-position : center ;
5042 background-repeat : no-repeat ;
51- background-image : url ($jmj-image- logo );
43+ background-image : url (' /assets/images/ logo.png ' );
5244 }
5345}
5446
5547@keyframes reactium-pulse {
5648 0% {
57- box-shadow : 0 0 0 0 rgba (#111735 , 0.7 );
49+ box-shadow : 0 0 0 0 rgba ($reactium-blue , 0.7 );
5850 }
5951
6052 70% {
61- box-shadow : 0 0 0 48 px rgba (#1D2758 , 0 );
53+ box-shadow : 0 0 0 12 px rgba ($reactium-blue , 0 );
6254 }
6355
6456 100% {
65- box-shadow : 0 0 0 0 rgba (#fff , 0 );
57+ box-shadow : 0 0 0 0 rgba ($reactium-white , 0 );
6658 }
6759}
0 commit comments