├── Loaders.jsx
└── Loaders.module.css


/Loaders.jsx:
--------------------------------------------------------------------------------
 1 | import classes from './Loaders.module.css';
 2 | 
 3 | export const DataLoader = ({
 4 |   size = '40px',
 5 |   color = '#fff',
 6 |   className = '',
 7 |   containerClassName = ''
 8 | }) => {
 9 |   return (
10 |     <div className={`${classes.loaderContainer} ${containerClassName}`}>
11 |       <div
12 |         style={{ '--size': size, '--color': color }}
13 |         className={`${classes.dataLoader} ${className}`}
14 |       >
15 |         <div></div>
16 |         <div></div>
17 |         <div></div>
18 |         <div></div>
19 |       </div>
20 |     </div>
21 |   );
22 | };
23 | 
24 | export const SimpleSceleton = ({ className = '' }) => {
25 |   return <div className={`${className} ${classes.skeletonBox}`}></div>;
26 | };
27 | 
28 | export const TableSceleton = ({ className = '' }) => (
29 |   <div className={`${className} ${classes.tableSceletonContainer}`}>
30 |     <div className={classes.tableSceletonBox}>
31 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
32 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
33 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
34 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
35 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
36 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
37 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
38 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
39 |       <div className={`${classes.tableSceleton} ${classes.skeletonBox}`}></div>
40 |     </div>
41 |   </div>
42 | );
43 | 
44 | export const ListSceleton = () => (
45 |   <div className={classes.listSkeletonBox}>
46 |     <div className={`${classes.listLoading} ${classes.skeletonBox}`}></div>
47 |     <div className={`${classes.listLoading} ${classes.skeletonBox}`}></div>
48 |     <div className={`${classes.listLoading} ${classes.skeletonBox}`}></div>
49 |   </div>
50 | );
51 | 
52 | export const MainLoader = ({ containerClassName = '' }) => {
53 |   return (
54 |     <div className={`${classes.mainLoaderBox} ${containerClassName}`}>
55 |       <div className={classes.mainLoaderContainer}>
56 |         <div className={classes.mainLoader}>
57 |           <div></div>
58 |           <div></div>
59 |         </div>
60 |       </div>
61 |     </div>
62 |   );
63 | };
64 | 
65 | export const DataScaleLoader = ({ containerClassName = '' }) => {
66 |   return (
67 |     <div className={`${classes.scaleLoaderBox} ${containerClassName}`}>
68 |       <div className={classes.scaleLoader}>
69 |         <div></div>
70 |         <div></div>
71 |         <div></div>
72 |         <div></div>
73 |       </div>
74 |     </div>
75 |   );
76 | };
77 | 


--------------------------------------------------------------------------------
/Loaders.module.css:
--------------------------------------------------------------------------------
  1 | .loaderContainer {
  2 |   height: 100%;
  3 |   width: 100%;
  4 |   display: flex;
  5 |   justify-content: center;
  6 |   align-items: center;
  7 | }
  8 | 
  9 | .dataLoader {
 10 |   display: inline-block;
 11 |   position: relative;
 12 |   width: var(--size);
 13 |   height: var(--size);
 14 | }
 15 | .dataLoader div {
 16 |   box-sizing: border-box;
 17 |   display: block;
 18 |   position: absolute;
 19 |   width: calc(var(--size) * 0.8);
 20 |   height: calc(var(--size) * 0.8);
 21 |   margin: calc(var(--size) / 10);
 22 |   border: calc(var(--size) / 10) solid var(--color);
 23 |   border-radius: 50%;
 24 |   animation: dataLoader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 25 |   border-color: var(--color) transparent transparent transparent;
 26 | }
 27 | .dataLoader div:nth-child(1) {
 28 |   animation-delay: -0.45s;
 29 | }
 30 | .dataLoader div:nth-child(2) {
 31 |   animation-delay: -0.3s;
 32 | }
 33 | .dataLoader div:nth-child(3) {
 34 |   animation-delay: -0.15s;
 35 | }
 36 | @keyframes dataLoader {
 37 |   0% {
 38 |     transform: rotate(0deg);
 39 |   }
 40 |   100% {
 41 |     transform: rotate(360deg);
 42 |   }
 43 | }
 44 | 
 45 | /* Skeleton */
 46 | .skeletonBox {
 47 |   display: inline-block;
 48 |   height: 1em;
 49 |   position: relative;
 50 |   overflow: hidden;
 51 |   background-color: #f0ecf0;
 52 |   border-radius: 5px;
 53 | }
 54 | 
 55 | .skeletonBox::after {
 56 |   position: absolute;
 57 |   top: 0;
 58 |   right: 0;
 59 |   bottom: 0;
 60 |   left: 0;
 61 |   transform: translateX(-100%);
 62 |   background-image: linear-gradient(
 63 |     90deg,
 64 |     rgba(255, 255, 255, 0) 0,
 65 |     rgba(255, 255, 255, 0.2) 20%,
 66 |     rgba(255, 255, 255, 0.5) 60%,
 67 |     rgba(255, 255, 255, 0)
 68 |   );
 69 |   animation: shimmer 5s infinite;
 70 |   -webkit-animation: shimmer 5s infinite;
 71 |   content: '';
 72 | }
 73 | 
 74 | @keyframes shimmer {
 75 |   100% {
 76 |     transform: translateX(100%);
 77 |   }
 78 | }
 79 | 
 80 | .tableSceletonContainer {
 81 |   display: flex;
 82 |   align-items: center;
 83 |   justify-content: center;
 84 |   margin-top: 30px;
 85 |   margin-left: auto;
 86 |   margin-right: auto;
 87 | }
 88 | 
 89 | .tableSceletonBox {
 90 |   display: flex;
 91 |   flex-wrap: wrap;
 92 |   max-width: 600px;
 93 | }
 94 | 
 95 | .tableSceleton {
 96 |   margin: 10px;
 97 |   width: 130px;
 98 |   height: 20px !important;
 99 |   border-radius: 10px !important;
100 | }
101 | 
102 | @media (min-width: 768px) {
103 |   .tableSceleton {
104 |     margin: 20px;
105 |     width: 150px;
106 |   }
107 | }
108 | 
109 | /* Main loader */
110 | .mainLoaderBox {
111 |   display: grid;
112 |   height: 60vh;
113 |   justify-content: center;
114 |   align-content: center;
115 | }
116 | @keyframes mainLoader {
117 |   0% {
118 |     top: 45px;
119 |     left: 45px;
120 |     width: 0;
121 |     height: 0;
122 |     opacity: 1;
123 |   }
124 |   100% {
125 |     top: -1.5px;
126 |     left: -1.5px;
127 |     width: 93px;
128 |     height: 93px;
129 |     opacity: 0;
130 |   }
131 | }
132 | .mainLoader div {
133 |   position: absolute;
134 |   border-width: 5px;
135 |   border-style: solid;
136 |   opacity: 1;
137 |   border-radius: 50%;
138 |   animation: mainLoader 2.380952380952381s cubic-bezier(0, 0.2, 0.8, 1) infinite;
139 | }
140 | .mainLoader div:nth-child(1) {
141 |   border-color: #f57f20;
142 |   animation-delay: 0s;
143 | }
144 | .mainLoader div:nth-child(2) {
145 |   border-color: #f57f20;
146 |   animation-delay: -1.1904761904761905s;
147 | }
148 | .mainLoaderContainer {
149 |   width: 60px;
150 |   height: 60px;
151 |   display: inline-block;
152 |   overflow: hidden;
153 | }
154 | .mainLoader {
155 |   width: 100%;
156 |   height: 100%;
157 |   position: relative;
158 |   transform: translateZ(0) scale(0.6);
159 |   backface-visibility: hidden;
160 |   transform-origin: 0 0; /* see note above */
161 | }
162 | .mainLoader div {
163 |   box-sizing: content-box;
164 | }
165 | 
166 | /* Scale Loader */
167 | .scaleLoader {
168 |   display: inline-block;
169 |   position: relative;
170 |   width: 60px;
171 |   height: 30px;
172 | }
173 | .scaleLoader div {
174 |   display: inline-block;
175 |   position: absolute;
176 |   left: 8px;
177 |   width: 8px;
178 |   background: #f57f20;
179 |   animation: scaleLoader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
180 | }
181 | .scaleLoader div:nth-child(1) {
182 |   left: 5px;
183 |   animation-delay: -0.36s;
184 | }
185 | .scaleLoader div:nth-child(2) {
186 |   left: 20px;
187 |   animation-delay: -0.24s;
188 | }
189 | .scaleLoader div:nth-child(3) {
190 |   left: 35px;
191 |   animation-delay: -0.12s;
192 | }
193 | .scaleLoader div:nth-child(4) {
194 |   left: 50px;
195 |   animation-delay: 0;
196 | }
197 | 
198 | @keyframes scaleLoader {
199 |   0% {
200 |     top: -5px;
201 |     height: 32px;
202 |   }
203 |   50%,
204 |   100% {
205 |     top: 10px;
206 |     height: 16px;
207 |   }
208 | }
209 | 
210 | /* List Sceleton */
211 | .listSkeletonBox {
212 |   display: flex;
213 |   flex-direction: column;
214 |   margin-top: 10px;
215 |   margin-bottom: 10px;
216 | }
217 | 
218 | .listLoading {
219 |   margin: 7px 10px;
220 |   width: 280px;
221 |   height: 20px !important;
222 |   border-radius: 10px !important;
223 | }
224 | 


--------------------------------------------------------------------------------