├── .vscode
    └── settings.json
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── codes.js
├── github.png
├── index.css
├── index.html
├── index.js
├── rohit_profile_img.png
└── website.png


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ##  `Steps To Generate PR(Pull Request)`
 2 | 
 3 | - (Star ⭐ & Fork 🍽️) this repository.
 4 | - Follow [rohit8020](https://www.github.com/rohit8020) get it merged fast.
 5 | # Fork this repository
 6 | 
 7 | Fork this repository by clicking on the fork button on the top of this page. This will create a copy of this repository in your account.
 8 | 
 9 | # Clone the repository
10 | 
11 | Now clone the forked repository to your system. Go to your GitHub account, open the forked repository, click on the code button and then clone the repository.
12 | 
13 | *if you want to use the terminal, use the following commands*
14 | after you fork the repository , open the terminal type the given command
15 | ```
16 | git clone https://github.com/{your-github-username}/css-loaders.git
17 | 
18 | ```
19 | 
20 | # Create a branch
21 | 
22 | Then create a branch on your local repository to solve a problem.
23 | 
24 | *terminal commands*
25 | ```
26 | git checkout -b your_new_branch_name
27 | 
28 | ```
29 | 
30 | 
31 | # Add & commit
32 | 
33 | Add your changes(folder) to that branch. <br/>
34 | Make necessary changes and commit those changes. 
35 | *terminal commands*
36 | ```
37 | git add .
38 | git commit -m "your-commit-message"
39 | 
40 | ```
41 | 
42 | # Push changes to GitHub
43 | 
44 | Finally push your local repository to remote repository
45 | Compare & Submit a Pull Request
46 | 
47 | *terminal commands*
48 | ```
49 | git push origin <branch-name>
50 | 
51 | ```
52 | 
53 | Then go to your repository on GitHub, you'll see a Compare & pull request button. Click on that button.
54 | 
55 | Now submit the pull request.
56 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Rohit Gangwar
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Simple CSS-LOADERS
 2 | 
 3 | Hacktober Fest 2022, This is the website from which you can copy the code for the css-loaders and use as a template in your website.
 4 | 
 5 | ## [Project Website Link](https://rohitgangwar.me/css-loaders/)
 6 | 
 7 | ![Alt text](./website.png)
 8 | 
 9 | ## How to contribute
10 | 
11 | - Always add a new CSS Loader, do not repeat the Loader.
12 | - Make a CSS-LOADER in HTML file(index.html). [here](index.html)
13 | - Add the CSS for the your loader in the CSS file(index.css). [here](index.css)
14 | - Add the HTML Code and CSS code inside the JavaScript file(codes.js) inside the codes array by making the object, as shown in the codes.js file. [here](codes.js)
15 | 
16 | ### Fork this repository
17 | 
18 | Fork this repository by clicking on the fork button on the top of this page. This will create a copy of this repository in your account.
19 | 
20 | ### Clone the repository
21 | 
22 | Now clone the forked repository to your system. Go to your GitHub account, open the forked repository, click on the code button and then clone the repository.
23 | 
24 | _if you want to use the terminal, use the following commands_
25 | after you fork the repository , open the terminal type the given command
26 | 
27 | ```
28 | git clone https://github.com/{your-github-username}/css-loaders.git
29 | 
30 | ```
31 | 
32 | ### Create a branch
33 | 
34 | Then create a branch on your local repository to solve a problem.
35 | 
36 | _terminal commands_
37 | 
38 | ```
39 | git checkout -b your_new_branch_name
40 | 
41 | ```
42 | 
43 | ### Add & commit
44 | 
45 | Add your changes(folder) to that branch. <br/>
46 | Make necessary changes and commit those changes. <br/>
47 | _Add your name in contributors list in `readme.md`_
48 | 
49 | _terminal commands_
50 | 
51 | ```
52 | git add .
53 | git commit -m "your-commit-message"
54 | 
55 | ```
56 | 
57 | ### Push changes to GitHub
58 | 
59 | Finally push your local repository to remote repository
60 | Compare & Submit a Pull Request
61 | 
62 | _terminal commands_
63 | 
64 | ```
65 | git push origin <branch-name>
66 | 
67 | ```
68 | 
69 | Then go to your repository on GitHub, you'll see a Compare & pull request button. Click on that button.
70 | 
71 | Now submit the pull request.
72 | 
73 | ### Star this repository
74 | 
75 | If you had fun while contributing to this project, then don't forget to give this project a star ⭐.
76 | 
77 | ## Contributors:
78 | 
79 | - [Abhay Gupta](https://github.com/abhaygupta08)
80 | - [Adithi Desai](https://github.com/AdithiDesai)
81 | - [Anuj Kumar Maurya](https://github.com/Anujkumar2017)
82 | - [NahushSingh](https://github.com/NahushSingh)
83 | - [Navkiran Singh](https://github.com/inavkiran)
84 | - [Rohit Gangwar](https://github.com/rohit8020)
85 | - [Sachin Gupta](https://github.com/sachingupta63)
86 | - [Vikas Ganiga](https://github.com/vikasganiga05)
87 | 
88 | ### Thanks for your contribution
89 | 


--------------------------------------------------------------------------------
/codes.js:
--------------------------------------------------------------------------------
   1 | /*
   2 | You can add more code in the codes array as given below.
   3 | You have to copy the HTML code of the loader and CSS code
   4 | and paste inside the codes array in the form ->
   5 | - Make a new object inside the codes array
   6 | -   {
   7 |         "id": it should be number(1+ previous id number),
   8 |         "code":
   9 |         `
  10 |         ##HTML Code
  11 |         <div></div>...
  12 | 
  13 |         ##CSS Code
  14 |         .loader-nth{
  15 |             ...
  16 |         }
  17 |         `
  18 |     },
  19 | - Add  the newly created object to the codes array(preferably at last of the array)
  20 | */
  21 | const codes = [
  22 |   {
  23 |     id: 1,
  24 |     code: `
  25 |         /* loader-1 */
  26 |         ##HTML
  27 |         <div class="loader-1">
  28 |           <div></div>
  29 |           <div></div>
  30 |           <div></div>
  31 |         </div>
  32 | 
  33 |         ##CSS
  34 |         .loader-1 {
  35 |             display: inline-block;
  36 |             position: relative;
  37 |             width: 80px;
  38 |             height: 80px;
  39 |             background-color: rgb(42, 119, 163);
  40 |         }
  41 | 
  42 |         .loader-1 div {
  43 |             display: inline-block;
  44 |             position: absolute;
  45 |             left: 8px;
  46 |             width: 16px;
  47 |             background: #fff;
  48 |             animation: loader-1 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  49 |         }
  50 | 
  51 |         .loader-1 div:nth-child(1) {
  52 |             left: 8px;
  53 |             animation-delay: -0.24s;
  54 |         }
  55 | 
  56 |         .loader-1 div:nth-child(2) {
  57 |             left: 32px;
  58 |             animation-delay: -0.12s;
  59 |         }
  60 | 
  61 |         .loader-1 div:nth-child(3) {
  62 |             left: 56px;
  63 |             animation-delay: 0;
  64 |         }
  65 | 
  66 |         @keyframes loader-1 {
  67 |             0% {
  68 |                 top: 8px;
  69 |                 height: 64px;
  70 |             }
  71 | 
  72 |             50%,
  73 |             100% {
  74 |                 top: 24px;
  75 |                 height: 32px;
  76 |             }
  77 |         }
  78 |         `,
  79 |   },
  80 |   {
  81 |     id: 2,
  82 |     code: `
  83 |             /* Loader-2 */
  84 |             #HTML
  85 |             <div class="loader-2"></div>
  86 | 
  87 |             ##CSS
  88 |             .loader-2 {
  89 |                 border: 16px solid #f3f3f3;
  90 |                 /* Light grey */
  91 |                 border-top: 16px solid #3498db;
  92 |                 /* Blue */
  93 |                 border-radius: 50%;
  94 |                 width: 120px;
  95 |                 height: 120px;
  96 |                 animation: spin 2s linear infinite;
  97 |             }
  98 | 
  99 |             @keyframes spin {
 100 |                 0% {
 101 |                     transform: rotate(0deg);
 102 |                 }
 103 | 
 104 |                 100% {
 105 |                     transform: rotate(360deg);
 106 |                 }
 107 |             }
 108 |             `,
 109 |   },
 110 |   {
 111 |     id: 3,
 112 |     code: `
 113 |             /* Loader-3 */
 114 |             #HTML
 115 |             <div class="loader-3"></div>
 116 | 
 117 |             ##CSS
 118 |             .loader-3
 119 |             {
 120 |                 position: relative;
 121 |                 width: 150px;
 122 |                 height: 150px;
 123 |                 border-radius: 50%;
 124 |                 background: linear-gradient(45deg,transparent,transparent 40%,#e5f403);
 125 |                 animation: animate-3 2s linear infinite;
 126 |             }
 127 |             @keyframes animate-3
 128 |             {
 129 |                 0%
 130 |                 {
 131 |                     transform: rotate(0deg);
 132 |                     filter: hue-rotate(0deg);
 133 |                 }
 134 |                 100%
 135 |                 {
 136 |                     transform: rotate(360deg);
 137 |                     filter: hue-rotate(360deg);
 138 |                 }
 139 |             }
 140 |             .loader-3:before
 141 |             {
 142 |                 content: '';
 143 |                 position: absolute;
 144 |                 top: 6px;
 145 |                 left: 6px;
 146 |                 right: 6px;
 147 |                 bottom: 6px;
 148 |                 background: #000;
 149 |                 border-radius: 50%;
 150 |                 z-index: 1000;
 151 |             }
 152 |             .loader-4:after
 153 |             {
 154 |                 content: '';
 155 |                 position: absolute;
 156 |                 top: 0px;
 157 |                 left: 0px;
 158 |                 right: 0px;
 159 |                 bottom: 0px;
 160 |                 border-radius: 50%;
 161 |                 z-index: 1;
 162 |                 background: linear-gradient(45deg,transparent,transparent 40%,#e5f403);
 163 |                 filter: blur(30px);
 164 |             }
 165 |             `,
 166 |   },
 167 |   {
 168 |     id: 4,
 169 |     code: `/* Loader-4 */
 170 |         #HTML
 171 |         <div class="loader-4">
 172 | 
 173 |         <div class="dot-loader"></div>
 174 |         <div class="dot-loader dot-loader--2"></div>
 175 |         <div class="dot-loader dot-loader--3"></div>
 176 | 
 177 |       </div>
 178 |       #CSS
 179 |       .loader-4{
 180 |         display: flex;
 181 |         justify-content: center;
 182 |         align-items: center;
 183 |         width: 120px;
 184 |         height: 120px;
 185 |     }
 186 |     .dot-loader {
 187 |         height: 20px;
 188 |         width: 20px;
 189 |         border-radius: 50%;
 190 |         background-color: black;
 191 |         position: relative;
 192 |         -webkit-animation: 1.2s grow ease-in-out infinite;
 193 |         animation: 1.2s grow ease-in-out infinite;
 194 |       }
 195 | 
 196 |       .dot-loader--2 {
 197 |         -webkit-animation: 1.2s grow ease-in-out infinite 0.15555s;
 198 |         animation: 1.2s grow ease-in-out infinite 0.15555s;
 199 |         margin: 0 20px;
 200 |       }
 201 |       .dot-loader--3 {
 202 |         -webkit-animation: 1.2s grow ease-in-out infinite 0.3s;
 203 |         animation: 1.2s grow ease-in-out infinite 0.3s;
 204 |       }
 205 |       @-webkit-keyframes grow {
 206 |         0%, 40%, 100% {
 207 |           -webkit-transform: scale(0);
 208 |                   transform: scale(0);
 209 |         }
 210 |         40% {
 211 |           -webkit-transform: scale(1);
 212 |                   transform: scale(1);
 213 |         }
 214 |       }
 215 |       @keyframes grow {
 216 |         0%, 40%, 100% {
 217 |           -webkit-transform: scale(0);
 218 |                   transform: scale(0);
 219 |         }
 220 |         40% {
 221 |           -webkit-transform: scale(1);
 222 |                   transform: scale(1);
 223 |         }
 224 |       }
 225 | `,
 226 |   },
 227 |   {
 228 |     id: 5,
 229 |     code: `/* Loader-5 */
 230 |         #HTML
 231 |         <div class="loader_5">
 232 |   <div class="loader5_int"></div>
 233 | </div>
 234 | #CSS
 235 | .loader_5 {
 236 |     background-color: rgba(0,0,0,0.5);
 237 |     position: relative;
 238 |     height: 100vh;
 239 |     width: 100vw;
 240 |   }
 241 | 
 242 |   .loader5_int {
 243 |     position: absolute;
 244 |     top: 50%;
 245 |     left: 50%;
 246 |     transform: translate(-50%,-50%);
 247 |     width: 60px;
 248 |     height: 60px;
 249 |     border-radius: 50%;
 250 |     border: 4px solid #009ed2;
 251 |     border-right-color: transparent;
 252 |     transform-origin: center;
 253 |     animation: rotate 1s linear infinite;
 254 |   }
 255 | 
 256 |   @keyframes rotate {
 257 |     from {
 258 |       transform: rotate(0);
 259 |     }
 260 |     to {
 261 |       transform: rotate(360deg);
 262 |     }
 263 |   }
 264 | `,
 265 |   },
 266 |   {
 267 |     id: 6,
 268 |     code: `/*Loader - 6*/
 269 |         #HTML
 270 |         <div class="loader-6">
 271 |             <div class="set-one">
 272 |                 <div class="circle"></div>
 273 |                 <div class="circle"></div>
 274 |             </div>
 275 |             <div class="set-two">
 276 |                 <div class="circle"></div>
 277 |                 <div class="circle"></div>
 278 |             </div>        #CSS
 279 |         .loader-6 {
 280 |             height: 120px;
 281 |             width: 120px;
 282 |             position: relative;
 283 |           }
 284 | 
 285 |           .loader-6 .circle {
 286 |             width: 20px;
 287 |             height: 20px;
 288 |             background: black;
 289 |             border-radius: 50%;
 290 |             margin: -12.5px;
 291 |             -webkit-animation: mesh 3s ease-in-out infinite;
 292 |             animation: mesh 3s ease-in-out infinite -1.5s;
 293 |           }
 294 | 
 295 |           .loader-6 > div .circle:last-child {
 296 |             -webkit-animation-delay: 0s;
 297 |             animation-delay: 0s;
 298 |           }
 299 | 
 300 |           .loader-6 > div {
 301 |             position: absolute;
 302 |             top: 50%;
 303 |             left: 50%;
 304 |           }
 305 | 
 306 |           .loader-6 > div:last-child {
 307 |             -webkit-transform: rotate(90deg);
 308 |             transform: rotate(90deg);
 309 |           }
 310 | 
 311 |           @-webkit-keyframes mesh {
 312 |           0% {
 313 |             -webkit-transform-origin: 50% -100%;
 314 |                     transform-origin: 50% -100%;
 315 |             -webkit-transform: rotate(0);
 316 |                     transform: rotate(0);
 317 |           }
 318 |           50% {
 319 |             -webkit-transform-origin: 50% -100%;
 320 |                     transform-origin: 50% -100%;
 321 |             -webkit-transform: rotate(360deg);
 322 |                     transform: rotate(360deg);
 323 |           }
 324 |           50.00001% {
 325 |             -webkit-transform-origin: 50% 200%;
 326 |                     transform-origin: 50% 200%;
 327 |             -webkit-transform: rotate(0deg);
 328 |                     transform: rotate(0deg);
 329 |           }
 330 |           100% {
 331 |             -webkit-transform-origin: 50% 200%;
 332 |                     transform-origin: 50% 200%;
 333 |             -webkit-transform: rotate(360deg);
 334 |                     transform: rotate(360deg);
 335 |           }
 336 |           }
 337 |           @keyframes mesh {
 338 |           0% {
 339 |             -webkit-transform-origin: 50% -100%;
 340 |                     transform-origin: 50% -100%;
 341 |             -webkit-transform: rotate(0);
 342 |                     transform: rotate(0);
 343 |           }
 344 |           50% {
 345 |             -webkit-transform-origin: 50% -100%;
 346 |                     transform-origin: 50% -100%;
 347 |             -webkit-transform: rotate(360deg);
 348 |                     transform: rotate(360deg);
 349 |           }
 350 |           50.00001% {
 351 |             -webkit-transform-origin: 50% 200%;
 352 |                     transform-origin: 50% 200%;
 353 |             -webkit-transform: rotate(0deg);
 354 |                     transform: rotate(0deg);
 355 |           }
 356 |           100% {
 357 |             -webkit-transform-origin: 50% 200%;
 358 |                     transform-origin: 50% 200%;
 359 |             -webkit-transform: rotate(360deg);
 360 |                     transform: rotate(360deg);
 361 |           }
 362 |           }
 363 |         `,
 364 |   },
 365 |   {
 366 |     id: 7,
 367 |     code: `
 368 |       ##HTML
 369 |       <div class="loader-7">
 370 |           <div class="dot-loader-7"></div>
 371 |           <div class="dot-loader-7"></div>
 372 |           <div class="dot-loader-7"></div>
 373 |           <span class="loading-7">Loading...</span>
 374 |         </div>
 375 | 
 376 |       ##CSS
 377 |       .loader-7{
 378 |         margin: 0;
 379 |         padding: 0;
 380 |         box-sizing:border-box;
 381 |         position: relative;
 382 |         display: flex;
 383 |         justify-content: center;
 384 |         align-items: center;
 385 |         width: 120px;
 386 |         height: 120px;
 387 |         background: #011015;
 388 |       }
 389 | 
 390 |       .dot-loader-7{
 391 |         width: 120px;
 392 |         height: 120px;
 393 |         border: 4px solid #011015;
 394 |         border-radius: 50%;
 395 |         position: absolute;
 396 |       }
 397 | 
 398 |       .dot-loader-7:nth-child(1){
 399 |         border-bottom-width: 10px;
 400 |         border-color: rgb(255, 0, 255);
 401 |         animation: rotate1 2s linear infinite;
 402 | 
 403 |       }
 404 | 
 405 |       .dot-loader-7:nth-child(2){
 406 |         border-right-width: 10px;
 407 |         border-color: rgb(0, 247, 255);
 408 |         animation: rotate2 2s linear infinite;
 409 | 
 410 |       }
 411 | 
 412 |       .dot-loader-7:nth-child(3){
 413 |         border-top-width: 10px;
 414 |         border-color: rgb(0, 255, 13);
 415 |         animation: rotate3 2s linear infinite;
 416 | 
 417 |       }
 418 |       @keyframes rotate1{
 419 |         0%{
 420 |             transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
 421 |         }
 422 |         50%{
 423 |             transform: rotate(0deg);
 424 |         }
 425 |         100%{
 426 |             transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
 427 |         }
 428 |       }
 429 | 
 430 |       @keyframes rotate2{
 431 |         0%{
 432 |             transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
 433 |         }
 434 |         50%{
 435 |             transform: rotate(0deg);
 436 |         }
 437 |         100%{
 438 |             transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
 439 |         }
 440 |       }
 441 | 
 442 |       @keyframes rotate3{
 443 |         0%{
 444 |             transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
 445 |         }
 446 |         50%{
 447 |             transform: rotate(0deg);
 448 |         }
 449 |         100%{
 450 |             transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
 451 |         }
 452 |       }
 453 | 
 454 |       .loading-7{
 455 |         color: white;
 456 |         font-size: smaller;
 457 |       }
 458 |       `,
 459 |   },
 460 | 
 461 |   {
 462 |     id: 8,
 463 |     code: `
 464 |       ##HTML
 465 |       <div class="loader-8">
 466 |           <div class="loader-hourglass"></div>
 467 |       </div>
 468 | 
 469 |       ##CSS
 470 |       .loader-hourglass {
 471 |           display: inline-block;
 472 |           position: relative;
 473 |           width: 80px;
 474 |           height: 80px;
 475 |       }
 476 | 
 477 |       .loader-hourglass:after {
 478 |           content: " ";
 479 |           display: block;
 480 |           border-radius: 50%;
 481 |           width: 0;
 482 |           height: 0;
 483 |           margin: 8px;
 484 |           box-sizing: border-box;
 485 |           border: 32px solid #fff;
 486 |           border-color: #fff transparent #fff transparent;
 487 |           animation: loader-hourglass 1.2s infinite;
 488 |       }
 489 | 
 490 |       @keyframes loader-hourglass {
 491 |           0% {
 492 |               transform: rotate(0);
 493 |               animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
 494 |           }
 495 | 
 496 |           50% {
 497 |               transform: rotate(900deg);
 498 |               animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 499 |           }
 500 | 
 501 |           100% {
 502 |               transform: rotate(1800deg);
 503 |           }
 504 |       }
 505 |       `,
 506 |   },
 507 |   {
 508 |     id: 9,
 509 |     code: `
 510 |       ##HTML
 511 |       <div class="loader-box">
 512 |         <div class="loader-ripple">
 513 |           <div></div>
 514 |           <div></div>
 515 |         </div>
 516 |       </div>
 517 | 
 518 |       #CSS
 519 |       .loader-ripple {
 520 |           display: inline-block;
 521 |           position: relative;
 522 |           width: 80px;
 523 |           height: 80px;
 524 |       }
 525 | 
 526 |       .loader-ripple div {
 527 |           position: absolute;
 528 |           border: 4px solid #fff;
 529 |           opacity: 1;
 530 |           border-radius: 50%;
 531 |           animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 532 |       }
 533 | 
 534 |       .loader-ripple div:nth-child(2) {
 535 |           animation-delay: -0.5s;
 536 |       }
 537 | 
 538 |       @keyframes loader-ripple {
 539 |           0% {
 540 |               top: 36px;
 541 |               left: 36px;
 542 |               width: 0;
 543 |               height: 0;
 544 |               opacity: 0;
 545 |           }
 546 | 
 547 |           4.9% {
 548 |               top: 36px;
 549 |               left: 36px;
 550 |               width: 0;
 551 |               height: 0;
 552 |               opacity: 0;
 553 |           }
 554 | 
 555 |           5% {
 556 |               top: 36px;
 557 |               left: 36px;
 558 |               width: 0;
 559 |               height: 0;
 560 |               opacity: 1;
 561 |           }
 562 | 
 563 |           100% {
 564 |               top: 0px;
 565 |               left: 0px;
 566 |               width: 72px;
 567 |               height: 72px;
 568 |               opacity: 0;
 569 |           }
 570 |       }
 571 |       `,
 572 |   },
 573 |   {
 574 |     id: 10,
 575 |     code: `
 576 |       ##HTML
 577 |       <div class="loader-10">
 578 |         <div class="l10"></div>
 579 |       </div>
 580 | 
 581 |       ##CSS
 582 |       .loader-10 {
 583 |         width: 120px;
 584 |         height: 20px;
 585 |         background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
 586 |         -webkit-mask:
 587 |           linear-gradient(#000 0 0) top   /100% 5px no-repeat,
 588 |           linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
 589 |           repeating-linear-gradient(90deg,#000 0 5px, #0000 0 20%) left/calc(100% - 5px) 100%;
 590 |         animation: l10 1s infinite linear;
 591 |     }
 592 | 
 593 |     @keyframes l10 {
 594 |       100% {background-position: right -40px top 0}
 595 |     }
 596 |       `,
 597 |   },
 598 |   {
 599 |     id: 11,
 600 |     code: `
 601 |       ##HTML
 602 |       <!-- Loader-11 -->
 603 |       <div class="loader-box">
 604 |           <div class="loader-11">
 605 |             <div class="loader-circle"><div></div></div>
 606 |           </div>
 607 |           <a href="#demo-modal" id="11" class="show-code-btn">Show Code</a>
 608 |       </div>
 609 | 
 610 |       ##CSS
 611 |       /*  ............Loader-11...............*/
 612 |       .loader-circle {
 613 |         display: inline-block;
 614 |         transform: translateZ(1px);
 615 |       }
 616 |       .loader-circle > div {
 617 |         display: inline-block;
 618 |         width: 64px;
 619 |         height: 64px;
 620 |         margin: 8px;
 621 |         border-radius: 50%;
 622 |         background: #fff;
 623 |         animation: loader-circle 2.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 624 |       }
 625 |       @keyframes loader-circle {
 626 |         0%,
 627 |         100% {
 628 |           animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
 629 |         }
 630 |         0% {
 631 |           transform: rotateY(0deg);
 632 |         }
 633 |         50% {
 634 |           transform: rotateY(1800deg);
 635 |           animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
 636 |         }
 637 |         100% {
 638 |           transform: rotateY(3600deg);
 639 |         }
 640 |       }
 641 |       `,
 642 |   },
 643 |   {
 644 |     id: 12,
 645 |     code: `
 646 |      ##HTML
 647 |      <div class="loader-12">
 648 |         <span class="loader_arrow"></span>
 649 |      </div>
 650 | 
 651 |      ##CSS
 652 |       .loader_arrow {
 653 |         width: 48px;
 654 |         height: 48px;
 655 |         display: inline-block;
 656 |         position: relative;
 657 |         border: 3px solid;
 658 |         border-color:#de3500 #0000 #fff #0000;
 659 |         border-radius: 50%;
 660 |         box-sizing: border-box;
 661 |         animation: 1s rotate linear infinite;
 662 |      }
 663 |      .loader_arrow:before , .loader_arrow:after{
 664 |         content: '';
 665 |         top: 0;
 666 |         left: 0;
 667 |         position: absolute;
 668 |         border: 10px solid transparent;
 669 |         border-bottom-color:#fff;
 670 |         transform: translate(-10px, 19px) rotate(-35deg);
 671 |       }
 672 |      .loader_arrow:after {
 673 |         border-color: #de3500 #0000 #0000 #0000 ;
 674 |         transform: translate(32px, 3px) rotate(-35deg);
 675 |       }
 676 |        @keyframes rotate {
 677 |         100%{    transform: rotate(360deg)}
 678 |       }
 679 |      `,
 680 |   },
 681 |   {
 682 |     id: 13,
 683 |     code: `
 684 |       ##HTML
 685 |       <div class="loader-13">
 686 |         <div class="loader13">
 687 |           <div class="loader13">
 688 |             <div class="loader13">
 689 |               <div class="loader13">
 690 |                 <div class="loader13">
 691 |                   <div class="loader13">
 692 |                     <div class="loader13">
 693 |                       <div class="loader13">
 694 |                         <div class="loader13">
 695 |                         </div>
 696 |                       </div>
 697 |                     </div>
 698 |                   </div>
 699 |                 </div>
 700 |               </div>
 701 |             </div>
 702 |           </div>
 703 |         </div>
 704 |       </div>
 705 | 
 706 |       ##CSS
 707 |       .loader-13{
 708 |         height: 50%;
 709 |         display: flex;
 710 |         justify-content: center;
 711 |         align-items: center;
 712 |         overflow: hidden;
 713 |         background: rebeccapurple;
 714 |       }
 715 |       .loader13{
 716 |           border: 7px groove rebeccapurple;
 717 | 
 718 |           display: table-cell;
 719 |           border-radius: 999px;
 720 |           animation: spin 15s linear infinite;
 721 |         }
 722 | 
 723 |         @keyframes spin {
 724 |           from { transform: rotate(0deg) }
 725 |           to { transform: rotate(360deg) }
 726 |         }
 727 | 
 728 |       `,
 729 |   },
 730 | 
 731 |   {
 732 |     id: 14,
 733 |     code: `
 734 |           ##HTML
 735 |           <div class="loader-14">
 736 |               <div class="l-14"></div>
 737 |           </div>
 738 | 
 739 |           ##CSS
 740 |           .loader-14 {
 741 |             width: 100px;
 742 |             height: 100px;
 743 |             border-radius: 100%;
 744 |             position: relative;
 745 |             margin: 0 auto;
 746 |           }
 747 | 
 748 | 
 749 |           .l-14{
 750 |             -webkit-perspective: 120px;
 751 |             -moz-perspective: 120px;
 752 |             -ms-perspective: 120px;
 753 |             perspective: 120px;
 754 |           }
 755 | 
 756 |           .l-13:before{
 757 |             content: "";
 758 |             position: absolute;
 759 |             left: 25px;
 760 |             top: 25px;
 761 |             width: 50px;
 762 |             height: 50px;
 763 |             background-color: #3498db;
 764 |             animation: flip 1s infinite;
 765 |           }
 766 | 
 767 |           @keyframes flip {
 768 |             0% {
 769 |               transform: rotate(0);
 770 |             }
 771 | 
 772 |             50% {
 773 |               transform: rotateY(180deg);
 774 |             }
 775 | 
 776 |             100% {
 777 |               transform: rotateY(180deg)  rotateX(180deg);
 778 |             }
 779 |           }
 780 |         `,
 781 |   },
 782 |   {
 783 |     id: 15,
 784 |     code: `
 785 |     ##HTML
 786 |     <div class="spinner-container">
 787 |     <div class="spinner"></div>
 788 |     </div>
 789 | 
 790 |     #CSS
 791 |     body {
 792 |       --clr-background: whitesmoke;
 793 |       --clr-main: tomato;
 794 |     }
 795 | 
 796 |     .spinner-container {
 797 |       height: 70%;
 798 |         display: flex;
 799 |         align-items: center;
 800 |         overflow: hidden;
 801 |       justify-content: center;
 802 |       background-color: var(--clr-background);
 803 |     }
 804 | 
 805 |     .spinner-container .spinner {
 806 |       height: 100px;
 807 |       width: 100px;
 808 |       background-color: var(--clr-main);
 809 |       border-radius: 50%;
 810 |       position: relative;
 811 |       animation: animateRotate 3s linear infinite;
 812 |     }
 813 | 
 814 |     .spinner-container .spinner::before,
 815 |     .spinner-container .spinner::after {
 816 |       content: '';
 817 |       position: absolute;
 818 |       border-radius: 50%;
 819 |       background-color: var(--clr-background);
 820 |       top: 50%;
 821 |       transform: translateY(-50%);
 822 |     }
 823 | 
 824 |     .spinner-container .spinner::before {
 825 |       height: calc(85% + 3px);
 826 |       width: calc(85% + 3px);
 827 |       left: -2px;
 828 |       animation: animateBall 1s infinite linear alternate;
 829 |     }
 830 | 
 831 |     .spinner-container .spinner::after {
 832 |       height: calc(15% + 3px);
 833 |       width: calc(15% + 3px);
 834 |       right: -2px;
 835 |       animation: animateBall 1s infinite linear alternate-reverse;
 836 |     }
 837 | 
 838 |     @keyframes animateBall {
 839 |       from { height: calc(85% + 3px); width: calc(85% + 3px); }
 840 |       to {height: calc(15% + 3px); width: calc(15% + 3px); }
 841 |     }
 842 | 
 843 |     @keyframes animateRotate {
 844 |       to { transform: rotate(360deg); }
 845 |     }`,
 846 |   },
 847 |   {
 848 |     id: 16,
 849 |     code: `
 850 |     ##HTML
 851 |     <div class="loader-16"></div>
 852 |     <span class="sat"> loading... </span>
 853 |     <a href="#demo-modal" id="16" class="show-code-btn">Show Code</a>
 854 | 
 855 |     ##CSS
 856 | 
 857 | .loader-16{
 858 |   position: absolute;
 859 |   width: 100px;
 860 |   height: 100px;
 861 |   border-radius: 50%;
 862 |   animation: ring 2s linear infinite;
 863 |   margin-bottom: 56px;
 864 | }
 865 | 
 866 | @keyframes ring {
 867 |   0%{transform: rotate(0deg);
 868 |       box-shadow: 1px 4px 2px #e65c00;
 869 |   }
 870 |   50%{transform: rotate(180deg);
 871 |       box-shadow: 1px 4px 2px #18b201;
 872 |   }
 873 |   100%{transform: rotate(360deg);
 874 |       box-shadow: 1px 4px 2px #0456c8;
 875 |   }
 876 | }
 877 | .loader-16:before {
 878 |   position: absolute;
 879 |   content: ' ';
 880 |   left: 0;
 881 |   top: 0;
 882 |   height: 100%;
 883 |   width: 100%;
 884 |   border-radius: 50%;
 885 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 886 | 
 887 | }
 888 | .sat{
 889 |   color: #000000;
 890 |   font-size: 10px;
 891 |   text-transform: uppercase;
 892 |   letter-spacing: 1px;
 893 |   line-height: 200px;
 894 |   font-weight: bold;
 895 | 
 896 | }
 897 |     `,
 898 |   },
 899 |   {
 900 |     id: 17,
 901 |     code: `
 902 |     ##HTML
 903 |     <div class="loader-17">
 904 |     <span class="pp" style="--i:1;"></span>
 905 |     <span class="pp" style="--i:2;"></span>
 906 |     <span class="pp" style="--i:3;"></span>
 907 |     <span class="pp" style="--i:4;"></span>
 908 |     <span class="pp" style="--i:5;"></span>
 909 |     <span class="pp" style="--i:6;"></span>
 910 |     <span class="pp" style="--i:7;"></span>
 911 |     <span class="pp" style="--i:8;"></span>
 912 |     <span class="pp" style="--i:9;"></span>
 913 |     <span class="pp" style="--i:10;"></span>
 914 |     <span class="pp" style="--i:11;"></span>
 915 |     <span class="pp" style="--i:12;"></span>
 916 |     <span class="pp" style="--i:13;"></span>
 917 |     <span class="pp" style="--i:14;"></span>
 918 |     <span class="pp" style="--i:15;"></span>
 919 |     <span class="pp" style="--i:16;"></span>
 920 |     <span class="pp" style="--i:17;"></span>
 921 |     <span class="pp" style="--i:18;"></span>
 922 |     <span class="pp" style="--i:19;"></span>
 923 |     <span class="pp" style="--i:20;"></span>
 924 |     <a href="#demo-modal" id="17" class="show-code-btn show">Show Code</a>
 925 |     </div>
 926 | 
 927 | 
 928 |   ##CSS
 929 |   .loader-17{
 930 |     display: flex;
 931 |     justify-content: center;
 932 |     align-items: center;
 933 |     min-height: 100vh;
 934 |     animation: anim 10s linear infinite;
 935 |   }
 936 |   @keyframes anim
 937 |   {
 938 |     0%{
 939 |        filter: hue-rotate(0deg);
 940 |     }
 941 |     100%{
 942 |         filter: hue-rotate(360deg);
 943 |     }
 944 |   }
 945 | 
 946 |   .loader-17 .pp
 947 |   {
 948 |     position: absolute;
 949 |     /* top: 0; */
 950 |     /* left: 0; */
 951 |     width: 80px;
 952 |     height: 80px;
 953 |     transform: rotate(calc(18deg * var(--i)));
 954 | 
 955 |   }
 956 | 
 957 |   .loader-17 .pp::before{
 958 |     content: ' ';
 959 |     position: absolute;
 960 |     left: 0;
 961 |     top: 0;
 962 |     width: 5px;
 963 |     height: 5px;
 964 |     background-color: #e9c912;
 965 |     box-shadow: 0 0 5px #7ffa1a,
 966 |                 0 0 10px #7ffa1a,
 967 |                 0 0 20px #7ffa1a,
 968 |                 0 0 40px #7ffa1a,
 969 |                 0 0 60px #7ffa1a,
 970 |                 0 0 80px #7ffa1a;
 971 | 
 972 |     animation: sat11 2s linear infinite;
 973 |     animation-delay: calc(0.1s * var(--i));
 974 |   }
 975 |   @keyframes sat11
 976 |   {
 977 |     0%{
 978 |        transform: scale(1);
 979 |     }
 980 |     80%,100%{
 981 |         transform: scale(2);
 982 |     }
 983 | 
 984 |   }
 985 |   .show{
 986 |     margin-top: 14rem;
 987 | 
 988 |   }
 989 |     `,
 990 |   },
 991 |   {
 992 |     id: 18,
 993 |     code: `
 994 |     ##HTML
 995 |     <div class="loader-box">
 996 |       <div class="loader-18">
 997 |         <div class="loader-placeholder">
 998 |           <div class="indicator"></div>
 999 |         </div>
1000 |       </div>
1001 |     </div>
1002 | 
1003 | 
1004 |   ##CSS
1005 |   .loader-18 {
1006 |     display: flex;
1007 |     align-items: center;
1008 |     width: 100%;
1009 |     height: 100%;
1010 |     padding: 0 45px;
1011 |   }
1012 | 
1013 |   .loader-placeholder {
1014 |     width: 100%;
1015 |     height: 20px;
1016 |     border: 2px solid #6A0DAD;
1017 |     border-radius: 8px;
1018 |     padding: 2px;
1019 |   }
1020 | 
1021 |   .indicator {
1022 |     position: relative;
1023 |     width: 30px;
1024 |     height: 100%;
1025 |     border-radius: 8px;
1026 |     background-color: #6A0DAD;
1027 |     animation: loader18 1s infinite linear alternate-reverse;
1028 |     margin: 0;
1029 |   }
1030 | 
1031 |   @keyframes loader18 {
1032 |     0%{
1033 |        left: 0px;
1034 |     }
1035 |     100%{
1036 |       left: 130px;
1037 |     }
1038 |   }
1039 |     `,
1040 |   },
1041 |   {
1042 |     id: 19,
1043 |     code: `
1044 |     ##HTML
1045 |     <div class="loading">
1046 |         <div></div>
1047 | 	  </div>
1048 | 
1049 |     #CSS
1050 |     .loading {
1051 |       width: 100vw;
1052 |       height: 100vh;
1053 |       background-color: white;
1054 |       display: grid;
1055 |       place-items: center;
1056 |       max-width: 100%;
1057 |     }
1058 | 
1059 |     .loading > div {
1060 |       width: 10vmax;
1061 |       height: 10vmax;
1062 |       border-bottom: 5px solid rgba(0, 0, 0, 0.719);
1063 | 
1064 |       border-radius: 50%;
1065 | 
1066 |       animation: loadingRotate 800ms linear infinite;
1067 |     }
1068 | 
1069 |     @keyframes loadingRotate {
1070 |       to {
1071 |         transform: rotateZ(-360deg);
1072 |       }
1073 |     }
1074 |     `,
1075 |   },
1076 |   {
1077 |     id: 20,
1078 |     code: `
1079 |     ###HTML
1080 |     <div class="loader-box">
1081 |       <div class="loader-20">
1082 |         <span class="word1">l</span>
1083 |         <span class="word2">o</span>
1084 |         <span class="word3">a</span>
1085 |         <span class="word4">d</span>
1086 |         <span class="word5">i</span>
1087 |         <span class="word6">n</span>
1088 |         <span class="word7">g</span>
1089 |       </div>
1090 |       <a href="#demo-modal" id="20" class="show-code-btn">Show Code</a>
1091 |     </div>
1092 | 
1093 |     ###CSS
1094 |     .loader-20 {
1095 |       margin: 0;
1096 |       padding: 0;
1097 |       font-weight: 100;
1098 |       font-size: 1.1em;
1099 |       color: #ffffff;
1100 |     }
1101 | 
1102 |     .loader-20 span {
1103 |       display: inline-block;
1104 |       text-transform: uppercase;
1105 |       opacity: 0;
1106 |       transform: rotateX(-90deg);
1107 |     }
1108 | 
1109 |     .loader-20 .word1 {
1110 |       animation: drop 1.2s ease-in-out infinite;
1111 |       animation-delay: 1.2s;
1112 |     }
1113 | 
1114 |     .loader-20 .word2 {
1115 |       animation: drop 1.2s ease-in-out infinite;
1116 |       animation-delay: 1.3s;
1117 |     }
1118 | 
1119 |     .loader-20 .word3 {
1120 |       animation: drop 1.2s ease-in-out infinite;
1121 |       animation-delay: 1.4s;
1122 |     }
1123 | 
1124 |     .loader-20 .word4 {
1125 |       animation: drop 1.2s ease-in-out infinite;
1126 |       animation-delay: 1.5s;
1127 | 
1128 |     }
1129 | 
1130 |     .loader-20 .word5 {
1131 |       animation: drop 1.2s ease-in-out infinite;
1132 |       animation-delay: 1.6s;
1133 |     }
1134 | 
1135 |     .loader-20 .word6 {
1136 |       animation: drop 1.2s ease-in-out infinite;
1137 |       animation-delay: 1.7s;
1138 |     }
1139 | 
1140 |     .loader-20 .word7 {
1141 |       animation: drop 1.2s ease-in-out infinite;
1142 |       animation-delay: 1.8s;
1143 |     }
1144 | 
1145 |     @keyframes drop {
1146 |         10% {
1147 |             opacity: 0.5;
1148 |         }
1149 |         20% {
1150 |             opacity: 1;
1151 |             top: 3.78em;
1152 |             transform: rotateX(-360deg);
1153 |         }
1154 |         80% {
1155 |             opacity: 1;
1156 |             top: 3.78em;
1157 |             transform: rotateX(-360deg);
1158 |         }
1159 |         90% {
1160 |             opacity: 0.5;
1161 |         }
1162 |         100% {
1163 |             opacity: 0;
1164 |             top: 6.94em
1165 |         }
1166 |     }
1167 |     `,
1168 |   },
1169 |   {
1170 |     id: 21,
1171 |     code: `
1172 |     ###HTML
1173 |     <div class="loader21">
1174 |     <svg class="svg " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13.86">
1175 |       <defs>
1176 |         <polygon id="hexagon" points="4.29 13.36 0.58 6.93 4.29 0.5 11.71 0.5 15.42 6.93 11.71 13.36 4.29 13.36" />
1177 |         <g id="inner-shadow" transform="translate(-2, -2)">
1178 |           <use xlink:href="#hexagon" class="inner-shadow" transform="scale(1.25)" />
1179 |         </g>
1180 |         <g id="inner-shadow-animated" transform="translate(-2, -2)">
1181 |           <use xlink:href="#hexagon" class="inner-shadow--animated" transform="scale(1.25)" />
1182 |         </g>
1183 |       </defs>
1184 |       <mask id="mask">
1185 |         <rect x="-4" y="-4" width="24" height="24" fill="black" />
1186 |         <use xlink:href="#hexagon" fill="white" />
1187 |       </mask>
1188 |       <use xlink:href="#hexagon" class="fill" />
1189 |       <use xlink:href="#hexagon" class="fill--animated" />
1190 |       <use xlink:href="#inner-shadow" mask="url(#mask)" />
1191 | 
1192 |       <use xlink:href="#inner-shadow-animated" mask="url(#mask)" />
1193 |     </svg>
1194 | 
1195 |     </div>
1196 | 
1197 |    ###CSS
1198 |    .loader21 {
1199 |     margin: 0;
1200 |     background: chocolate;
1201 |     display: flex;
1202 |     align-items: center;
1203 |     justify-content: center;
1204 | 
1205 |     --timing: 1.5s infinite linear;
1206 | 
1207 | }
1208 | 
1209 | .svg {
1210 |     animation: size var(--timing);
1211 |     overflow: visible;
1212 |     transform: scale(1);
1213 |     width: 4rem;
1214 | }
1215 | 
1216 | .fill {
1217 |     animation: drop-shadow-blink var(--timing);
1218 |     fill: white;
1219 |     filter: drop-shadow(0 0 2px blue);
1220 | }
1221 | 
1222 | .fill--animated {
1223 |    animation: fill-blink var(--timing);
1224 |    fill: blue;
1225 | }
1226 | 
1227 | .inner-shadow, .inner-shadow--animated {
1228 |     fill: transparent;
1229 |     stroke: white;
1230 |     stroke-width: 2px;
1231 | }
1232 | 
1233 | .inner-shadow {
1234 |     filter: drop-shadow(0 0 1px blue);
1235 | }
1236 | 
1237 | .inner-shadow--animated {
1238 |     animation: inner-shadow-blink var(--timing);
1239 |     filter: drop-shadow(0 0 3px blue);
1240 | }
1241 | 
1242 | @keyframes size {
1243 |     0%, 95%, 100% {
1244 |         transform: scale(1);
1245 |     }
1246 | 
1247 |     75% {
1248 |         transform: scale(.9);
1249 |     }
1250 | }
1251 | 
1252 | @keyframes fill-blink {
1253 |     0%, 100% {
1254 |         opacity: 0;
1255 |     }
1256 | 
1257 |     75% {
1258 |         opacity: .45;
1259 |     }
1260 | }
1261 | 
1262 | @keyframes inner-shadow-blink {
1263 |     0%, 100% {
1264 |         opacity: 0;
1265 |     }
1266 | 
1267 |     75% {
1268 |         opacity: 1;
1269 |     }
1270 | }
1271 | 
1272 | @keyframes drop-shadow-blink {
1273 |     0%, 90%, 100%{
1274 |         filter: drop-shadow(0 0 6px rgb(104, 104, 255));
1275 |     }
1276 |     75% {
1277 |         filter: drop-shadow(0 0 3px blue);
1278 |     }
1279 | }
1280 | 
1281 | 
1282 |     `,
1283 |   },
1284 | 
1285 |   {
1286 |     id: 22,
1287 |     code: `
1288 |     ##HTML Code
1289 |     <div>
1290 |     <span class="dot" id="dot1"></span>
1291 |     <span class="dot" id="dot2"></span>
1292 |     <span class="dot" id="dot3"></span>
1293 |     <span class="dot" id="dot4"></span>
1294 |   </div>
1295 | 
1296 |     ##CSS Code
1297 |     .dot {
1298 |       height: 5px;
1299 |       width: 15px;
1300 |       background-color: black;
1301 |       border-radius: 10%;
1302 |       display: inline-block;
1303 |     }
1304 | 
1305 |     #dot1 {
1306 |       animation: ajay1 1.2s infinite;
1307 |     }
1308 | 
1309 |     #dot2 {
1310 |       animation: ajay2 1.2s infinite;
1311 |     }
1312 | 
1313 |     #dot3 {
1314 |       animation: ajay3 1.2s infinite;
1315 |     }
1316 | 
1317 |     #dot4 {
1318 |       animation: ajay4 1.2s infinite;
1319 |     }
1320 | 
1321 |     @keyframes ajay4 {
1322 |       40% {
1323 |         height: 50px;
1324 |       }
1325 | 
1326 |       100% {
1327 |         opacity: 55%;
1328 |         height: 9px;
1329 |       }
1330 |     }
1331 | 
1332 |     @keyframes ajay3 {
1333 |       30% {
1334 |         height: 35px;
1335 |       }
1336 | 
1337 |       100% {
1338 |         opacity: 40%;
1339 |         height: 6px;
1340 |       }
1341 |     }
1342 | 
1343 |     @keyframes ajay2 {
1344 |       20% {
1345 |         height: 25px;
1346 |       }
1347 | 
1348 |       100% {
1349 |         opacity: 25%;
1350 |         height: 4px;
1351 |       }
1352 |     }
1353 | 
1354 |     @keyframes ajay1 {
1355 |       10% {
1356 |         /* opacity: 40%; */
1357 |         height: 15px;
1358 |       }
1359 | 
1360 |       100% {
1361 |         opacity: 10%;
1362 |         height: 2px;
1363 |       }
1364 |     }
1365 |     `,
1366 |   },
1367 | 
1368 |   {
1369 |     id: 23,
1370 |     code: `
1371 |     ###HTML
1372 |     <div class="loader-23">
1373 |         <div class="loading">
1374 |         <span class="loader"></span>
1375 |         <span class="loader"></span>
1376 |         <span class="loader"></span>
1377 |     </div>
1378 | 
1379 | 
1380 |     ###CSS
1381 |     .loader-23 {
1382 |       width: 100%;
1383 |       height: 100vh;
1384 |       display: flex;
1385 |       justify-content: center;
1386 |       align-items: center;
1387 |     }
1388 |     .loader-23 .loading {
1389 |       display: flex;
1390 |       position: absolute;
1391 |       width: auto;
1392 |       height: 20px;
1393 |       transition: all 0.4s ease;
1394 |     }
1395 |     .loader-23 .loading .loader {
1396 |       display: block;
1397 |       align-items: flex-end;
1398 |       background-color: #ffffff;
1399 |       width: 5px;
1400 |       height: 5px;
1401 |       position: absolute;
1402 |       animation: loader 1.2s ease infinite both;
1403 |       border-radius: 4px;
1404 |       bottom: 0;
1405 |     }
1406 |     .loader-23 .loading .loader:nth-child(1) {
1407 |       transform: translateX(-20px);
1408 |     }
1409 |     .loader-23 .loading .loader:nth-child(2) {
1410 |       animation-delay: 0.4s;
1411 |     }
1412 |     .loader-23 .loading .loader:nth-child(3) {
1413 |       animation-delay: 0.8s;
1414 |       transform: translateX(20px);
1415 |     }
1416 |     @keyframes loader {
1417 |       0% {
1418 |         height: 5px;
1419 |         bottom: 0;
1420 |         opacity: 1;
1421 |       }
1422 |       25% {
1423 |         opacity: 0.3;
1424 |         bottom: 0;
1425 |         height: 15px;
1426 |       }
1427 |       50% {
1428 |         opacity: 1;
1429 |         height: 5px;
1430 |         bottom: calc(100% - 5px);
1431 |       }
1432 |       75% {
1433 |         opacity: 0.3;
1434 |         height: 15px;
1435 |         bottom: 0;
1436 |       }
1437 |       100% {
1438 |         opacity: 1;
1439 |         height: 5px;
1440 |         bottom: 0;
1441 |       }
1442 |     }
1443 |     `,
1444 |   },
1445 |   {
1446 |     id: 24,
1447 |     code: `
1448 |     ###HTML
1449 |     <div class="loader-24"></div>
1450 | 
1451 | 
1452 |     ###CSS
1453 |     .loader-24 {
1454 |         width: 48px;
1455 |         height: 48px;
1456 |         border: 3px solid rgba(255, 255, 255, 0.4);
1457 |         border-radius: 50%;
1458 |         display: inline-block;
1459 |         position: relative;
1460 |         box-sizing: border-box;
1461 |         animation: rotation-24 1s linear infinite;
1462 |     }
1463 |     .loader-24::after {
1464 |         content: '';
1465 |         box-sizing: border-box;
1466 |         position: absolute;
1467 |         left: 0;
1468 |         top: 0;
1469 |         background: #ffffff;
1470 |         width: 16px;
1471 |         height: 16px;
1472 |         transform: translate(-50%, 50%);
1473 |         border-radius: 50%;
1474 |     }
1475 |     @keyframes rotation-24 {
1476 |         0% { transform: rotate(0deg); }
1477 |         100% { transform: rotate(360deg); }
1478 |     }
1479 |     `,
1480 |   },
1481 |   {
1482 |     id: 25,
1483 |     code: `
1484 |     ##HTML
1485 |     <div class="loader-25"></div>
1486 | 
1487 |     ###CSS
1488 |     .loader-25 {
1489 |         width: 48px;
1490 |         height: 48px;
1491 |         border: 5px solid #FFF;
1492 |         border-radius: 50%;
1493 |         display: inline-block;
1494 |         box-sizing: border-box;
1495 |         position: relative;
1496 |         animation: pulse-25 1s linear infinite;
1497 |     }
1498 |     .loader-25:after {
1499 |         content: '';
1500 |         position: absolute;
1501 |         width: 48px;
1502 |         height: 48px;
1503 |         border: 5px solid #FFF;
1504 |         border-radius: 50%;
1505 |         display: inline-block;
1506 |         box-sizing: border-box;
1507 |         left: 50%;
1508 |         top: 50%;
1509 |         transform: translate(-50%, -50%);
1510 |         animation: scaleUp-25 1s linear infinite;
1511 |     }
1512 |     @keyframes scaleUp-25 {
1513 |         0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
1514 |         60% , 100% { transform: translate(-50%, -50%)  scale(1); opacity: 1;}
1515 |     }
1516 |     @keyframes pulse-25 {
1517 |         0% , 60% , 100%{ transform:  scale(1) }
1518 |         80% { transform:  scale(1.2)}
1519 |     }
1520 |     `,
1521 |   },
1522 |   {
1523 |     id: 26,
1524 |     code: `
1525 |     ###HTML
1526 |     <div class="loader-box">
1527 |     <div class="pixels">
1528 |       <span></span>
1529 |       <span></span>
1530 |       <span></span>
1531 |       <span></span>
1532 |       <span></span>
1533 |       <span></span>
1534 |       <span></span>
1535 |     </div>
1536 |     <a href="#demo-modal" id="25" class="show-code-btn">Show Code</a>
1537 |   </div>
1538 | 
1539 | 
1540 |     ###CSS
1541 | .pixels span {
1542 |   display: inline-block;
1543 |   vertical-align: middle;
1544 |   width: .6em;
1545 |   height: .6em;
1546 |   margin: .19em;
1547 |   background: #007DB6;
1548 |   border-radius: .6em;
1549 |   animation: loading 1s infinite alternate;
1550 | }
1551 | 
1552 | .pixels span:nth-of-type(2) {
1553 |   background: #008FB2;
1554 |   animation-delay: 0.2s;
1555 | }
1556 | .pixels span:nth-of-type(3) {
1557 |   background: #009B9E;
1558 |   animation-delay: 0.4s;
1559 | }
1560 | .pixels span:nth-of-type(4) {
1561 |   background: #00A77D;
1562 |   animation-delay: 0.6s;
1563 | }
1564 | .pixels span:nth-of-type(5) {
1565 |   background: #00B247;
1566 |   animation-delay: 0.8s;
1567 | }
1568 | .pixels span:nth-of-type(6) {
1569 |   background: #5AB027;
1570 |   animation-delay: 1.0s;
1571 | }
1572 | .pixels span:nth-of-type(7) {
1573 |   background: #A0B61E;
1574 |   animation-delay: 1.2s;
1575 | }
1576 | @keyframes loading {
1577 |   0% {
1578 |     opacity: 0;
1579 |   }
1580 |   100% {
1581 |     opacity: 1;
1582 |   }
1583 | }
1584 |   `,
1585 |   },
1586 | 
1587 |   {
1588 |     id: 27,
1589 |     code: `
1590 |         /* loader-27 */
1591 |         ##HTML
1592 |         <div class="loader-27">
1593 |         <div class="lds-spinner">
1594 |           <div></div>
1595 |           <div></div>
1596 |           <div></div>
1597 |           <div></div>
1598 |           <div></div>
1599 |           <div></div>
1600 |           <div></div>
1601 |           <div></div>
1602 |           <div></div>
1603 |           <div></div>
1604 |           <div></div>
1605 |           <div></div>
1606 |         </div>
1607 |       </div>
1608 | 
1609 |         ##CSS
1610 |         .lds-spinner {
1611 |           color: official;
1612 |           display: inline-block;
1613 |           position: relative;
1614 |           width: 80px;
1615 |           height: 80px;
1616 |         }
1617 |         .lds-spinner div {
1618 |           transform-origin: 40px 40px;
1619 |           animation: lds-spinner 1.2s linear infinite;
1620 |         }
1621 |         .lds-spinner div:after {
1622 |           content: " ";
1623 |           display: block;
1624 |           position: absolute;
1625 |           top: 3px;
1626 |           left: 37px;
1627 |           width: 6px;
1628 |           height: 18px;
1629 |           border-radius: 20%;
1630 |           background: #fff;
1631 |         }
1632 |         .lds-spinner div:nth-child(1) {
1633 |           transform: rotate(0deg);
1634 |           animation-delay: -1.1s;
1635 |         }
1636 |         .lds-spinner div:nth-child(2) {
1637 |           transform: rotate(30deg);
1638 |           animation-delay: -1s;
1639 |         }
1640 |         .lds-spinner div:nth-child(3) {
1641 |           transform: rotate(60deg);
1642 |           animation-delay: -0.9s;
1643 |         }
1644 |         .lds-spinner div:nth-child(4) {
1645 |           transform: rotate(90deg);
1646 |           animation-delay: -0.8s;
1647 |         }
1648 |         .lds-spinner div:nth-child(5) {
1649 |           transform: rotate(120deg);
1650 |           animation-delay: -0.7s;
1651 |         }
1652 |         .lds-spinner div:nth-child(6) {
1653 |           transform: rotate(150deg);
1654 |           animation-delay: -0.6s;
1655 |         }
1656 |         .lds-spinner div:nth-child(7) {
1657 |           transform: rotate(180deg);
1658 |           animation-delay: -0.5s;
1659 |         }
1660 |         .lds-spinner div:nth-child(8) {
1661 |           transform: rotate(210deg);
1662 |           animation-delay: -0.4s;
1663 |         }
1664 |         .lds-spinner div:nth-child(9) {
1665 |           transform: rotate(240deg);
1666 |           animation-delay: -0.3s;
1667 |         }
1668 |         .lds-spinner div:nth-child(10) {
1669 |           transform: rotate(270deg);
1670 |           animation-delay: -0.2s;
1671 |         }
1672 |         .lds-spinner div:nth-child(11) {
1673 |           transform: rotate(300deg);
1674 |           animation-delay: -0.1s;
1675 |         }
1676 |         .lds-spinner div:nth-child(12) {
1677 |           transform: rotate(330deg);
1678 |           animation-delay: 0s;
1679 |         }
1680 |         @keyframes lds-spinner {
1681 |           0% {
1682 |             opacity: 1;
1683 |           }
1684 |           100% {
1685 |             opacity: 0;
1686 |           }
1687 |         }
1688 | 
1689 |         `,
1690 |   },
1691 | 
1692 |   {
1693 |     id: 28,
1694 |     code: `
1695 |     ##HTML
1696 |     <div class="loader-28">
1697 |       <div class="lds-spinner">
1698 |       </div>
1699 |     </div>
1700 | 
1701 |     ##CSS
1702 |     .loader-28 {
1703 |       width: 48px;
1704 |       height: 48px;
1705 |       border: 2px solid #FFF;
1706 |       border-radius: 50%;
1707 |       display: inline-block;
1708 |       position: relative;
1709 |       box-sizing: border-box;
1710 |       animation: rotation 1s linear infinite;
1711 |     }
1712 |     .loader-28::after,
1713 |     .loader-28::before {
1714 |       content: '';
1715 |       box-sizing: border-box;
1716 |       position: absolute;
1717 |       left: 0;
1718 |       top: 0;
1719 |       background: #d0ff00;
1720 |       width: 6px;
1721 |       height: 6px;
1722 |       border-radius: 50%;
1723 |     }
1724 |     .loader-28::before {
1725 |       left: auto;
1726 |       top: auto;
1727 |       right: 0;
1728 |       bottom: 0;
1729 |     }
1730 | 
1731 |     @keyframes rotation {
1732 |       0% {
1733 |         transform: rotate(0deg);
1734 |       }
1735 |       100% {
1736 |         transform: rotate(360deg);
1737 |       }
1738 |     }
1739 | 
1740 |         `,
1741 |   },
1742 |   {
1743 |     id: 29,
1744 |     code: `
1745 |         ##HTML
1746 |         <div class="loader-29">
1747 |                     <div class="wave"></div>
1748 |                     <div class="wave"></div>
1749 |                     <div class="wave"></div>
1750 |                     <div class="wave"></div>
1751 |                     <div class="wave"></div>
1752 |                     <div class="wave"></div>
1753 |                     <div class="wave"></div>
1754 |                     <div class="wave"></div>
1755 |                     <div class="wave"></div>
1756 |                     <div class="wave"></div>
1757 |                   </div>
1758 | 
1759 |         ##CSS
1760 |         .loader-29 {
1761 |           height: 90vh;
1762 |           display: flex;
1763 |           justify-content: center;
1764 |           align-items: center;
1765 |           background: rgba(0, 0, 0, 0);
1766 |         }
1767 |         .wave {
1768 |           width: 5px;
1769 |           height: 90px;
1770 |           background: linear-gradient(45deg, rgb(0, 190, 211), rgb(0, 0, 0));
1771 |           margin: 10px;
1772 |           animation: wave 1s linear infinite;
1773 |           border-radius: 20px;
1774 |         }
1775 |         .wave:nth-child(2) {
1776 |           animation-delay: 0.1s;
1777 |         }
1778 |         .wave:nth-child(3) {
1779 |           animation-delay: 0.2s;
1780 |         }
1781 |         .wave:nth-child(4) {
1782 |           animation-delay: 0.3s;
1783 |         }
1784 |         .wave:nth-child(5) {
1785 |           animation-delay: 0.4s;
1786 |         }
1787 |         .wave:nth-child(6) {
1788 |           animation-delay: 0.5s;
1789 |         }
1790 |         .wave:nth-child(7) {
1791 |           animation-delay: 0.6s;
1792 |         }
1793 |         .wave:nth-child(8) {
1794 |           animation-delay: 0.7s;
1795 |         }
1796 |         .wave:nth-child(9) {
1797 |           animation-delay: 0.8s;
1798 |         }
1799 |         .wave:nth-child(10) {
1800 |           animation-delay: 0.9s;
1801 |         }
1802 | 
1803 |         @keyframes wave {
1804 |           0% {
1805 |             transform: scale(0);
1806 |           }
1807 |           50% {
1808 |             transform: scale(1);
1809 |           }
1810 |           100% {
1811 |             transform: scale(0);
1812 |           }
1813 |         }
1814 | 
1815 |             `,
1816 |   },
1817 |   {
1818 |     id: 30,
1819 |     code: `
1820 |        ##HTML
1821 |        <div class="loader-box">
1822 |         <div class="loader-30">
1823 |           <div class="color"></div>
1824 |         </div>
1825 | 
1826 |         <a href="#demo-modal" id="30" class="show-code-btn">Show Code</a>
1827 |       </div>
1828 | 
1829 |       ##CSS
1830 |       .loader-30{
1831 |         position: relative;
1832 |         height: 10px;
1833 |         display: flex;
1834 |         justify-content: center;
1835 |         align-items: center;
1836 |         width: 50%;
1837 |         border: 10px solid lightblue;
1838 |         border-radius: 15px;
1839 |     }
1840 |     .loader-30 .color{
1841 |         position: absolute;
1842 |         background-color: whitesmoke;
1843 |         width: 0px;
1844 |         height: 10px;
1845 |         border-radius: 15px;
1846 |         animation: progres 4s infinite linear;
1847 |     }
1848 |     @keyframes progres{
1849 |         0%{
1850 |           width: 0%;
1851 |         }
1852 |         25%{
1853 |             width: 50%;
1854 |         }
1855 |         50%{
1856 |             width: 75%;
1857 |         }
1858 |         75%{
1859 |             width: 85%;
1860 |         }
1861 |         100%{
1862 |             width: 100%;
1863 |         }
1864 |     };
1865 | 
1866 |             `,
1867 |   },
1868 |   {
1869 |     id: 31,
1870 |     code: `
1871 |        ##HTML
1872 |        <div class="loader-box">
1873 |        <div class="loader-31">
1874 |          <div class="loader31">
1875 |            <div class="loader__bar bar"></div>
1876 |            <div class="loader__bar bar"></div>
1877 |            <div class="loader__bar bar"></div>
1878 |            <div class="loader__bar bar"></div>
1879 |            <div class="loader__bar bar"></div>
1880 |            <div class="loader__ball"></div>
1881 |          </div>
1882 |        </div>
1883 |        <a href="#demo-modal" id="31" class="show-code-btn">Show Code</a>
1884 |      </div>
1885 | 
1886 |       ##CSS
1887 |       .loader-31 {
1888 |         height: 100%;
1889 |         display: flex;
1890 |         align-items: center;
1891 |         justify-content: center;
1892 |       }
1893 |       .loader31 {
1894 |         position: relative;
1895 |         width: 75px;
1896 |         height: 100px;
1897 |       }
1898 |       .loader31 .bar {
1899 |         position: absolute;
1900 |         bottom: 0;
1901 |         width: 10px;
1902 |         height: 50%;
1903 |         background: #fff;
1904 |         transform-origin: center bottom;
1905 |         box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
1906 |       }
1907 |       .loader31 .bar:nth-child(1) {
1908 |         left: 0px;
1909 |         transform: scale(1, 0.2);
1910 |         animation: barUp1 4s infinite;
1911 |       }
1912 |       .loader31 .bar:nth-child(2) {
1913 |         left: 15px;
1914 |         transform: scale(1, 0.4);
1915 |         animation: barUp2 4s infinite;
1916 |       }
1917 |       .loader31 .bar:nth-child(3) {
1918 |         left: 30px;
1919 |         transform: scale(1, 0.6);
1920 |         animation: barUp3 4s infinite;
1921 |       }
1922 |       .loader31 .bar:nth-child(4) {
1923 |         left: 45px;
1924 |         transform: scale(1, 0.8);
1925 |         animation: barUp4 4s infinite;
1926 |       }
1927 |       .loader31 .bar:nth-child(5) {
1928 |         left: 60px;
1929 |         transform: scale(1, 1);
1930 |         animation: barUp5 4s infinite;
1931 |       }
1932 |       .loader__ball {
1933 |         position: absolute;
1934 |         bottom: 10px;
1935 |         left: 0;
1936 |         width: 10px;
1937 |         height: 10px;
1938 |         background: #fff;
1939 |         border-radius: 50%;
1940 |         animation: ball 4s infinite;
1941 |       }
1942 |       @keyframes ball {
1943 |         0% {
1944 |           transform: translate(0, 0);
1945 |        }
1946 |         5% {
1947 |           transform: translate(8px, -14px);
1948 |        }
1949 |         10% {
1950 |           transform: translate(15px, -10px);
1951 |        }
1952 |         17% {
1953 |           transform: translate(23px, -24px);
1954 |        }
1955 |         20% {
1956 |           transform: translate(30px, -20px);
1957 |        }
1958 |         27% {
1959 |           transform: translate(38px, -34px);
1960 |        }
1961 |         30% {
1962 |           transform: translate(45px, -30px);
1963 |        }
1964 |         37% {
1965 |           transform: translate(53px, -44px);
1966 |        }
1967 |         40% {
1968 |           transform: translate(60px, -40px);
1969 |        }
1970 |         50% {
1971 |           transform: translate(60px, 0);
1972 |        }
1973 |         57% {
1974 |           transform: translate(53px, -14px);
1975 |        }
1976 |         60% {
1977 |           transform: translate(45px, -10px);
1978 |        }
1979 |         67% {
1980 |           transform: translate(37px, -24px);
1981 |        }
1982 |         70% {
1983 |           transform: translate(30px, -20px);
1984 |        }
1985 |         77% {
1986 |           transform: translate(22px, -34px);
1987 |        }
1988 |         80% {
1989 |           transform: translate(15px, -30px);
1990 |        }
1991 |         87% {
1992 |           transform: translate(7px, -44px);
1993 |        }
1994 |         90% {
1995 |           transform: translate(0, -40px);
1996 |        }
1997 |         100% {
1998 |           transform: translate(0, 0);
1999 |        }
2000 |       }
2001 |       @keyframes barUp1 {
2002 |         0% {
2003 |           transform: scale(1, 0.2);
2004 |        }
2005 |         40% {
2006 |           transform: scale(1, 0.2);
2007 |        }
2008 |         50% {
2009 |           transform: scale(1, 1);
2010 |        }
2011 |         90% {
2012 |           transform: scale(1, 1);
2013 |        }
2014 |         100% {
2015 |           transform: scale(1, 0.2);
2016 |        }
2017 |       }
2018 |       @keyframes barUp2 {
2019 |         0% {
2020 |           transform: scale(1, 0.4);
2021 |        }
2022 |         40% {
2023 |           transform: scale(1, 0.4);
2024 |        }
2025 |         50% {
2026 |           transform: scale(1, 0.8);
2027 |        }
2028 |         90% {
2029 |           transform: scale(1, 0.8);
2030 |        }
2031 |         100% {
2032 |           transform: scale(1, 0.4);
2033 |        }
2034 |       }
2035 |       @keyframes barUp3 {
2036 |         0% {
2037 |           transform: scale(1, 0.6);
2038 |        }
2039 |         100% {
2040 |           transform: scale(1, 0.6);
2041 |        }
2042 |       }
2043 |       @keyframes barUp4 {
2044 |         0% {
2045 |           transform: scale(1, 0.8);
2046 |        }
2047 |         40% {
2048 |           transform: scale(1, 0.8);
2049 |        }
2050 |         50% {
2051 |           transform: scale(1, 0.4);
2052 |        }
2053 |         90% {
2054 |           transform: scale(1, 0.4);
2055 |        }
2056 |         100% {
2057 |           transform: scale(1, 0.8);
2058 |        }
2059 |       }
2060 |       @keyframes barUp5 {
2061 |         0% {
2062 |           transform: scale(1, 1);
2063 |        }
2064 |         40% {
2065 |           transform: scale(1, 1);
2066 |        }
2067 |         50% {
2068 |           transform: scale(1, 0.2);
2069 |        }
2070 |         90% {
2071 |           transform: scale(1, 0.2);
2072 |        }
2073 |         100% {
2074 |           transform: scale(1, 1);
2075 |        }
2076 |       };
2077 | 
2078 |             `,
2079 |   },
2080 | 
2081 |   {
2082 |     id: 32,
2083 |     code: `
2084 |    ##HTML
2085 | 
2086 |    <div class="loader-32">
2087 |      <div class="loader32 loadern"></div>
2088 |    </div>
2089 | 
2090 |   ##CSS
2091 |   .loader32 {
2092 |     display: inline-block;
2093 |     vertical-align: middle;
2094 |     position: relative;
2095 |     margin: 10px;
2096 |   }
2097 | 
2098 |   @keyframes loadern-bubbles {
2099 |     0% {
2100 |       box-shadow: 0 -10px #efdfff,
2101 |                   3px 0 #efdfff,
2102 |                   5px 0 #efdfff;
2103 |     }
2104 |     30% {
2105 |       box-shadow: 3px -20px rgba(239,223,255,0),
2106 |                   5px -10px #efdfff,
2107 |                   5px 0 #efdfff;
2108 |     }
2109 |     60% {
2110 |       box-shadow: 3px 0 rgba(239,223,255,0),
2111 |                   4px -20px rgba(239,223,255,0),
2112 |                   3px -10px #efdfff;
2113 |     }
2114 |     61% {
2115 |       box-shadow: 3px 0 #efdfff,
2116 |                   4px -20px rgba(239,223,255,0),
2117 |                   3px -10px #efdfff;
2118 |     }
2119 |     100% {
2120 |       box-shadow: 0 -10px #efdfff,
2121 |                   4px -20px rgba(239,223,255,0),
2122 |                   5px -20px rgba(239,223,255,0);
2123 |     }
2124 |   }
2125 |   .loadern {
2126 |     width: 10px;
2127 |     height: 20px;
2128 |     margin-left: 20px;
2129 |     margin-right: 20px;
2130 |     background: #efdfff;
2131 |   }
2132 |   .loadern:before,
2133 |   .loadern:after {
2134 |     content: '';
2135 |     position: absolute;
2136 |   }
2137 |   .loadern:before {
2138 |     top: -8px;
2139 |     left: -13px;
2140 |     width: 0;
2141 |     height: 0;
2142 |     border: 18px solid transparent;
2143 |     border-bottom: 20px solid #efdfff;
2144 |     border-radius: 3px;
2145 |   }
2146 |   .loadern:after {
2147 |     top: 0;
2148 |     left: 0;
2149 |     width: 4px;
2150 |     height: 4px;
2151 |     background: #efdfff;
2152 |     border-radius: 50%;
2153 |     animation: loadern-bubbles 1s linear infinite forwards;
2154 |   }
2155 | 
2156 | 
2157 |         `,
2158 |   },
2159 |   {
2160 |     id: 33,
2161 |     code: `
2162 |    ##HTML
2163 | 
2164 |    <div class="loader-33">
2165 |    <div class="lds-heart"><div></div></div>
2166 |    </div>
2167 | 
2168 |   ##CSS
2169 |   .lds-heart {
2170 |     display: inline-block;
2171 |     position: relative;
2172 |     width: 80px;
2173 |     height: 80px;
2174 |     transform: rotate(45deg);
2175 |     transform-origin: 40px 40px;
2176 |   }
2177 |   .lds-heart div {
2178 |     top: 32px;
2179 |     left: 32px;
2180 |     position: absolute;
2181 |     width: 32px;
2182 |     height: 32px;
2183 |     background: #fff;
2184 |     animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
2185 |   }
2186 |   .lds-heart div:after,
2187 |   .lds-heart div:before {
2188 |     content: " ";
2189 |     position: absolute;
2190 |     display: block;
2191 |     width: 32px;
2192 |     height: 32px;
2193 |     background: #fff;
2194 |   }
2195 |   .lds-heart div:before {
2196 |     left: -24px;
2197 |     border-radius: 50% 0 0 50%;
2198 |   }
2199 |   .lds-heart div:after {
2200 |     top: -24px;
2201 |     border-radius: 50% 50% 0 0;
2202 |   }
2203 |   @keyframes lds-heart {
2204 |     0% {
2205 |       transform: scale(0.95);
2206 |     }
2207 |     5% {
2208 |       transform: scale(1.1);
2209 |     }
2210 |     39% {
2211 |       transform: scale(0.85);
2212 |     }
2213 |     45% {
2214 |       transform: scale(1);
2215 |     }
2216 |     60% {
2217 |       transform: scale(0.95);
2218 |     }
2219 |     100% {
2220 |       transform: scale(0.9);
2221 |     }
2222 |   }
2223 | 
2224 |         `,
2225 |   },
2226 |   {
2227 |     id: 34,
2228 |     code: `
2229 |     ##HTML Code
2230 |     <div class="loader-box">
2231 |       <div class="loader-34">
2232 |         <span class="loader34_circle_1"></span>
2233 |         <span class="loader34_circle_2"></span>
2234 |         <span class="loader34_circle_3"></span>
2235 |         <span class="loader34_circle_4"></span>
2236 |         <span class="loader34_circle_5"></span>
2237 |       </div>
2238 |       <a href="#demo-modal" id="34" class="show-code-btn">Show Code</a>
2239 |     </div>
2240 | 
2241 |     ##CSS Code
2242 |     .loader-34 span {
2243 |         display: inline-block;
2244 |         margin: 5px;
2245 |         height: 10px;
2246 |         width: 10px;
2247 |         border-radius: 50%;
2248 |         background-color: #eb0000;
2249 | 
2250 |         animation: oscillate 1.2s cubic-bezier(.8, .5, .2, 1.4) infinite ;
2251 |       }
2252 | 
2253 |       .loader34_circle_1{
2254 |         animation-delay: 0.1s !important;
2255 |       }
2256 | 
2257 |       .loader34_circle_2{
2258 |         animation-delay: 0.2s !important;
2259 |       }
2260 | 
2261 |       .loader34_circle_3{
2262 |         animation-delay: 0.3s !important;
2263 |       }
2264 | 
2265 |       .loader34_circle_4{
2266 |         animation-delay: 0.4s !important;
2267 |       }
2268 | 
2269 |       .loader34_circle_5{
2270 |         animation-delay: 0.5s !important;
2271 |       }
2272 | 
2273 |       @keyframes oscillate {
2274 |         0%{
2275 |           transform: translateY(0px);
2276 |           opacity: 1;
2277 |         }
2278 |         50%{
2279 |           transform: translateY(-30px);
2280 |           opacity: 0;
2281 |         }
2282 |         100%{
2283 |           transform: translateY(0px);
2284 |           opacity: 1;
2285 |         }
2286 |       }
2287 |     `,
2288 |   },
2289 |   {
2290 |     id: 35,
2291 |     code: `
2292 |     #Loader-35
2293 | 
2294 |     ##HTML
2295 | 
2296 |     <div class="loader35">
2297 |             <svg viewBox="0 0 100 100">
2298 |               <defs>
2299 |                 <filter id="shadow">
2300 |                   <feDropShadow dx="0" dy="0" stdDeviation="1.5"
2301 |                     flood-color="#fc6767"/>
2302 |                 </filter>
2303 |               </defs>
2304 |               <circle class="loader-35" style="fill:transparent;stroke:#ffffff;stroke-width: 7px;stroke-linecap: round;filter:url(#shadow);" cx="50" cy="50" r="45"/>
2305 |           </svg>
2306 |           </div>
2307 | 
2308 | 
2309 |     ##CSS
2310 | 
2311 |     .loader35{
2312 |       width: 80px;
2313 |       height: 80px;
2314 |     }
2315 |     .loader-35 {
2316 |       transform-origin: center;
2317 |       animation-name: animation;
2318 |       animation-duration: 1.2s;
2319 |       animation-timing-function: cubic-bezier;
2320 |       animation-iteration-count: infinite;
2321 |     }
2322 | 
2323 |     @keyframes animation {
2324 |       0% {
2325 |         stroke-dasharray: 1 98;
2326 |         stroke-dashoffset: -105;
2327 |       }
2328 |       50% {
2329 |         stroke-dasharray: 80 10;
2330 |         stroke-dashoffset: -160;
2331 |       }
2332 |       100% {
2333 |         stroke-dasharray: 1 98;
2334 |         stroke-dashoffset: -300;
2335 |       }
2336 |     }
2337 |     `,
2338 |   },
2339 | 
2340 |   {
2341 |     id: 36,
2342 |     code: `
2343 |     #Loader-36
2344 | 
2345 |     ##HTML
2346 | 
2347 |     <div class="loader-36">
2348 |         <div class="signal">
2349 |           <div></div>
2350 |         </div>
2351 |       </div>
2352 | 
2353 | 
2354 |     ##CSS
2355 | 
2356 |     .signal {
2357 |       width: 40px;
2358 |       height: 40px;
2359 |       background-color: #333;
2360 | 
2361 |       border-radius: 100%;
2362 |       -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
2363 |       animation: sk-scaleout 1.0s infinite ease-in-out;
2364 |     }
2365 | 
2366 |     @-webkit-keyframes sk-scaleout {
2367 |       0% {
2368 |         -webkit-transform: scale(0)
2369 |       }
2370 | 
2371 |       100% {
2372 |         -webkit-transform: scale(1.0);
2373 |         opacity: 0;
2374 |       }
2375 |     }
2376 | 
2377 |     @keyframes sk-scaleout {
2378 |       0% {
2379 |         -webkit-transform: scale(0);
2380 |         transform: scale(0);
2381 |       }
2382 | 
2383 |       100% {
2384 |         -webkit-transform: scale(1.0);
2385 |         transform: scale(1.0);
2386 |         opacity: 0;
2387 |       }
2388 |     }
2389 |     `,
2390 |   },
2391 |   {
2392 |     id: 37,
2393 |     code: `
2394 |     ##HTML Code
2395 | 
2396 |     <div class="loader-37">
2397 |       <div class="loader loader37"></div>
2398 |     </div>
2399 | 
2400 | 
2401 |     ##CSS Code
2402 | 
2403 |     @keyframes loader37 {
2404 |       from {
2405 |         transform: rotate(0);
2406 |       }
2407 |       to {
2408 |         transform: rotate(360deg);
2409 |       }
2410 |     }
2411 |     @keyframes loader37-part {
2412 |       from {
2413 |         transform: translate(0);
2414 |       }
2415 |       25% {
2416 |         transform: translate(5px);
2417 |         animation-timing-function: cubic-bezier(1, 0, 0.51, 1.58);
2418 |       }
2419 |       50% {
2420 |         transform: translate(10px) scale(1.6);
2421 |         animation-timing-function: ease-in;
2422 |       }
2423 |       75% {
2424 |         transform: translate(5px);
2425 |       }
2426 |     }
2427 |     @keyframes loader37-part2 {
2428 |       from {
2429 |         transform: translate(20px);
2430 |       }
2431 |       25% {
2432 |         transform: translate(15px);
2433 |         animation-timing-function: cubic-bezier(1, 0, 0.51, 1.58);
2434 |       }
2435 |       50% {
2436 |         transform: translate(10px) scale(1.6);
2437 |         animation-timing-function: ease-in;
2438 |       }
2439 |       75% {
2440 |         transform: translate(15px);
2441 |       }
2442 |     }
2443 |     .loader37 {
2444 |       height: 20px;
2445 |       width: 30px;
2446 |       animation: loader37 2s linear infinite;
2447 |     }
2448 |     .loader37:before,
2449 |     .loader37:after {
2450 |       content: "";
2451 |       position: absolute;
2452 |       top: 0;
2453 |       bottom: 0;
2454 |       margin: auto;
2455 |       width: 10px;
2456 |       height: 10px;
2457 |       border-radius: 5px;
2458 |       background: #efdfff;
2459 |       transform-origin: 50% 50%;
2460 |     }
2461 |     .loader37:before {
2462 |       transform: translate(0);
2463 |       animation: loader37-part 1.5s linear infinite;
2464 |     }
2465 |     .loader37:after {
2466 |       transform: translate(20px);
2467 |       animation: loader37-part2 1.5s linear infinite;
2468 |     }
2469 | 
2470 |     `,
2471 |   },
2472 |   {
2473 |     id: 38,
2474 |     code: `
2475 |     #HTML
2476 |     <div class="loader38"></div>
2477 | 
2478 |     #CSS
2479 |     .loader38 {
2480 |       color: #ffffff;
2481 |       font-size: 30px;
2482 |       overflow: hidden;
2483 |       width: 1em;
2484 |       height: 1em;
2485 |       border-radius: 50%;
2486 |       margin: 72px auto;
2487 |       position: relative;
2488 |       -webkit-transform: translateZ(0);
2489 |       -ms-transform: translateZ(0);
2490 |       transform: translateZ(0);
2491 |       -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
2492 |       animation: load6 1.7s infinite ease, round 1.7s infinite ease;
2493 |     }
2494 |     @-webkit-keyframes load6 {
2495 |       0% {
2496 |         box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2497 |       }
2498 |       5%,
2499 |       95% {
2500 |         box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2501 |       }
2502 |       10%,
2503 |       59% {
2504 |         box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
2505 |       }
2506 |       20% {
2507 |         box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
2508 |       }
2509 |       38% {
2510 |         box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
2511 |       }
2512 |       100% {
2513 |         box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2514 |       }
2515 |     }
2516 |     @keyframes load6 {
2517 |       0% {
2518 |         box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2519 |       }
2520 |       5%,
2521 |       95% {
2522 |         box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2523 |       }
2524 |       10%,
2525 |       59% {
2526 |         box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
2527 |       }
2528 |       20% {
2529 |         box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
2530 |       }
2531 |       38% {
2532 |         box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
2533 |       }
2534 |       100% {
2535 |         box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2536 |       }
2537 |     }
2538 |     @-webkit-keyframes round {
2539 |       0% {
2540 |         -webkit-transform: rotate(0deg);
2541 |         transform: rotate(0deg);
2542 |       }
2543 |       100% {
2544 |         -webkit-transform: rotate(360deg);
2545 |         transform: rotate(360deg);
2546 |       }
2547 |     }
2548 |     @keyframes round {
2549 |       0% {
2550 |         -webkit-transform: rotate(0deg);
2551 |         transform: rotate(0deg);
2552 |       }
2553 |       100% {
2554 |         -webkit-transform: rotate(360deg);
2555 |         transform: rotate(360deg);
2556 |       }
2557 |     }
2558 |     `,
2559 |   },
2560 |   {
2561 |     id: 39,
2562 |     code: `##HTML
2563 |       <div class="loader-box">
2564 |     <span class="loader39"></span>
2565 |   <a href="#demo-modal" id="39" class="show-code-btn">Show Code</a>
2566 | </div>
2567 | 
2568 | ##CSS
2569 | .loader39{
2570 |   box-sizing: border-box;
2571 |   display: inline-block;
2572 |   width: 50px;
2573 |   height: 80px;
2574 |   border-top: 5px solid #fff;
2575 |   border-bottom: 5px solid #fff;
2576 |   position: relative;
2577 |   background: linear-gradient(#FF3D00 30px, transparent 0) no-repeat;
2578 |   background-size: 2px 40px;
2579 |   background-position: 50% 0px;
2580 |   animation: spinx 5s linear infinite;
2581 | }
2582 | .loader39:before, .loader39:after {
2583 |   content: "";
2584 |   width: 40px;
2585 |   left: 50%;
2586 |   height: 35px;
2587 |   position: absolute;
2588 |   top: 0;
2589 |   transform: translatex(-50%);
2590 |   background: rgba(255, 255, 255, 0.4);
2591 |   border-radius: 0 0 20px 20px;
2592 |   background-size: 100% auto;
2593 |   background-repeat: no-repeat;
2594 |   background-position: 0 0px;
2595 |   animation: lqt 5s linear infinite;
2596 | }
2597 | .loader39:after {
2598 |   top: auto;
2599 |   bottom: 0;
2600 |   border-radius: 20px 20px 0 0;
2601 |   animation: lqb 5s linear infinite;
2602 | }
2603 | @keyframes lqt {
2604 |   0%, 100% {
2605 |     background-image: linear-gradient(#FF3D00 40px, transparent 0);
2606 |     background-position: 0% 0px;
2607 |   }
2608 |   50% {
2609 |     background-image: linear-gradient(#FF3D00 40px, transparent 0);
2610 |     background-position: 0% 40px;
2611 |   }
2612 |   50.1% {
2613 |     background-image: linear-gradient(#FF3D00 40px, transparent 0);
2614 |     background-position: 0% -40px;
2615 |   }
2616 | }
2617 | @keyframes lqb {
2618 |   0% {
2619 |     background-image: linear-gradient(#FF3D00 40px, transparent 0);
2620 |     background-position: 0 40px;
2621 |   }
2622 |   100% {
2623 |     background-image: linear-gradient(#FF3D00 40px, transparent 0);
2624 |     background-position: 0 -40px;
2625 |   }
2626 | }
2627 | @keyframes spinx {
2628 |   0%, 49% {
2629 |     transform: rotate(0deg);
2630 |     background-position: 50% 36px;
2631 |   }
2632 |   51%, 98% {
2633 |     transform: rotate(180deg);
2634 |     background-position: 50% 4px;
2635 |   }
2636 |   100% {
2637 |     transform: rotate(360deg);
2638 |     background-position: 50% 36px;
2639 |   }
2640 | } `,
2641 |   },
2642 |   {
2643 |     id: 40,
2644 |     code: `
2645 |     ##HTML
2646 | 
2647 |     <div class="loader40">
2648 |             <span></span>
2649 |             <span></span>
2650 |             <span></span>
2651 |             <span></span>
2652 |             <span></span>
2653 |           </div>
2654 | 
2655 | 
2656 |     ##CSS
2657 | 
2658 | .loader40 {
2659 |   text-align: center;
2660 |   vertical-align: middle;
2661 |   width: 80px;
2662 |   height: 80px;
2663 |   position: relative;
2664 |   display: flex;
2665 |   background: white;
2666 |   border-radius: 10%;
2667 |   box-shadow: 0px 40px 60px -20px rgba(0, 0, 0, 0.2);
2668 | }
2669 | 
2670 | .loader40 span{
2671 |   display: block;
2672 |   width: 20px;
2673 |   height: 20px;
2674 |   background: #eee;
2675 |   border-radius: 50%;
2676 |   margin: 0 5px;
2677 |   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
2678 | }
2679 | 
2680 | .loader40 span:nth-child(2) {
2681 |   background: #f07e6e;
2682 | }
2683 | 
2684 | .loader40 span:nth-child(3) {
2685 |   background: #84cdfa;
2686 | }
2687 | 
2688 | .loader40 span:nth-child(4) {
2689 |   background: #5ad1cd;
2690 | }
2691 | 
2692 | .loader40 span:not(:last-child) {
2693 |   animation: animate 1.5s linear infinite;
2694 | }
2695 | 
2696 | @keyframes animate {
2697 |   0% {
2698 |     transform: translateX(0);
2699 |   }
2700 | 
2701 |   100% {
2702 |     transform: translateX(20px);
2703 |   }
2704 | }
2705 | 
2706 | .loader40 span:last-child {
2707 |   animation: jump 1.5s ease-in-out infinite;
2708 | }
2709 | 
2710 | @keyframes jump {
2711 |   0% {
2712 |     transform: translate(0, 0);
2713 |   }
2714 |   10% {
2715 |     transform: translate(5px, -5px);
2716 |   }
2717 |   20% {
2718 |     transform: translate(10px, 5px);
2719 |   }
2720 |   30% {
2721 |     transform: translate(15px, -25px);
2722 |   }
2723 |   70% {
2724 |     transform: translate(-75px, -25px);
2725 |   }
2726 |   80% {
2727 |     transform: translate(-70px, 5px);
2728 |   }
2729 |   90% {
2730 |     transform: translate(-65px, -5px);
2731 |   }
2732 |   100% {
2733 |     transform: translate(-60px, 0);
2734 |   }
2735 | }
2736 |     `,
2737 |   },
2738 |   {
2739 |     id: 41,
2740 |     code: `
2741 |       ##HTML
2742 |       <div class="loader41"></div>
2743 | 
2744 |       ##CSS
2745 |       .loader41{
2746 |         position: relative;
2747 |         width: 150px;
2748 |         height: 20px;
2749 |         background-color: rgba(255,255,255,0.2);
2750 |       }
2751 | 
2752 |       .loader41:before{
2753 |         content: "";
2754 |         position: absolute;
2755 |         background-color: #fff;
2756 |         top: 0px;
2757 |         left: 0px;
2758 |         height: 20px;
2759 |         width: 0px;
2760 |         z-index: 0;
2761 |         opacity: 1;
2762 |         -webkit-transform-origin:  100% 0%;
2763 |             transform-origin:  100% 0% ;
2764 |         -webkit-animation: loader41 10s ease-in-out infinite;
2765 |             animation: loader41 10s ease-in-out infinite;
2766 |       }
2767 | 
2768 |       .loader41:after{
2769 |         content: "LOADING ...";
2770 |         color: #fff;
2771 |         font-weight: 200;
2772 |         font-size: 16px;
2773 |         position: absolute;
2774 |         width: 100%;
2775 |         height: 20px;
2776 |         line-height: 20px;
2777 |         left: 0;
2778 |         top: 0;
2779 |       }
2780 | 
2781 |       @-webkit-keyframes loader41{
2782 |           0%{width: 0px;}
2783 |           70%{width: 100%; opacity: 1;}
2784 |           90%{opacity: 0; width: 100%;}
2785 |           100%{opacity: 0;width: 0px;}
2786 |       }
2787 | 
2788 |       @keyframes loader41{
2789 |           0%{width: 0px;}
2790 |           70%{width: 100%; opacity: 1;}
2791 |           90%{opacity: 0; width: 100%;}
2792 |           100%{opacity: 0;width: 0px;}
2793 |       }
2794 |     `,
2795 |   },
2796 |   {
2797 |     id: 42,
2798 |     code: `##HTML Code
2799 | 
2800 |     <div class="loader42"></div>
2801 | 
2802 | 
2803 |     ##CSS Code
2804 |     .loader42 {
2805 |       position: relative;
2806 |       width: 120px;
2807 |       height: 90px;
2808 |       margin: 0 auto;
2809 |     }
2810 |     .loader42:before {
2811 |       content: "";
2812 |       position: absolute;
2813 |       bottom: 30px;
2814 |       left: 51px;
2815 |       height: 25px;
2816 |       width: 25px;
2817 |       border-radius: 50%;
2818 |       background: #FF3D00;
2819 |       animation: loading-bounce 0.5s ease-in-out infinite alternate;
2820 |     }
2821 |     .loader42:after {
2822 |       content: "";
2823 |       position: absolute;
2824 |       right: 0;
2825 |       top: 0;
2826 |       height: 7px;
2827 |       width: 45px;
2828 |       border-radius: 4px;
2829 |       box-shadow: 0 5px 0 #fff, -35px 50px 0 #fff, -70px 95px 0 #fff;
2830 |       animation: loading-step 1s ease-in-out infinite;
2831 |     }
2832 | 
2833 |     @keyframes loading-bounce {
2834 |       0% { transform: scale(1, 0.7)}
2835 |       40% { transform: scale(0.8, 1.2)}
2836 |       60% { transform: scale(1, 1)}
2837 |       100% { bottom: 100px }
2838 |     }
2839 |     @keyframes loading-step {
2840 |       0% {
2841 |         box-shadow: 0 10px 0 rgba(0,0,0,0),
2842 |                     0 10px 0 #fff,
2843 |                   -35px 50px 0 #fff,
2844 |                   -70px 90px 0 #fff;
2845 |       }
2846 |       100% {
2847 |         box-shadow: 0 10px 0 #fff,
2848 |                   -35px 50px 0 #fff,
2849 |                   -70px 90px 0 #fff,
2850 |                   -70px 90px 0 rgba(0,0,0,0);
2851 |       }
2852 |     }`,
2853 |   },
2854 |   {
2855 |     id: 43,
2856 |     code: `
2857 |     ##HTML
2858 | 
2859 |       <div class="loader43"></div>
2860 | 
2861 |     ##CSS
2862 | 
2863 |     .loader43 {
2864 |       width:20px;
2865 |       height:20px;
2866 |       background:#24bd54;
2867 |       box-shadow:0 0 60px 15px #24bd54;
2868 |       transform: translate(-80px);
2869 |       clip-path:inset(0);
2870 |       animation:
2871 |         l43-1 0.5s ease-in-out infinite alternate,
2872 |         l43-2 1s   ease-in-out infinite;
2873 |     }
2874 | 
2875 |     @keyframes l43-1 {
2876 |       100% {transform:translateX(80px)}
2877 |     }
2878 | 
2879 |     @keyframes l43-2 {
2880 |        33% {clip-path:inset(0 0 0 -100px)}
2881 |        50% {clip-path:inset(0 0 0 0)     }
2882 |        83% {clip-path:inset(0 -100px 0 0)}
2883 |     }
2884 | 
2885 |     `,
2886 |   },
2887 |   {
2888 |     id: 44,
2889 |     code: `
2890 |     ##HTML
2891 | 
2892 |     <div class="loader44"></div>
2893 | 
2894 |     ##CSS
2895 | 
2896 |     .loader44 {
2897 |       width:120px;
2898 |       height:21px;
2899 |       background:
2900 |        linear-gradient(#000 0 0) left/10px 100% no-repeat
2901 |        #ddd;
2902 |       animation:l44 1s infinite cubic-bezier(0,0.2,1,1);
2903 |       position: relative;
2904 |     }
2905 |     .loader44:before,
2906 |     .loader44:after {
2907 |       content: "";
2908 |       position: absolute;
2909 |       left:0;
2910 |       right:0;
2911 |       height:7px;
2912 |       background:
2913 |         linear-gradient(#000 0 0) left/10px 100% no-repeat
2914 |         #ddd;
2915 |       animation: inherit;
2916 |     }
2917 |     .loader44:before {
2918 |       top:0;
2919 |       animation-timing-function: cubic-bezier(0,0,1,1);
2920 |     }
2921 |     .loader44:after {
2922 |       bottom:0;
2923 |       animation-timing-function: cubic-bezier(0,0.4,1,1);
2924 |     }
2925 |     @keyframes l44 {
2926 |         50% {background-position: right }
2927 |     }
2928 |     `,
2929 |   },
2930 | 
2931 |   {
2932 |     id: 45,
2933 |     code: `
2934 |     ##HTML
2935 | 
2936 |     <div class = "loader-45">
2937 |     <div class="hourglass2"></div>
2938 |     </div>
2939 | 
2940 |     ##CSS
2941 | 
2942 |     :root {
2943 |       --bg: #e3e4e8;
2944 |       --fg: #2e3138;
2945 |       --primary: #25dff4;
2946 | 
2947 |     }
2948 | 
2949 |     .hourglass2, .hourglass2:before, .hourglass2:after {
2950 |       animation-duration: 4s;
2951 |       animation-iteration-count: infinite;
2952 |     }
2953 |     .hourglass2 {
2954 |       --polygonH: polygon(0% 0%,100% 0%,100% 5.55%,95% 5.55%,95% 28%,60% 46%,60% 54%,95% 72%,95% 94.45%,100% 94.45%,100% 100%,0% 100%,0% 94.45%,5% 94.45%,5% 72%,40% 54%,40% 46%,5% 28%,5% 5.55%,0% 5.55%);
2955 |       animation-name: flip;
2956 |       animation-timing-function: ease-in-out;
2957 |       background-image: linear-gradient(var(--primary) 0.5em,#737a8c55 0.5em 8.5em,var(--primary) 8.5em);
2958 |       clip-path: var(--polygonH);
2959 |       -webkit-clip-path: var(--polygonH);
2960 |       overflow: hidden;
2961 |       position: relative;
2962 |       width: 5em;
2963 |       height: 9em;
2964 |       z-index: 0;
2965 |     }
2966 |     .hourglass2:before, .hourglass2:after {
2967 |       animation-timing-function: linear;
2968 |       content: "";
2969 |       display: block;
2970 |       position: absolute;
2971 |     }
2972 |     .hourglass2:before {
2973 |       --polygonB1: polygon(0% 0%,100% 0%,100% 24%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,0% 24%);
2974 |       --polygonB2: polygon(0% 4%,100% 4%,100% 24%,55% 45%,55% 100%,55% 100%,55% 100%,45% 100%,45% 100%,45% 100%,45% 45%,0% 24%);
2975 |       --polygonB3: polygon(0% 24%,100% 24%,100% 24%,55% 45%,55% 80%,100% 100%,100% 100%,0% 100%,0% 100%,45% 80%,45% 45%,0% 24%);
2976 |       --polygonB4: polygon(45% 45%,55% 45%,55% 45%,55% 45%,55% 58%,100% 76%,100% 100%,0% 100%,0% 76%,45% 58%,45% 45%,45% 45%);
2977 |       --polygonB5: polygon(50% 53%,50% 53%,50% 53%,50% 53%,50% 53%,100% 76%,100% 100%,0% 100%,0% 76%,50% 53%,50% 53%,50% 53%);
2978 |       animation-name: fill;
2979 |       background-color: var(--fg);
2980 |       background-size: 100% 3.6em;
2981 |       clip-path: var(--polygonB1);
2982 |       -webkit-clip-path: var(--polygonB1);
2983 |       top: 0.5em;
2984 |       left: 0.5em;
2985 |       width: 4em;
2986 |       height: 8em;
2987 |       z-index: 1;
2988 |     }
2989 |     .hourglass2:after {
2990 |       animation-name: glare;
2991 |       background:
2992 |           linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 0 / 100% 0.5em,
2993 |           linear-gradient(90deg,#0000 0.75em,#0003 0.75em 1.25em,#0000 1.25em 3.75em,#fff3 3.75em 4.25em,#fff0 4.25em 6.75em,#0003 6.75em 7.25em,#0000 7.25em) 0 0.5em / 100% 8em,
2994 |           linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 100% / 100% 0.5em;
2995 |       background-repeat: repeat-x;
2996 |       /* top: 0;
2997 |       left: -3em;
2998 |       width: 200%;
2999 |       height: 100%; */
3000 |       z-index: 2;
3001 |     }
3002 |     /* Animations */
3003 |     @keyframes fill {
3004 |       from {
3005 |           clip-path: var(--polygonB1);
3006 |           -webkit-clip-path: var(--polygonB1);
3007 |       }
3008 |       10% {
3009 |           clip-path: var(--polygonB2);
3010 |           -webkit-clip-path: var(--polygonB2);
3011 |       }
3012 |       45% {
3013 |           clip-path: var(--polygonB3);
3014 |           -webkit-clip-path: var(--polygonB3);
3015 |       }
3016 |       80% {
3017 |           clip-path: var(--polygonB4);
3018 |           -webkit-clip-path: var(--polygonB4);
3019 |       }
3020 |       85%, to {
3021 |           clip-path: var(--polygonB5);
3022 |           -webkit-clip-path: var(--polygonB5);
3023 |       }
3024 |     }
3025 |     @keyframes glare {
3026 |       from, 90% {
3027 |           transform: translateX(0);
3028 |       }
3029 |       to {
3030 |           transform: translateX(3em);
3031 |       }
3032 |     }
3033 |     @keyframes flip {
3034 |       from, 90% {
3035 |           transform: rotate(0);
3036 |       }
3037 |       to {
3038 |           transform: rotate(180deg);
3039 |       }
3040 |     }
3041 |     /* Dark mode */
3042 |     @media (prefers-color-scheme: dark) {
3043 |       :root {
3044 |           --bg: #17181c;
3045 |           --fg: #c7cad1;
3046 |       }
3047 |     }
3048 | 
3049 |     `,
3050 |   },
3051 |   {
3052 |     id: 46,
3053 |     code: `
3054 |         ##HTML Code
3055 | 
3056 |         <div class="loader-46">
3057 |           <div></div>
3058 |           <div></div>
3059 |           <div></div>
3060 |           <div></div>
3061 |         </div>
3062 | 
3063 |         ##CSS Code
3064 | 
3065 |         .loader-46, .loader-46 div {
3066 |           box-sizing: border-box;
3067 |         }
3068 |         
3069 |         .loader-46 {
3070 |           display: inline-block;
3071 |           position: relative;
3072 |           width: 80px;
3073 |           height: 80px;
3074 |         }
3075 |         
3076 |         .loader-46 div {
3077 |           position: absolute;
3078 |           top: 33.33333px;
3079 |           width: 13.33333px;
3080 |           height: 13.33333px;
3081 |           border-radius: 50%;
3082 |           background: white;
3083 |           animation-timing-function: cubic-bezier(0, 1, 1, 0);
3084 |         }
3085 |         
3086 |         .loader-46 div:nth-child(1) {
3087 |           left: 8px;
3088 |           animation: loader-461 0.6s infinite;
3089 |         }
3090 |         
3091 |         .loader-46 div:nth-child(2) {
3092 |           left: 8px;
3093 |           animation: loader-462 0.6s infinite;
3094 |         }
3095 |         
3096 |         .loader-46 div:nth-child(3) {
3097 |           left: 32px;
3098 |           animation: loader-462 0.6s infinite;
3099 |         }
3100 |         
3101 |         .loader-46 div:nth-child(4) {
3102 |           left: 56px;
3103 |           animation: loader-463 0.6s infinite;
3104 |         }
3105 |         
3106 |         @keyframes loader-461 {
3107 |           0% {
3108 |             transform: scale(0);
3109 |           }
3110 |           100% {
3111 |             transform: scale(1);
3112 |           }
3113 |         }
3114 |         
3115 |         @keyframes loader-463 {
3116 |           0% {
3117 |             transform: scale(1);
3118 |           }
3119 |           100% {
3120 |             transform: scale(0);
3121 |           }
3122 |         }
3123 |         
3124 |         @keyframes loader-462 {
3125 |           0% {
3126 |             transform: translate(0, 0);
3127 |           }
3128 |           100% {
3129 |             transform: translate(24px, 0);
3130 |           }
3131 |         }
3132 |         `,
3133 |   },
3134 |   {
3135 |     id: 47,
3136 |     code: `
3137 |     #HTML
3138 | 
3139 |     <div class="loader-47">
3140 |           <div></div>
3141 |         </div>
3142 | 
3143 |     #CSS
3144 |     .loader-47 {
3145 |       width: 50px;
3146 |       height: 50px;
3147 |       border: 5px solid #ffffff;
3148 |       animation: loader-47-rotate 2s infinite ease;
3149 |     }
3150 |     
3151 |     .loader-47 div {
3152 |       width: 100%;
3153 |       background-color: #ffffff;
3154 |       animation: loader-47-fill 2s infinite ease-in;
3155 |     }
3156 |     
3157 |     @keyframes loader-47-rotate {
3158 |       0% {
3159 |         transform: rotate(0deg);
3160 |       }
3161 |     
3162 |       25% {
3163 |         transform: rotate(180deg);
3164 |       }
3165 |     
3166 |       50% {
3167 |         transform: rotate(180deg);
3168 |       }
3169 |     
3170 |       75% {
3171 |         transform: rotate(360deg);
3172 |       }
3173 |     
3174 |       100% {
3175 |         transform: rotate(360deg);
3176 |       }
3177 |     }
3178 |     
3179 |     @keyframes loader-47-fill {
3180 |       0% {
3181 |         height: 0%;
3182 |       }
3183 |     
3184 |       25% {
3185 |         height: 0%;
3186 |       }
3187 |     
3188 |       50% {
3189 |         height: 100%;
3190 |       }
3191 |     
3192 |       75% {
3193 |         height: 100%;
3194 |       }
3195 |     
3196 |       100% {
3197 |         height: 0%;
3198 |       }
3199 |     }
3200 |     
3201 |     `,
3202 |   },
3203 |   {
3204 |     id: 48,
3205 |     code: `
3206 |     #HTML
3207 |       <div class="loader48">
3208 |       </div>
3209 |       
3210 |     #css
3211 |     .loader48 {
3212 |       display:inline-block;
3213 |         position: relative;
3214 |         width: 50px;
3215 |         height: 50px;
3216 |       -webkit-animation:loader48 1.5s linear infinite;
3217 |        animation:loader48 1.5s linear infinite;
3218 |     }
3219 |     .loader48:before,
3220 |     .loader48:after {
3221 |         position: absolute;
3222 |         content: "";
3223 |         left: 30px;
3224 |         top: 0;
3225 |         width: 30px;
3226 |         height: 50px;
3227 |         background: white;
3228 |         -moz-border-radius: 30px 30px 0 0;
3229 |         border-radius: 30px 30px 0 0;
3230 |         -webkit-transform: rotate(-45deg);
3231 |            -moz-transform: rotate(-45deg);
3232 |             -ms-transform: rotate(-45deg);
3233 |              -o-transform: rotate(-45deg);
3234 |                 transform: rotate(-45deg);
3235 |         -webkit-transform-origin: 0 100%;
3236 |            -moz-transform-origin: 0 100%;
3237 |             -ms-transform-origin: 0 100%;
3238 |              -o-transform-origin: 0 100%;
3239 |                 transform-origin: 0 100%;
3240 |     }
3241 |     .loader48:after {
3242 |         left: 0;
3243 |         -webkit-transform: rotate(45deg);
3244 |            -moz-transform: rotate(45deg);
3245 |             -ms-transform: rotate(45deg);
3246 |              -o-transform: rotate(45deg);
3247 |                 transform: rotate(45deg);
3248 |         -webkit-transform-origin: 100% 100%;
3249 |            -moz-transform-origin: 100% 100%;
3250 |             -ms-transform-origin: 100% 100%;
3251 |              -o-transform-origin: 100% 100%;
3252 |                 transform-origin :100% 100%;
3253 |     }
3254 |       
3255 |     @keyframes loader48 {
3256 |        0% {transform: scale(0, 0);opacity:0;}
3257 |        100% {transform: scale(1, 1);opacity:1;}
3258 |     }
3259 |     @-webkit-keyframes loader48 {
3260 |        0% {-webkit-transform: scale(0, 0);opacity:0;}
3261 |        100% {-webkit-transform: scale(1, 1);opacity:1;}
3262 |     }
3263 |     
3264 | 
3265 |     `,
3266 |   },
3267 |   {
3268 |     id: 49,
3269 |     code: `
3270 |     #HTML
3271 |     
3272 |       <div class="loader-49">
3273 |         <h3 class="loader-49-text" data-text="Loading...">Loading...</h3>
3274 |       </div>
3275 |       <a href="#demo-modal" id="49" class="show-code-btn">Show Code</a>
3276 | 
3277 |       
3278 |     #css
3279 |     .loader-49 {
3280 |       width: 120px;
3281 |       height: 100px;
3282 |       display: flex;
3283 |       justify-content: center;
3284 |       align-items: center;
3285 |     }
3286 |     
3287 |     .loader-49-text {
3288 |       position: relative;
3289 |       font-family: "Poppins", sans-serif;
3290 |       text-transform: uppercase;
3291 |       color: #222;
3292 |       border-bottom: 10px solid #222;
3293 |       letter-spacing: 0.05rem;
3294 |     }
3295 |     .loader-49-text::before {
3296 |       content: attr(data-text);
3297 |       position: absolute;
3298 |       top: 0;
3299 |       left: 0;
3300 |       width: 100%;
3301 |       color: #03a9f4;
3302 |       overflow: hidden;
3303 |       border-bottom: 10px solid #03a9f4;
3304 |       animation: loader-49-animate 10s linear infinite;
3305 |     }
3306 |     @keyframes loader-49-animate {
3307 |       0% {
3308 |         width: 0;
3309 |       }
3310 |       100% {
3311 |         width: 100%;
3312 |       }
3313 |     }
3314 |     `,
3315 |   },
3316 |   {
3317 |     id: 50,
3318 |     code: `
3319 |     ##HTML Code
3320 |     
3321 |     <div class="loader-50"></div>
3322 |    
3323 | 
3324 | 
3325 |     ##CSS Code
3326 |     .loader-50 {
3327 |       width:120px;
3328 |       height:20px;
3329 |       background: repeating-linear-gradient(90deg, white 0 calc(25% - 5px),transparent 0 25%) left/calc(4*100%/3) 100%;
3330 |       animation:i1 0.5s infinite linear;
3331 |     }
3332 |     @keyframes i1 {
3333 |         100% {background-position: right}
3334 |     }
3335 |     `,
3336 |   },
3337 |   {
3338 |     id: 51,
3339 |     code: `
3340 |     ##HTML Code
3341 |     
3342 |     <div class="loader-51">
3343 |       <span></span>
3344 |       <span></span>
3345 |       <span></span>
3346 |       <span></span>
3347 |       <span></span>
3348 |       <span></span>
3349 |       <span></span>
3350 |       <span></span>
3351 |       <span></span>
3352 |       <span></span>
3353 |       <span></span>
3354 |       <span></span>
3355 |       <span></span>
3356 |       <span></span>
3357 |       <span></span>
3358 |     </div>
3359 | 
3360 | 
3361 |     
3362 |    
3363 |     ##CSS Code
3364 |     .loader-51 {
3365 |       position: relative;
3366 |       width: 200px;
3367 |       height: 200px;
3368 |       transform-style: preserve-3d;
3369 |       transform: perspective(500px) rotateX(60deg);
3370 |     }
3371 |     .loader-51 > span {
3372 |       position: absolute;
3373 |       display: block;
3374 |       border: 2px solid #fff;
3375 |       box-sizing: border-box;
3376 |       border-radius: 50%;
3377 |       animation: animate-loader-51 3s ease-in-out infinite;
3378 |     }
3379 |     @keyframes animate-loader-51 {
3380 |       0%,
3381 |       100% {
3382 |         transform: translateZ(-50px);
3383 |       }
3384 |       50% {
3385 |         transform: translateZ(50px);
3386 |       }
3387 |     }
3388 |     .loader-51 > span:nth-child(1) {
3389 |       top: 0px;
3390 |       left: 0px;
3391 |       right: 0px;
3392 |       bottom: 0px;
3393 |       animation-delay: 1.44s;
3394 |     }
3395 |     .loader-51 > span:nth-child(2) {
3396 |       top: 6px;
3397 |       left: 6px;
3398 |       right: 6px;
3399 |       bottom: 6px;
3400 |       animation-delay: 1.3s;
3401 |     }
3402 |     .loader-51 > span:nth-child(3) {
3403 |       top: 12px;
3404 |       left: 12px;
3405 |       right: 12px;
3406 |       bottom: 12px;
3407 |       animation-delay: 1.2s;
3408 |     }
3409 |     .loader-51 > span:nth-child(4) {
3410 |       top: 18px;
3411 |       left: 18px;
3412 |       right: 18px;
3413 |       bottom: 18px;
3414 |       animation-delay: 1.1s;
3415 |     }
3416 |     .loader-51 > span:nth-child(5) {
3417 |       top: 24px;
3418 |       left: 24px;
3419 |       right: 24px;
3420 |       bottom: 24px;
3421 |       animation-delay: 1s;
3422 |     }
3423 |     .loader-51 > span:nth-child(6) {
3424 |       top: 30px;
3425 |       left: 30px;
3426 |       right: 30px;
3427 |       bottom: 30px;
3428 |       animation-delay: 0.9s;
3429 |     }
3430 |     .loader-51 > span:nth-child(7) {
3431 |       top: 36px;
3432 |       left: 36px;
3433 |       right: 36px;
3434 |       bottom: 36px;
3435 |       animation-delay: 0.8s;
3436 |     }
3437 |     .loader-51 > span:nth-child(8) {
3438 |       top: 42px;
3439 |       left: 42px;
3440 |       right: 42px;
3441 |       bottom: 42px;
3442 |       animation-delay: 0.7s;
3443 |     }
3444 |     .loader-51 > span:nth-child(9) {
3445 |       top: 48px;
3446 |       left: 48px;
3447 |       right: 48px;
3448 |       bottom: 48px;
3449 |       animation-delay: 0.6s;
3450 |     }
3451 |     .loader-51 > span:nth-child(10) {
3452 |       top: 54px;
3453 |       left: 54px;
3454 |       right: 54px;
3455 |       bottom: 54px;
3456 |       animation-delay: 0.5s;
3457 |     }
3458 |     .loader-51 > span:nth-child(11) {
3459 |       top: 60px;
3460 |       left: 60px;
3461 |       right: 60px;
3462 |       bottom: 60px;
3463 |       animation-delay: 0.4s;
3464 |     }
3465 |     .loader-51 > span:nth-child(12) {
3466 |       top: 66px;
3467 |       left: 66px;
3468 |       right: 66px;
3469 |       bottom: 66px;
3470 |       animation-delay: 0.3s;
3471 |     }
3472 |     .loader-51 > span:nth-child(13) {
3473 |       top: 72px;
3474 |       left: 72px;
3475 |       right: 72px;
3476 |       bottom: 72px;
3477 |       animation-delay: 0.2s;
3478 |     }
3479 |     .loader-51 > span:nth-child(14) {
3480 |       top: 78px;
3481 |       left: 78px;
3482 |       right: 78px;
3483 |       bottom: 78px;
3484 |       animation-delay: 0.1s;
3485 |     }
3486 |     .loader-51 > span:nth-child(15) {
3487 |       top: 84px;
3488 |       left: 84px;
3489 |       right: 84px;
3490 |       bottom: 84px;
3491 |       animation-delay: 0s;
3492 |     }
3493 |     `,
3494 |   },
3495 | ];
3496 | 


--------------------------------------------------------------------------------
/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rohit8020/css-loaders/7d0e5cc3cee6a4ea661216044d68952311a284c3/github.png


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
   1 | * {
   2 |   margin: 0;
   3 |   padding: 0;
   4 |   box-sizing: border-box;
   5 |   font-style: normal;
   6 |   font-family: monospace, sans-serif;
   7 | }
   8 | 
   9 | html {
  10 |   height: 100%;
  11 |   width: 100%;
  12 | }
  13 | 
  14 | body {
  15 |   background: rgb(122, 206, 255);
  16 | }
  17 | 
  18 | .container {
  19 |   width: 90%;
  20 |   margin: 20px auto;
  21 |   display: grid;
  22 |   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  23 |   grid-gap: 30px;
  24 |   padding-bottom: 10rem;
  25 | }
  26 | 
  27 | .loader-box {
  28 |   background-color: chocolate;
  29 |   height: 250px;
  30 |   display: flex;
  31 |   align-items: center;
  32 |   justify-content: center;
  33 |   flex-direction: column;
  34 | }
  35 | 
  36 | .show-code-btn {
  37 |   border: 2px solid rgb(56, 18, 0);
  38 |   margin: 20px;
  39 |   padding: 7px 14px;
  40 |   cursor: pointer;
  41 |   text-decoration: none;
  42 |   color: white;
  43 | }
  44 | 
  45 | .modal {
  46 |   visibility: hidden;
  47 |   opacity: 0;
  48 |   position: fixed;
  49 |   top: 0;
  50 |   right: 0;
  51 |   bottom: 0;
  52 |   left: 0;
  53 |   display: flex;
  54 |   align-items: center;
  55 |   justify-content: center;
  56 |   background: rgba(77, 77, 77, 0.7);
  57 |   transition: all 0.4s;
  58 |   z-index: 1000;
  59 | }
  60 | 
  61 | .modal:target {
  62 |   visibility: visible;
  63 |   opacity: 1;
  64 | }
  65 | 
  66 | .modal__content {
  67 |   border-radius: 4px;
  68 |   position: relative;
  69 |   width: 500px;
  70 |   height: 400px;
  71 |   overflow: scroll;
  72 |   max-width: 90%;
  73 |   background: #fff;
  74 |   padding: 1em 2em;
  75 | }
  76 | 
  77 | .modal__close {
  78 |   position: absolute;
  79 |   top: 10px;
  80 |   right: 10px;
  81 |   color: #585858;
  82 |   text-decoration: none;
  83 |   font-size: 2.2rem;
  84 | }
  85 | 
  86 | .show-code-btn:hover {
  87 |   transform: scale(1.05);
  88 |   transition: all 0.2s ease-in-out;
  89 | }
  90 | 
  91 | .main-heading {
  92 |   margin: 30px auto;
  93 |   text-align: center;
  94 |   color: #543a9e;
  95 | }
  96 | 
  97 | .main-area {
  98 |   margin: 10px auto;
  99 |   width: 80%;
 100 |   font-size: 1.3rem;
 101 |   font-weight: 900;
 102 |   text-align: center;
 103 |   color: #543a9e;
 104 | }
 105 | 
 106 | .main-area img {
 107 |   height: 30px;
 108 |   width: 30px;
 109 |   border-radius: 50%;
 110 |   background-color: grey;
 111 | }
 112 | 
 113 | footer {
 114 |   position: fixed;
 115 |   bottom: 0;
 116 |   display: flex;
 117 |   width: 100%;
 118 |   height: 10vh;
 119 |   background-color: rgb(73, 102, 184);
 120 |   justify-content: center;
 121 |   align-items: center;
 122 | }
 123 | 
 124 | footer .footer {
 125 |   color: #020214;
 126 | }
 127 | 
 128 | /* ............loader-1........... */
 129 | .loader-1 {
 130 |   display: flex;
 131 |   justify-content: center;
 132 |   align-items: center;
 133 |   width: 120px;
 134 |   height: 120px;
 135 |   background-color: rgb(42, 119, 163);
 136 | }
 137 | 
 138 | .loader-1 div {
 139 |   margin-left: 8px;
 140 |   width: 16px;
 141 |   background: #fff;
 142 |   animation: loader-1 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 143 | }
 144 | 
 145 | .loader-1 div:nth-child(1) {
 146 |   left: 8px;
 147 |   animation-delay: -0.24s;
 148 | }
 149 | 
 150 | .loader-1 div:nth-child(2) {
 151 |   left: 32px;
 152 |   animation-delay: -0.12s;
 153 | }
 154 | 
 155 | .loader-1 div:nth-child(3) {
 156 |   left: 56px;
 157 |   animation-delay: 0;
 158 | }
 159 | 
 160 | @keyframes loader-1 {
 161 |   0% {
 162 |     top: 8px;
 163 |     height: 64px;
 164 |   }
 165 | 
 166 |   50%,
 167 |   100% {
 168 |     top: 24px;
 169 |     height: 32px;
 170 |   }
 171 | }
 172 | 
 173 | /* ...............Loader-2................. */
 174 | .loader-2 {
 175 |   border: 16px solid #f3f3f3;
 176 |   /* Light grey */
 177 |   border-top: 16px solid #3498db;
 178 |   /* Blue */
 179 |   border-radius: 50%;
 180 |   width: 120px;
 181 |   height: 120px;
 182 |   animation: spin 2s linear infinite;
 183 | }
 184 | 
 185 | @keyframes spin {
 186 |   0% {
 187 |     transform: rotate(0deg);
 188 |   }
 189 | 
 190 |   100% {
 191 |     transform: rotate(360deg);
 192 |   }
 193 | }
 194 | 
 195 | /* ...............Loader-3...................... */
 196 | .loader-3 {
 197 |   position: relative;
 198 |   width: 120px;
 199 |   height: 120px;
 200 |   border-radius: 50%;
 201 |   background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
 202 |   animation: animate-3 2s linear infinite;
 203 | }
 204 | 
 205 | .loader-3:before {
 206 |   content: "";
 207 |   position: absolute;
 208 |   top: 6px;
 209 |   left: 6px;
 210 |   right: 6px;
 211 |   bottom: 6px;
 212 |   border-radius: 50%;
 213 |   z-index: 1000;
 214 | }
 215 | 
 216 | .loader-3:after {
 217 |   content: "";
 218 |   position: absolute;
 219 |   top: 0px;
 220 |   left: 0px;
 221 |   right: 0px;
 222 |   bottom: 0px;
 223 |   border-radius: 50%;
 224 |   z-index: 1;
 225 |   background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
 226 |   filter: blur(30px);
 227 | }
 228 | 
 229 | @keyframes animate-3 {
 230 |   0% {
 231 |     transform: rotate(0deg);
 232 |     filter: hue-rotate(0deg);
 233 |   }
 234 | 
 235 |   100% {
 236 |     transform: rotate(360deg);
 237 |     filter: hue-rotate(360deg);
 238 |   }
 239 | }
 240 | 
 241 | .white {
 242 |   border: 2px solid rgb(255, 255, 255);
 243 |   color: white;
 244 | }
 245 | 
 246 | /* ...................Loader-4................... */
 247 | .loader-4 {
 248 |   display: flex;
 249 |   justify-content: center;
 250 |   align-items: center;
 251 |   width: 120px;
 252 |   height: 120px;
 253 | }
 254 | 
 255 | .dot-loader {
 256 |   height: 20px;
 257 |   width: 20px;
 258 |   border-radius: 50%;
 259 |   background-color: black;
 260 |   position: relative;
 261 |   -webkit-animation: 1.2s grow ease-in-out infinite;
 262 |   animation: 1.2s grow ease-in-out infinite;
 263 | }
 264 | 
 265 | .dot-loader--2 {
 266 |   -webkit-animation: 1.2s grow ease-in-out infinite 0.15555s;
 267 |   animation: 1.2s grow ease-in-out infinite 0.15555s;
 268 |   margin: 0 20px;
 269 | }
 270 | 
 271 | .dot-loader--3 {
 272 |   -webkit-animation: 1.2s grow ease-in-out infinite 0.3s;
 273 |   animation: 1.2s grow ease-in-out infinite 0.3s;
 274 | }
 275 | 
 276 | @-webkit-keyframes grow {
 277 |   0%,
 278 |   40%,
 279 |   100% {
 280 |     -webkit-transform: scale(0);
 281 |     transform: scale(0);
 282 |   }
 283 | 
 284 |   40% {
 285 |     -webkit-transform: scale(1);
 286 |     transform: scale(1);
 287 |   }
 288 | }
 289 | 
 290 | @keyframes grow {
 291 |   0%,
 292 |   40%,
 293 |   100% {
 294 |     -webkit-transform: scale(0);
 295 |     transform: scale(0);
 296 |   }
 297 | 
 298 |   40% {
 299 |     -webkit-transform: scale(1);
 300 |     transform: scale(1);
 301 |   }
 302 | }
 303 | 
 304 | /* ................Loader-5........................ */
 305 | .loader_5 {
 306 |   display: flex;
 307 |   justify-content: center;
 308 |   align-items: center;
 309 |   height: 120px;
 310 |   width: 120px;
 311 | }
 312 | 
 313 | .loader5_int {
 314 |   width: 60px;
 315 |   height: 60px;
 316 |   border-radius: 50%;
 317 |   border: 4px solid #009ed2;
 318 |   border-right-color: transparent;
 319 |   transform-origin: center;
 320 |   animation: rotate 1s linear infinite;
 321 | }
 322 | 
 323 | @keyframes rotate {
 324 |   from {
 325 |     transform: rotate(0);
 326 |   }
 327 | 
 328 |   to {
 329 |     transform: rotate(360deg);
 330 |   }
 331 | }
 332 | 
 333 | /* .............Loader-6............... */
 334 | .loader-6 {
 335 |   height: 120px;
 336 |   width: 120px;
 337 |   position: relative;
 338 | }
 339 | 
 340 | .loader-6 .circle {
 341 |   width: 20px;
 342 |   height: 20px;
 343 |   background: black;
 344 |   border-radius: 50%;
 345 |   margin: -12.5px;
 346 |   -webkit-animation: mesh 3s ease-in-out infinite;
 347 |   animation: mesh 3s ease-in-out infinite -1.5s;
 348 | }
 349 | 
 350 | .loader-6 > div .circle:last-child {
 351 |   -webkit-animation-delay: 0s;
 352 |   animation-delay: 0s;
 353 | }
 354 | 
 355 | .loader-6 > div {
 356 |   position: absolute;
 357 |   top: 50%;
 358 |   left: 50%;
 359 | }
 360 | 
 361 | .loader-6 > div:last-child {
 362 |   -webkit-transform: rotate(90deg);
 363 |   transform: rotate(90deg);
 364 | }
 365 | 
 366 | @-webkit-keyframes mesh {
 367 |   0% {
 368 |     -webkit-transform-origin: 50% -100%;
 369 |     transform-origin: 50% -100%;
 370 |     -webkit-transform: rotate(0);
 371 |     transform: rotate(0);
 372 |   }
 373 | 
 374 |   50% {
 375 |     -webkit-transform-origin: 50% -100%;
 376 |     transform-origin: 50% -100%;
 377 |     -webkit-transform: rotate(360deg);
 378 |     transform: rotate(360deg);
 379 |   }
 380 | 
 381 |   50.00001% {
 382 |     -webkit-transform-origin: 50% 200%;
 383 |     transform-origin: 50% 200%;
 384 |     -webkit-transform: rotate(0deg);
 385 |     transform: rotate(0deg);
 386 |   }
 387 | 
 388 |   100% {
 389 |     -webkit-transform-origin: 50% 200%;
 390 |     transform-origin: 50% 200%;
 391 |     -webkit-transform: rotate(360deg);
 392 |     transform: rotate(360deg);
 393 |   }
 394 | }
 395 | 
 396 | @keyframes mesh {
 397 |   0% {
 398 |     -webkit-transform-origin: 50% -100%;
 399 |     transform-origin: 50% -100%;
 400 |     -webkit-transform: rotate(0);
 401 |     transform: rotate(0);
 402 |   }
 403 | 
 404 |   50% {
 405 |     -webkit-transform-origin: 50% -100%;
 406 |     transform-origin: 50% -100%;
 407 |     -webkit-transform: rotate(360deg);
 408 |     transform: rotate(360deg);
 409 |   }
 410 | 
 411 |   50.00001% {
 412 |     -webkit-transform-origin: 50% 200%;
 413 |     transform-origin: 50% 200%;
 414 |     -webkit-transform: rotate(0deg);
 415 |     transform: rotate(0deg);
 416 |   }
 417 | 
 418 |   100% {
 419 |     -webkit-transform-origin: 50% 200%;
 420 |     transform-origin: 50% 200%;
 421 |     -webkit-transform: rotate(360deg);
 422 |     transform: rotate(360deg);
 423 |   }
 424 | }
 425 | 
 426 | /* .............Loader-7............... */
 427 | /* ...................Loader-7................... */
 428 | .loader-7 {
 429 |   margin: 0;
 430 |   padding: 0;
 431 |   box-sizing: border-box;
 432 |   position: relative;
 433 |   display: flex;
 434 |   justify-content: center;
 435 |   align-items: center;
 436 |   width: 120px;
 437 |   height: 120px;
 438 |   background: #011015;
 439 | }
 440 | 
 441 | .dot-loader-7 {
 442 |   width: 120px;
 443 |   height: 120px;
 444 |   border: 4px solid #011015;
 445 |   border-radius: 50%;
 446 |   position: absolute;
 447 | }
 448 | 
 449 | .dot-loader-7:nth-child(1) {
 450 |   border-bottom-width: 10px;
 451 |   border-color: rgb(255, 0, 255);
 452 |   animation: rotate1 2s linear infinite;
 453 | }
 454 | 
 455 | .dot-loader-7:nth-child(2) {
 456 |   border-right-width: 10px;
 457 |   border-color: rgb(0, 247, 255);
 458 |   animation: rotate2 2s linear infinite;
 459 | }
 460 | 
 461 | .dot-loader-7:nth-child(3) {
 462 |   border-top-width: 10px;
 463 |   border-color: rgb(0, 255, 13);
 464 |   animation: rotate3 2s linear infinite;
 465 | }
 466 | 
 467 | @keyframes rotate1 {
 468 |   0% {
 469 |     transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
 470 |   }
 471 | 
 472 |   50% {
 473 |     transform: rotate(0deg);
 474 |   }
 475 | 
 476 |   100% {
 477 |     transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
 478 |   }
 479 | }
 480 | 
 481 | @keyframes rotate2 {
 482 |   0% {
 483 |     transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
 484 |   }
 485 | 
 486 |   50% {
 487 |     transform: rotate(0deg);
 488 |   }
 489 | 
 490 |   100% {
 491 |     transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
 492 |   }
 493 | }
 494 | 
 495 | @keyframes rotate3 {
 496 |   0% {
 497 |     transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
 498 |   }
 499 | 
 500 |   50% {
 501 |     transform: rotate(0deg);
 502 |   }
 503 | 
 504 |   100% {
 505 |     transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
 506 |   }
 507 | }
 508 | 
 509 | .loading-7 {
 510 |   color: white;
 511 |   font-size: smaller;
 512 | }
 513 | 
 514 | /* .............Loader-8............... */
 515 | .loader-hourglass {
 516 |   display: inline-block;
 517 |   position: relative;
 518 |   width: 80px;
 519 |   height: 80px;
 520 | }
 521 | 
 522 | .loader-hourglass:after {
 523 |   content: " ";
 524 |   display: block;
 525 |   border-radius: 50%;
 526 |   width: 0;
 527 |   height: 0;
 528 |   margin: 8px;
 529 |   box-sizing: border-box;
 530 |   border: 32px solid #fff;
 531 |   border-color: #fff transparent #fff transparent;
 532 |   animation: loader-hourglass 1.2s infinite;
 533 | }
 534 | 
 535 | @keyframes loader-hourglass {
 536 |   0% {
 537 |     transform: rotate(0);
 538 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
 539 |   }
 540 | 
 541 |   50% {
 542 |     transform: rotate(900deg);
 543 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 544 |   }
 545 | 
 546 |   100% {
 547 |     transform: rotate(1800deg);
 548 |   }
 549 | }
 550 | 
 551 | /* .............Loader-9............... */
 552 | .loader-ripple {
 553 |   display: inline-block;
 554 |   position: relative;
 555 |   width: 80px;
 556 |   height: 80px;
 557 | }
 558 | 
 559 | .loader-ripple div {
 560 |   position: absolute;
 561 |   border: 4px solid #fff;
 562 |   opacity: 1;
 563 |   border-radius: 50%;
 564 |   animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 565 | }
 566 | 
 567 | .loader-ripple div:nth-child(2) {
 568 |   animation-delay: -0.5s;
 569 | }
 570 | 
 571 | @keyframes loader-ripple {
 572 |   0% {
 573 |     top: 36px;
 574 |     left: 36px;
 575 |     width: 0;
 576 |     height: 0;
 577 |     opacity: 0;
 578 |   }
 579 | 
 580 |   4.9% {
 581 |     top: 36px;
 582 |     left: 36px;
 583 |     width: 0;
 584 |     height: 0;
 585 |     opacity: 0;
 586 |   }
 587 | 
 588 |   5% {
 589 |     top: 36px;
 590 |     left: 36px;
 591 |     width: 0;
 592 |     height: 0;
 593 |     opacity: 1;
 594 |   }
 595 | 
 596 |   100% {
 597 |     top: 0px;
 598 |     left: 0px;
 599 |     width: 72px;
 600 |     height: 72px;
 601 |     opacity: 0;
 602 |   }
 603 | }
 604 | 
 605 | /* ..................Loader-10............. */
 606 | .loader-10 {
 607 |   width: 120px;
 608 |   height: 20px;
 609 |   background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
 610 |   -webkit-mask: linear-gradient(#000 0 0) top / 100% 5px no-repeat,
 611 |     linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
 612 |     repeating-linear-gradient(90deg, #000 0 5px, #0000 0 20%)
 613 |       left/calc(100% - 5px) 100%;
 614 |   animation: l10 1s infinite linear;
 615 | }
 616 | 
 617 | @keyframes l10 {
 618 |   100% {
 619 |     background-position: right -40px top 0;
 620 |   }
 621 | }
 622 | 
 623 | /*  ............Loader-11...............*/
 624 | .loader-circle {
 625 |   display: inline-block;
 626 |   transform: translateZ(1px);
 627 | }
 628 | 
 629 | .loader-circle > div {
 630 |   display: inline-block;
 631 |   width: 64px;
 632 |   height: 64px;
 633 |   margin: 8px;
 634 |   border-radius: 50%;
 635 |   background: #fff;
 636 |   animation: loader-circle 2.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 637 | }
 638 | 
 639 | @keyframes loader-circle {
 640 |   0%,
 641 |   100% {
 642 |     animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
 643 |   }
 644 | 
 645 |   0% {
 646 |     transform: rotateY(0deg);
 647 |   }
 648 | 
 649 |   50% {
 650 |     transform: rotateY(1800deg);
 651 |     animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
 652 |   }
 653 | 
 654 |   100% {
 655 |     transform: rotateY(3600deg);
 656 |   }
 657 | }
 658 | 
 659 | /* .............Loader-12............... */
 660 | .loader_arrow {
 661 |   width: 48px;
 662 |   height: 48px;
 663 |   display: inline-block;
 664 |   position: relative;
 665 |   border: 3px solid;
 666 |   border-color: #de3500 #0000 #fff #0000;
 667 |   border-radius: 50%;
 668 |   box-sizing: border-box;
 669 |   animation: 1s rotate linear infinite;
 670 | }
 671 | 
 672 | .loader_arrow:before,
 673 | .loader_arrow:after {
 674 |   content: "";
 675 |   top: 0;
 676 |   left: 0;
 677 |   position: absolute;
 678 |   border: 10px solid transparent;
 679 |   border-bottom-color: #fff;
 680 |   transform: translate(-10px, 19px) rotate(-35deg);
 681 | }
 682 | 
 683 | .loader_arrow:after {
 684 |   border-color: #de3500 #0000 #0000 #0000;
 685 |   transform: translate(32px, 3px) rotate(-35deg);
 686 | }
 687 | 
 688 | @keyframes rotate {
 689 |   100% {
 690 |     transform: rotate(360deg);
 691 |   }
 692 | }
 693 | 
 694 | /* .............Loader-13............... */
 695 | .loader-13 {
 696 |   height: 50%;
 697 |   display: flex;
 698 |   justify-content: center;
 699 |   align-items: center;
 700 |   overflow: hidden;
 701 |   background: rebeccapurple;
 702 | }
 703 | 
 704 | .loader13 {
 705 |   border: 7px groove rebeccapurple;
 706 | 
 707 |   display: table-cell;
 708 |   border-radius: 999px;
 709 |   animation: spin 15s linear infinite;
 710 | }
 711 | 
 712 | @keyframes spin {
 713 |   from {
 714 |     transform: rotate(0deg);
 715 |   }
 716 | 
 717 |   to {
 718 |     transform: rotate(360deg);
 719 |   }
 720 | }
 721 | 
 722 | /* .............Loader-14.............. */
 723 | .loader-14 {
 724 |   width: 100px;
 725 |   height: 100px;
 726 |   border-radius: 100%;
 727 |   position: relative;
 728 |   margin: 0 auto;
 729 | }
 730 | 
 731 | .l-14 {
 732 |   -webkit-perspective: 120px;
 733 |   -moz-perspective: 120px;
 734 |   -ms-perspective: 120px;
 735 |   perspective: 120px;
 736 | }
 737 | 
 738 | .l-14:before {
 739 |   content: "";
 740 |   position: absolute;
 741 |   left: 25px;
 742 |   top: 25px;
 743 |   width: 50px;
 744 |   height: 50px;
 745 |   background-color: #3498db;
 746 |   animation: flip 1s infinite;
 747 | }
 748 | 
 749 | @keyframes flip {
 750 |   0% {
 751 |     transform: rotate(0);
 752 |   }
 753 | 
 754 |   50% {
 755 |     transform: rotateY(180deg);
 756 |   }
 757 | 
 758 |   100% {
 759 |     transform: rotateY(180deg) rotateX(180deg);
 760 |   }
 761 | }
 762 | 
 763 | /* .............Loader-15.............. */
 764 | body {
 765 |   --clr-background: whitesmoke;
 766 |   --clr-main: tomato;
 767 | }
 768 | 
 769 | .spinner-container {
 770 |   height: 70%;
 771 |   display: flex;
 772 |   align-items: center;
 773 |   overflow: hidden;
 774 |   justify-content: center;
 775 | }
 776 | 
 777 | .spinner-container .spinner {
 778 |   height: 100px;
 779 |   width: 100px;
 780 |   background-color: var(--clr-main);
 781 |   border-radius: 50%;
 782 |   position: relative;
 783 |   animation: animateRotate 3s linear infinite;
 784 | }
 785 | 
 786 | .spinner-container .spinner::before,
 787 | .spinner-container .spinner::after {
 788 |   content: "";
 789 |   position: absolute;
 790 |   border-radius: 50%;
 791 |   background-color: var(--clr-background);
 792 |   top: 50%;
 793 |   transform: translateY(-50%);
 794 | }
 795 | 
 796 | .spinner-container .spinner::before {
 797 |   height: calc(85% + 3px);
 798 |   width: calc(85% + 3px);
 799 |   left: -2px;
 800 |   animation: animateBall 1s infinite linear alternate;
 801 | }
 802 | 
 803 | .spinner-container .spinner::after {
 804 |   height: calc(15% + 3px);
 805 |   width: calc(15% + 3px);
 806 |   right: -2px;
 807 |   animation: animateBall 1s infinite linear alternate-reverse;
 808 | }
 809 | 
 810 | @keyframes animateBall {
 811 |   from {
 812 |     height: calc(85% + 3px);
 813 |     width: calc(85% + 3px);
 814 |   }
 815 | 
 816 |   to {
 817 |     height: calc(15% + 3px);
 818 |     width: calc(15% + 3px);
 819 |   }
 820 | }
 821 | 
 822 | @keyframes animateRotate {
 823 |   to {
 824 |     transform: rotate(360deg);
 825 |   }
 826 | }
 827 | 
 828 | /* .............Loader-16............... */
 829 | .loader-16 {
 830 |   position: absolute;
 831 |   width: 100px;
 832 |   height: 100px;
 833 |   border-radius: 50%;
 834 |   animation: ring 2s linear infinite;
 835 |   margin-bottom: 56px;
 836 | }
 837 | 
 838 | @keyframes ring {
 839 |   0% {
 840 |     transform: rotate(0deg);
 841 |     box-shadow: 1px 4px 2px #e65c00;
 842 |   }
 843 | 
 844 |   50% {
 845 |     transform: rotate(180deg);
 846 |     box-shadow: 1px 4px 2px #18b201;
 847 |   }
 848 | 
 849 |   100% {
 850 |     transform: rotate(360deg);
 851 |     box-shadow: 1px 4px 2px #0456c8;
 852 |   }
 853 | }
 854 | 
 855 | .loader-16:before {
 856 |   position: absolute;
 857 |   content: " ";
 858 |   left: 0;
 859 |   top: 0;
 860 |   height: 100%;
 861 |   width: 100%;
 862 |   border-radius: 50%;
 863 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 864 | }
 865 | 
 866 | .sat {
 867 |   color: #000000;
 868 |   font-size: 10px;
 869 |   text-transform: uppercase;
 870 |   letter-spacing: 1px;
 871 |   line-height: 200px;
 872 |   font-weight: bold;
 873 | }
 874 | 
 875 | /* .............Loader-17............... */
 876 | 
 877 | .loader-17 {
 878 |   display: flex;
 879 |   justify-content: center;
 880 |   align-items: center;
 881 |   min-height: 100vh;
 882 |   animation: anim 10s linear infinite;
 883 | }
 884 | 
 885 | @keyframes anim {
 886 |   0% {
 887 |     filter: hue-rotate(0deg);
 888 |   }
 889 | 
 890 |   100% {
 891 |     filter: hue-rotate(360deg);
 892 |   }
 893 | }
 894 | 
 895 | .loader-17 .pp {
 896 |   position: absolute;
 897 |   /* top: 0; */
 898 |   /* left: 0; */
 899 |   width: 80px;
 900 |   height: 80px;
 901 |   transform: rotate(calc(18deg * var(--i)));
 902 | }
 903 | 
 904 | .loader-17 .pp::before {
 905 |   content: " ";
 906 |   position: absolute;
 907 |   left: 0;
 908 |   top: 0;
 909 |   width: 5px;
 910 |   height: 5px;
 911 |   background-color: #e9c912;
 912 |   box-shadow: 0 0 5px #7ffa1a, 0 0 10px #7ffa1a, 0 0 20px #7ffa1a,
 913 |     0 0 40px #7ffa1a, 0 0 60px #7ffa1a, 0 0 80px #7ffa1a;
 914 | 
 915 |   animation: sat11 2s linear infinite;
 916 |   animation-delay: calc(0.1s * var(--i));
 917 | }
 918 | 
 919 | @keyframes sat11 {
 920 |   0% {
 921 |     transform: scale(1);
 922 |   }
 923 | 
 924 |   80%,
 925 |   100% {
 926 |     transform: scale(2);
 927 |   }
 928 | }
 929 | 
 930 | .show {
 931 |   margin-top: 14rem;
 932 | }
 933 | 
 934 | /* .............Loader-18............... */
 935 | .loader-18 {
 936 |   display: flex;
 937 |   align-items: center;
 938 |   width: 100%;
 939 |   height: 100%;
 940 |   padding: 0 45px;
 941 | }
 942 | 
 943 | .loader-placeholder {
 944 |   width: 100%;
 945 |   height: 20px;
 946 |   border: 2px solid #6a0dad;
 947 |   border-radius: 8px;
 948 |   padding: 2px;
 949 | }
 950 | 
 951 | .indicator {
 952 |   position: relative;
 953 |   width: 30px;
 954 |   height: 100%;
 955 |   border-radius: 8px;
 956 |   background-color: #6a0dad;
 957 |   animation: loader18 1s infinite linear alternate-reverse;
 958 |   margin: 0;
 959 | }
 960 | 
 961 | @keyframes loader18 {
 962 |   0% {
 963 |     left: 0px;
 964 |   }
 965 | 
 966 |   100% {
 967 |     left: 130px;
 968 |   }
 969 | }
 970 | 
 971 | /* .............Loader-19.............. */
 972 | .loading {
 973 |   width: 100px;
 974 |   height: 100px;
 975 |   display: grid;
 976 |   place-items: center;
 977 |   max-width: 100%;
 978 | }
 979 | 
 980 | .loading > div {
 981 |   width: 80px;
 982 |   height: 80px;
 983 |   border-bottom: 5px solid rgba(0, 0, 0, 0.719);
 984 | 
 985 |   border-radius: 50%;
 986 | 
 987 |   animation: loadingRotate 800ms linear infinite;
 988 | }
 989 | 
 990 | @keyframes loadingRotate {
 991 |   to {
 992 |     transform: rotateZ(-360deg);
 993 |   }
 994 | }
 995 | 
 996 | /* .............Loader-20............... */
 997 | .loader-20 {
 998 |   margin: 0;
 999 |   padding: 0;
1000 |   font-weight: 100;
1001 |   font-size: 1.1em;
1002 |   color: #ffffff;
1003 | }
1004 | 
1005 | .loader-20 span {
1006 |   display: inline-block;
1007 |   text-transform: uppercase;
1008 |   opacity: 0;
1009 |   transform: rotateX(-90deg);
1010 | }
1011 | 
1012 | .loader-20 .word1 {
1013 |   animation: drop 1.2s ease-in-out infinite;
1014 |   animation-delay: 1.2s;
1015 | }
1016 | 
1017 | .loader-20 .word2 {
1018 |   animation: drop 1.2s ease-in-out infinite;
1019 |   animation-delay: 1.3s;
1020 | }
1021 | 
1022 | .loader-20 .word3 {
1023 |   animation: drop 1.2s ease-in-out infinite;
1024 |   animation-delay: 1.4s;
1025 | }
1026 | 
1027 | .loader-20 .word4 {
1028 |   animation: drop 1.2s ease-in-out infinite;
1029 |   animation-delay: 1.5s;
1030 | }
1031 | 
1032 | .loader-20 .word5 {
1033 |   animation: drop 1.2s ease-in-out infinite;
1034 |   animation-delay: 1.6s;
1035 | }
1036 | 
1037 | .loader-20 .word6 {
1038 |   animation: drop 1.2s ease-in-out infinite;
1039 |   animation-delay: 1.7s;
1040 | }
1041 | 
1042 | .loader-20 .word7 {
1043 |   animation: drop 1.2s ease-in-out infinite;
1044 |   animation-delay: 1.8s;
1045 | }
1046 | 
1047 | @keyframes drop {
1048 |   10% {
1049 |     opacity: 0.5;
1050 |   }
1051 | 
1052 |   20% {
1053 |     opacity: 1;
1054 |     top: 3.78em;
1055 |     transform: rotateX(-360deg);
1056 |   }
1057 | 
1058 |   80% {
1059 |     opacity: 1;
1060 |     top: 3.78em;
1061 |     transform: rotateX(-360deg);
1062 |   }
1063 | 
1064 |   90% {
1065 |     opacity: 0.5;
1066 |   }
1067 | 
1068 |   100% {
1069 |     opacity: 0;
1070 |     top: 6.94em;
1071 |   }
1072 | }
1073 | 
1074 | /* .............Loader-21............... */
1075 | 
1076 | .dot {
1077 |   height: 5px;
1078 |   width: 15px;
1079 |   background-color: black;
1080 |   border-radius: 10%;
1081 |   display: inline-block;
1082 | }
1083 | 
1084 | #dot1 {
1085 |   animation: ajay1 1.2s infinite;
1086 | }
1087 | 
1088 | #dot2 {
1089 |   animation: ajay2 1.2s infinite;
1090 | }
1091 | 
1092 | #dot3 {
1093 |   animation: ajay3 1.2s infinite;
1094 | }
1095 | 
1096 | #dot4 {
1097 |   animation: ajay4 1.2s infinite;
1098 | }
1099 | 
1100 | @keyframes ajay4 {
1101 |   40% {
1102 |     height: 50px;
1103 |   }
1104 | 
1105 |   100% {
1106 |     opacity: 55%;
1107 |     height: 9px;
1108 |   }
1109 | }
1110 | 
1111 | /* .............Loader-21............... */
1112 | 
1113 | .loader21 {
1114 |   margin: 0;
1115 |   background: chocolate;
1116 |   display: flex;
1117 |   align-items: center;
1118 |   justify-content: center;
1119 | 
1120 |   --timing: 1.5s infinite linear;
1121 | }
1122 | 
1123 | .svg {
1124 |   animation: size var(--timing);
1125 |   overflow: visible;
1126 |   transform: scale(1);
1127 |   width: 4rem;
1128 | }
1129 | 
1130 | .fill {
1131 |   animation: drop-shadow-blink var(--timing);
1132 |   fill: white;
1133 |   filter: drop-shadow(0 0 2px blue);
1134 | }
1135 | 
1136 | .fill--animated {
1137 |   animation: fill-blink var(--timing);
1138 |   fill: blue;
1139 | }
1140 | 
1141 | .inner-shadow,
1142 | .inner-shadow--animated {
1143 |   fill: transparent;
1144 |   stroke: white;
1145 |   stroke-width: 2px;
1146 | }
1147 | 
1148 | .inner-shadow {
1149 |   filter: drop-shadow(0 0 1px blue);
1150 | }
1151 | 
1152 | .inner-shadow--animated {
1153 |   animation: inner-shadow-blink var(--timing);
1154 |   filter: drop-shadow(0 0 3px blue);
1155 | }
1156 | 
1157 | @keyframes size {
1158 |   0%,
1159 |   95%,
1160 |   100% {
1161 |     transform: scale(1);
1162 |   }
1163 | 
1164 |   75% {
1165 |     transform: scale(0.9);
1166 |   }
1167 | }
1168 | 
1169 | @keyframes fill-blink {
1170 |   0%,
1171 |   100% {
1172 |     opacity: 0;
1173 |   }
1174 | 
1175 |   75% {
1176 |     opacity: 0.45;
1177 |   }
1178 | }
1179 | 
1180 | @keyframes inner-shadow-blink {
1181 |   0%,
1182 |   100% {
1183 |     opacity: 0;
1184 |   }
1185 | 
1186 |   75% {
1187 |     opacity: 1;
1188 |   }
1189 | }
1190 | 
1191 | @keyframes drop-shadow-blink {
1192 |   0%,
1193 |   90%,
1194 |   100% {
1195 |     filter: drop-shadow(0 0 6px rgb(104, 104, 255));
1196 |   }
1197 | 
1198 |   75% {
1199 |     filter: drop-shadow(0 0 3px blue);
1200 |   }
1201 | }
1202 | 
1203 | /* .............Loader-22............... */
1204 | 
1205 | .dot {
1206 |   height: 5px;
1207 |   width: 15px;
1208 |   background-color: black;
1209 |   border-radius: 10%;
1210 |   display: inline-block;
1211 | }
1212 | 
1213 | #dot1 {
1214 |   animation: ajay1 1.2s infinite;
1215 | }
1216 | 
1217 | #dot2 {
1218 |   animation: ajay2 1.2s infinite;
1219 | }
1220 | 
1221 | #dot3 {
1222 |   animation: ajay3 1.2s infinite;
1223 | }
1224 | 
1225 | #dot4 {
1226 |   animation: ajay4 1.2s infinite;
1227 | }
1228 | 
1229 | @keyframes ajay4 {
1230 |   40% {
1231 |     height: 50px;
1232 |   }
1233 | 
1234 |   100% {
1235 |     opacity: 55%;
1236 |     height: 9px;
1237 |   }
1238 | }
1239 | 
1240 | @keyframes ajay3 {
1241 |   30% {
1242 |     height: 35px;
1243 |   }
1244 | 
1245 |   100% {
1246 |     opacity: 40%;
1247 |     height: 6px;
1248 |   }
1249 | }
1250 | 
1251 | @keyframes ajay2 {
1252 |   20% {
1253 |     height: 25px;
1254 |   }
1255 | 
1256 |   100% {
1257 |     opacity: 25%;
1258 |     height: 4px;
1259 |   }
1260 | }
1261 | 
1262 | @keyframes ajay1 {
1263 |   10% {
1264 |     /* opacity: 40%; */
1265 |     height: 15px;
1266 |   }
1267 | 
1268 |   100% {
1269 |     opacity: 10%;
1270 |     height: 2px;
1271 |   }
1272 | }
1273 | 
1274 | /* .............Loader-23............... */
1275 | .loader-23 {
1276 |   width: 100%;
1277 |   height: 100vh;
1278 |   display: flex;
1279 |   justify-content: center;
1280 |   align-items: center;
1281 | }
1282 | 
1283 | .loader-23 .loading {
1284 |   display: flex;
1285 |   position: absolute;
1286 |   width: auto;
1287 |   height: 20px;
1288 |   transition: all 0.4s ease;
1289 | }
1290 | 
1291 | .loader-23 .loading .loader {
1292 |   display: block;
1293 |   align-items: flex-end;
1294 |   background-color: #ffffff;
1295 |   width: 5px;
1296 |   height: 5px;
1297 |   position: absolute;
1298 |   animation: loader 1.2s ease infinite both;
1299 |   border-radius: 4px;
1300 |   bottom: 0;
1301 | }
1302 | 
1303 | .loader-23 .loading .loader:nth-child(1) {
1304 |   transform: translateX(-20px);
1305 | }
1306 | 
1307 | .loader-23 .loading .loader:nth-child(2) {
1308 |   animation-delay: 0.4s;
1309 | }
1310 | 
1311 | .loader-23 .loading .loader:nth-child(3) {
1312 |   animation-delay: 0.8s;
1313 |   transform: translateX(20px);
1314 | }
1315 | 
1316 | @keyframes loader {
1317 |   0% {
1318 |     height: 5px;
1319 |     bottom: 0;
1320 |     opacity: 1;
1321 |   }
1322 | 
1323 |   25% {
1324 |     opacity: 0.3;
1325 |     bottom: 0;
1326 |     height: 15px;
1327 |   }
1328 | 
1329 |   50% {
1330 |     opacity: 1;
1331 |     height: 5px;
1332 |     bottom: calc(100% - 5px);
1333 |   }
1334 | 
1335 |   75% {
1336 |     opacity: 0.3;
1337 |     height: 15px;
1338 |     bottom: 0;
1339 |   }
1340 | 
1341 |   100% {
1342 |     opacity: 1;
1343 |     height: 5px;
1344 |     bottom: 0;
1345 |   }
1346 | }
1347 | 
1348 | /* .............Loader-24............... */
1349 | .loader-24 {
1350 |   width: 48px;
1351 |   height: 48px;
1352 |   border: 3px solid rgba(255, 255, 255, 0.4);
1353 |   border-radius: 50%;
1354 |   display: inline-block;
1355 |   position: relative;
1356 |   box-sizing: border-box;
1357 |   animation: rotation-24 1s linear infinite;
1358 | }
1359 | 
1360 | .loader-24::after {
1361 |   content: "";
1362 |   box-sizing: border-box;
1363 |   position: absolute;
1364 |   left: 0;
1365 |   top: 0;
1366 |   background: #ffffff;
1367 |   width: 16px;
1368 |   height: 16px;
1369 |   transform: translate(-50%, 50%);
1370 |   border-radius: 50%;
1371 | }
1372 | 
1373 | @keyframes rotation-24 {
1374 |   0% {
1375 |     transform: rotate(0deg);
1376 |   }
1377 | 
1378 |   100% {
1379 |     transform: rotate(360deg);
1380 |   }
1381 | }
1382 | 
1383 | /* .............Loader-25............... */
1384 | .loader-25 {
1385 |   width: 48px;
1386 |   height: 48px;
1387 |   border: 5px solid #fff;
1388 |   border-radius: 50%;
1389 |   display: inline-block;
1390 |   box-sizing: border-box;
1391 |   position: relative;
1392 |   animation: pulse-25 1s linear infinite;
1393 | }
1394 | 
1395 | .loader-25:after {
1396 |   content: "";
1397 |   position: absolute;
1398 |   width: 48px;
1399 |   height: 48px;
1400 |   border: 5px solid #fff;
1401 |   border-radius: 50%;
1402 |   display: inline-block;
1403 |   box-sizing: border-box;
1404 |   left: 50%;
1405 |   top: 50%;
1406 |   transform: translate(-50%, -50%);
1407 |   animation: scaleUp-25 1s linear infinite;
1408 | }
1409 | 
1410 | @keyframes scaleUp-25 {
1411 |   0% {
1412 |     transform: translate(-50%, -50%) scale(0);
1413 |     opacity: 0;
1414 |   }
1415 | 
1416 |   60%,
1417 |   100% {
1418 |     transform: translate(-50%, -50%) scale(1);
1419 |     opacity: 1;
1420 |   }
1421 | }
1422 | 
1423 | @keyframes pulse-25 {
1424 |   0%,
1425 |   60%,
1426 |   100% {
1427 |     transform: scale(1);
1428 |   }
1429 | 
1430 |   80% {
1431 |     transform: scale(1.2);
1432 |   }
1433 | }
1434 | 
1435 | /* .............Loader-26............... */
1436 | .pixels span {
1437 |   display: inline-block;
1438 |   vertical-align: middle;
1439 |   width: 0.6em;
1440 |   height: 0.6em;
1441 |   margin: 0.19em;
1442 |   background: #007db6;
1443 |   border-radius: 0.6em;
1444 |   animation: loading 1s infinite alternate;
1445 | }
1446 | 
1447 | .pixels span:nth-of-type(2) {
1448 |   background: #008fb2;
1449 |   animation-delay: 0.2s;
1450 | }
1451 | 
1452 | .pixels span:nth-of-type(3) {
1453 |   background: #009b9e;
1454 |   animation-delay: 0.4s;
1455 | }
1456 | 
1457 | .pixels span:nth-of-type(4) {
1458 |   background: #00a77d;
1459 |   animation-delay: 0.6s;
1460 | }
1461 | 
1462 | .pixels span:nth-of-type(5) {
1463 |   background: #00b247;
1464 |   animation-delay: 0.8s;
1465 | }
1466 | 
1467 | .pixels span:nth-of-type(6) {
1468 |   background: #5ab027;
1469 |   animation-delay: 1s;
1470 | }
1471 | 
1472 | .pixels span:nth-of-type(7) {
1473 |   background: #a0b61e;
1474 |   animation-delay: 1.2s;
1475 | }
1476 | 
1477 | @keyframes loading {
1478 |   0% {
1479 |     opacity: 0;
1480 |   }
1481 | 
1482 |   100% {
1483 |     opacity: 1;
1484 |   }
1485 | }
1486 | 
1487 | /* .............Loader-27............... */
1488 | 
1489 | .lds-spinner {
1490 |   color: official;
1491 |   display: inline-block;
1492 |   position: relative;
1493 |   width: 80px;
1494 |   height: 80px;
1495 | }
1496 | 
1497 | .lds-spinner div {
1498 |   transform-origin: 40px 40px;
1499 |   animation: lds-spinner 1.2s linear infinite;
1500 | }
1501 | 
1502 | .lds-spinner div:after {
1503 |   content: " ";
1504 |   display: block;
1505 |   position: absolute;
1506 |   top: 3px;
1507 |   left: 37px;
1508 |   width: 6px;
1509 |   height: 18px;
1510 |   border-radius: 20%;
1511 |   background: #fff;
1512 | }
1513 | 
1514 | .lds-spinner div:nth-child(1) {
1515 |   transform: rotate(0deg);
1516 |   animation-delay: -1.1s;
1517 | }
1518 | 
1519 | .lds-spinner div:nth-child(2) {
1520 |   transform: rotate(30deg);
1521 |   animation-delay: -1s;
1522 | }
1523 | 
1524 | .lds-spinner div:nth-child(3) {
1525 |   transform: rotate(60deg);
1526 |   animation-delay: -0.9s;
1527 | }
1528 | 
1529 | .lds-spinner div:nth-child(4) {
1530 |   transform: rotate(90deg);
1531 |   animation-delay: -0.8s;
1532 | }
1533 | 
1534 | .lds-spinner div:nth-child(5) {
1535 |   transform: rotate(120deg);
1536 |   animation-delay: -0.7s;
1537 | }
1538 | 
1539 | .lds-spinner div:nth-child(6) {
1540 |   transform: rotate(150deg);
1541 |   animation-delay: -0.6s;
1542 | }
1543 | 
1544 | .lds-spinner div:nth-child(7) {
1545 |   transform: rotate(180deg);
1546 |   animation-delay: -0.5s;
1547 | }
1548 | 
1549 | .lds-spinner div:nth-child(8) {
1550 |   transform: rotate(210deg);
1551 |   animation-delay: -0.4s;
1552 | }
1553 | 
1554 | .lds-spinner div:nth-child(9) {
1555 |   transform: rotate(240deg);
1556 |   animation-delay: -0.3s;
1557 | }
1558 | 
1559 | .lds-spinner div:nth-child(10) {
1560 |   transform: rotate(270deg);
1561 |   animation-delay: -0.2s;
1562 | }
1563 | 
1564 | .lds-spinner div:nth-child(11) {
1565 |   transform: rotate(300deg);
1566 |   animation-delay: -0.1s;
1567 | }
1568 | 
1569 | .lds-spinner div:nth-child(12) {
1570 |   transform: rotate(330deg);
1571 |   animation-delay: 0s;
1572 | }
1573 | 
1574 | @keyframes lds-spinner {
1575 |   0% {
1576 |     opacity: 1;
1577 |   }
1578 | 
1579 |   100% {
1580 |     opacity: 0;
1581 |   }
1582 | }
1583 | 
1584 | /* .............Loader-28th............... */
1585 | 
1586 | .loader-28 {
1587 |   width: 48px;
1588 |   height: 48px;
1589 |   border: 2px solid #fff;
1590 |   border-radius: 50%;
1591 |   display: inline-block;
1592 |   position: relative;
1593 |   box-sizing: border-box;
1594 |   animation: rotation 1s linear infinite;
1595 | }
1596 | 
1597 | .loader-28::after,
1598 | .loader-28::before {
1599 |   content: "";
1600 |   box-sizing: border-box;
1601 |   position: absolute;
1602 |   left: 0;
1603 |   top: 0;
1604 |   background: #d0ff00;
1605 |   width: 6px;
1606 |   height: 6px;
1607 |   border-radius: 50%;
1608 | }
1609 | 
1610 | .loader-28::before {
1611 |   left: auto;
1612 |   top: auto;
1613 |   right: 0;
1614 |   bottom: 0;
1615 | }
1616 | 
1617 | @keyframes rotation {
1618 |   0% {
1619 |     transform: rotate(0deg);
1620 |   }
1621 | 
1622 |   100% {
1623 |     transform: rotate(360deg);
1624 |   }
1625 | }
1626 | 
1627 | /* .............Loader-29th............... */
1628 | 
1629 | .loader-29 {
1630 |   height: 90vh;
1631 |   display: flex;
1632 |   justify-content: center;
1633 |   align-items: center;
1634 |   background: rgba(0, 0, 0, 0);
1635 | }
1636 | 
1637 | .wave {
1638 |   width: 5px;
1639 |   height: 90px;
1640 |   background: linear-gradient(45deg, rgb(0, 190, 211), rgb(0, 0, 0));
1641 |   margin: 10px;
1642 |   animation: wave 1s linear infinite;
1643 |   border-radius: 20px;
1644 | }
1645 | 
1646 | .wave:nth-child(2) {
1647 |   animation-delay: 0.1s;
1648 | }
1649 | 
1650 | .wave:nth-child(3) {
1651 |   animation-delay: 0.2s;
1652 | }
1653 | 
1654 | .wave:nth-child(4) {
1655 |   animation-delay: 0.3s;
1656 | }
1657 | 
1658 | .wave:nth-child(5) {
1659 |   animation-delay: 0.4s;
1660 | }
1661 | 
1662 | .wave:nth-child(6) {
1663 |   animation-delay: 0.5s;
1664 | }
1665 | 
1666 | .wave:nth-child(7) {
1667 |   animation-delay: 0.6s;
1668 | }
1669 | 
1670 | .wave:nth-child(8) {
1671 |   animation-delay: 0.7s;
1672 | }
1673 | 
1674 | .wave:nth-child(9) {
1675 |   animation-delay: 0.8s;
1676 | }
1677 | 
1678 | .wave:nth-child(10) {
1679 |   animation-delay: 0.9s;
1680 | }
1681 | 
1682 | @keyframes wave {
1683 |   0% {
1684 |     transform: scale(0);
1685 |   }
1686 | 
1687 |   50% {
1688 |     transform: scale(1);
1689 |   }
1690 | 
1691 |   100% {
1692 |     transform: scale(0);
1693 |   }
1694 | }
1695 | 
1696 | /* .............Loader-29th............... */
1697 | 
1698 | .loader-29 {
1699 |   height: 90vh;
1700 |   display: flex;
1701 |   justify-content: center;
1702 |   align-items: center;
1703 |   background: rgba(0, 0, 0, 0);
1704 | }
1705 | 
1706 | .wave {
1707 |   width: 5px;
1708 |   height: 90px;
1709 |   background: linear-gradient(45deg, rgb(0, 190, 211), rgb(0, 0, 0));
1710 |   margin: 10px;
1711 |   animation: wave 1s linear infinite;
1712 |   border-radius: 20px;
1713 | }
1714 | 
1715 | .wave:nth-child(2) {
1716 |   animation-delay: 0.1s;
1717 | }
1718 | 
1719 | .wave:nth-child(3) {
1720 |   animation-delay: 0.2s;
1721 | }
1722 | 
1723 | .wave:nth-child(4) {
1724 |   animation-delay: 0.3s;
1725 | }
1726 | 
1727 | .wave:nth-child(5) {
1728 |   animation-delay: 0.4s;
1729 | }
1730 | 
1731 | .wave:nth-child(6) {
1732 |   animation-delay: 0.5s;
1733 | }
1734 | 
1735 | .wave:nth-child(7) {
1736 |   animation-delay: 0.6s;
1737 | }
1738 | 
1739 | .wave:nth-child(8) {
1740 |   animation-delay: 0.7s;
1741 | }
1742 | 
1743 | .wave:nth-child(9) {
1744 |   animation-delay: 0.8s;
1745 | }
1746 | 
1747 | .wave:nth-child(10) {
1748 |   animation-delay: 0.9s;
1749 | }
1750 | 
1751 | @keyframes wave {
1752 |   0% {
1753 |     transform: scale(0);
1754 |   }
1755 | 
1756 |   50% {
1757 |     transform: scale(1);
1758 |   }
1759 | 
1760 |   100% {
1761 |     transform: scale(0);
1762 |   }
1763 | }
1764 | 
1765 | /* .............Loader-30th............... */
1766 | 
1767 | .loader-30 {
1768 |   position: relative;
1769 |   height: 10px;
1770 |   display: flex;
1771 |   justify-content: center;
1772 |   align-items: center;
1773 |   width: 50%;
1774 |   border: 10px solid skyblue;
1775 |   border-radius: 15px;
1776 | }
1777 | 
1778 | .loader-30 .color {
1779 |   position: absolute;
1780 |   background-color: orange;
1781 |   width: 0px;
1782 |   height: 10px;
1783 |   border-radius: 15px;
1784 |   animation: loader-30 4s infinite linear;
1785 | }
1786 | 
1787 | @keyframes loader-30 {
1788 |   0% {
1789 |     width: 0%;
1790 |   }
1791 | 
1792 |   25% {
1793 |     width: 50%;
1794 |   }
1795 | 
1796 |   50% {
1797 |     width: 75%;
1798 |   }
1799 | 
1800 |   75% {
1801 |     width: 85%;
1802 |   }
1803 | 
1804 |   100% {
1805 |     width: 100%;
1806 |   }
1807 | }
1808 | 
1809 | /* .............Loader-31st............... */
1810 | .loader-31 {
1811 |   height: 100%;
1812 |   display: flex;
1813 |   align-items: center;
1814 |   justify-content: center;
1815 | }
1816 | 
1817 | .loader31 {
1818 |   position: relative;
1819 |   width: 75px;
1820 |   height: 100px;
1821 | }
1822 | 
1823 | .loader31 .bar {
1824 |   position: absolute;
1825 |   bottom: 0;
1826 |   width: 10px;
1827 |   height: 50%;
1828 |   background: #fff;
1829 |   transform-origin: center bottom;
1830 |   box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
1831 | }
1832 | 
1833 | .loader31 .bar:nth-child(1) {
1834 |   left: 0px;
1835 |   transform: scale(1, 0.2);
1836 |   animation: barUp1 4s infinite;
1837 | }
1838 | 
1839 | .loader31 .bar:nth-child(2) {
1840 |   left: 15px;
1841 |   transform: scale(1, 0.4);
1842 |   animation: barUp2 4s infinite;
1843 | }
1844 | 
1845 | .loader31 .bar:nth-child(3) {
1846 |   left: 30px;
1847 |   transform: scale(1, 0.6);
1848 |   animation: barUp3 4s infinite;
1849 | }
1850 | 
1851 | .loader31 .bar:nth-child(4) {
1852 |   left: 45px;
1853 |   transform: scale(1, 0.8);
1854 |   animation: barUp4 4s infinite;
1855 | }
1856 | 
1857 | .loader31 .bar:nth-child(5) {
1858 |   left: 60px;
1859 |   transform: scale(1, 1);
1860 |   animation: barUp5 4s infinite;
1861 | }
1862 | 
1863 | .loader__ball {
1864 |   position: absolute;
1865 |   bottom: 10px;
1866 |   left: 0;
1867 |   width: 10px;
1868 |   height: 10px;
1869 |   background: #fff;
1870 |   border-radius: 50%;
1871 |   animation: ball 4s infinite;
1872 | }
1873 | 
1874 | @keyframes ball {
1875 |   0% {
1876 |     transform: translate(0, 0);
1877 |   }
1878 | 
1879 |   5% {
1880 |     transform: translate(8px, -14px);
1881 |   }
1882 | 
1883 |   10% {
1884 |     transform: translate(15px, -10px);
1885 |   }
1886 | 
1887 |   17% {
1888 |     transform: translate(23px, -24px);
1889 |   }
1890 | 
1891 |   20% {
1892 |     transform: translate(30px, -20px);
1893 |   }
1894 | 
1895 |   27% {
1896 |     transform: translate(38px, -34px);
1897 |   }
1898 | 
1899 |   30% {
1900 |     transform: translate(45px, -30px);
1901 |   }
1902 | 
1903 |   37% {
1904 |     transform: translate(53px, -44px);
1905 |   }
1906 | 
1907 |   40% {
1908 |     transform: translate(60px, -40px);
1909 |   }
1910 | 
1911 |   50% {
1912 |     transform: translate(60px, 0);
1913 |   }
1914 | 
1915 |   57% {
1916 |     transform: translate(53px, -14px);
1917 |   }
1918 | 
1919 |   60% {
1920 |     transform: translate(45px, -10px);
1921 |   }
1922 | 
1923 |   67% {
1924 |     transform: translate(37px, -24px);
1925 |   }
1926 | 
1927 |   70% {
1928 |     transform: translate(30px, -20px);
1929 |   }
1930 | 
1931 |   77% {
1932 |     transform: translate(22px, -34px);
1933 |   }
1934 | 
1935 |   80% {
1936 |     transform: translate(15px, -30px);
1937 |   }
1938 | 
1939 |   87% {
1940 |     transform: translate(7px, -44px);
1941 |   }
1942 | 
1943 |   90% {
1944 |     transform: translate(0, -40px);
1945 |   }
1946 | 
1947 |   100% {
1948 |     transform: translate(0, 0);
1949 |   }
1950 | }
1951 | 
1952 | @keyframes barUp1 {
1953 |   0% {
1954 |     transform: scale(1, 0.2);
1955 |   }
1956 | 
1957 |   40% {
1958 |     transform: scale(1, 0.2);
1959 |   }
1960 | 
1961 |   50% {
1962 |     transform: scale(1, 1);
1963 |   }
1964 | 
1965 |   90% {
1966 |     transform: scale(1, 1);
1967 |   }
1968 | 
1969 |   100% {
1970 |     transform: scale(1, 0.2);
1971 |   }
1972 | }
1973 | 
1974 | @keyframes barUp2 {
1975 |   0% {
1976 |     transform: scale(1, 0.4);
1977 |   }
1978 | 
1979 |   40% {
1980 |     transform: scale(1, 0.4);
1981 |   }
1982 | 
1983 |   50% {
1984 |     transform: scale(1, 0.8);
1985 |   }
1986 | 
1987 |   90% {
1988 |     transform: scale(1, 0.8);
1989 |   }
1990 | 
1991 |   100% {
1992 |     transform: scale(1, 0.4);
1993 |   }
1994 | }
1995 | 
1996 | @keyframes barUp3 {
1997 |   0% {
1998 |     transform: scale(1, 0.6);
1999 |   }
2000 | 
2001 |   100% {
2002 |     transform: scale(1, 0.6);
2003 |   }
2004 | }
2005 | 
2006 | @keyframes barUp4 {
2007 |   0% {
2008 |     transform: scale(1, 0.8);
2009 |   }
2010 | 
2011 |   40% {
2012 |     transform: scale(1, 0.8);
2013 |   }
2014 | 
2015 |   50% {
2016 |     transform: scale(1, 0.4);
2017 |   }
2018 | 
2019 |   90% {
2020 |     transform: scale(1, 0.4);
2021 |   }
2022 | 
2023 |   100% {
2024 |     transform: scale(1, 0.8);
2025 |   }
2026 | }
2027 | 
2028 | @keyframes barUp5 {
2029 |   0% {
2030 |     transform: scale(1, 1);
2031 |   }
2032 | 
2033 |   40% {
2034 |     transform: scale(1, 1);
2035 |   }
2036 | 
2037 |   50% {
2038 |     transform: scale(1, 0.2);
2039 |   }
2040 | 
2041 |   90% {
2042 |     transform: scale(1, 0.2);
2043 |   }
2044 | 
2045 |   100% {
2046 |     transform: scale(1, 1);
2047 |   }
2048 | }
2049 | 
2050 | /* .............Loader-32nd............... */
2051 | 
2052 | .loader32 {
2053 |   display: inline-block;
2054 |   vertical-align: middle;
2055 |   position: relative;
2056 |   margin: 10px;
2057 | }
2058 | 
2059 | @keyframes loadern-bubbles {
2060 |   0% {
2061 |     box-shadow: 0 -10px #efdfff, 3px 0 #efdfff, 5px 0 #efdfff;
2062 |   }
2063 | 
2064 |   30% {
2065 |     box-shadow: 3px -20px rgba(239, 223, 255, 0), 5px -10px #efdfff,
2066 |       5px 0 #efdfff;
2067 |   }
2068 | 
2069 |   60% {
2070 |     box-shadow: 3px 0 rgba(239, 223, 255, 0), 4px -20px rgba(239, 223, 255, 0),
2071 |       3px -10px #efdfff;
2072 |   }
2073 | 
2074 |   61% {
2075 |     box-shadow: 3px 0 #efdfff, 4px -20px rgba(239, 223, 255, 0),
2076 |       3px -10px #efdfff;
2077 |   }
2078 | 
2079 |   100% {
2080 |     box-shadow: 0 -10px #efdfff, 4px -20px rgba(239, 223, 255, 0),
2081 |       5px -20px rgba(239, 223, 255, 0);
2082 |   }
2083 | }
2084 | 
2085 | .loadern {
2086 |   width: 10px;
2087 |   height: 20px;
2088 |   margin-left: 20px;
2089 |   margin-right: 20px;
2090 |   background: #efdfff;
2091 | }
2092 | 
2093 | .loadern:before,
2094 | .loadern:after {
2095 |   content: "";
2096 |   position: absolute;
2097 | }
2098 | 
2099 | .loadern:before {
2100 |   top: -8px;
2101 |   left: -13px;
2102 |   width: 0;
2103 |   height: 0;
2104 |   border: 18px solid transparent;
2105 |   border-bottom: 20px solid #efdfff;
2106 |   border-radius: 3px;
2107 | }
2108 | 
2109 | .loadern:after {
2110 |   top: 0;
2111 |   left: 0;
2112 |   width: 4px;
2113 |   height: 4px;
2114 |   background: #efdfff;
2115 |   border-radius: 50%;
2116 |   animation: loadern-bubbles 1s linear infinite forwards;
2117 | }
2118 | 
2119 | /*---------------------------------------Loader-33rd------------------------------*/
2120 | .lds-heart {
2121 |   display: inline-block;
2122 |   position: relative;
2123 |   width: 80px;
2124 |   height: 80px;
2125 |   transform: rotate(45deg);
2126 |   transform-origin: 40px 40px;
2127 | }
2128 | 
2129 | .lds-heart div {
2130 |   top: 32px;
2131 |   left: 32px;
2132 |   position: absolute;
2133 |   width: 32px;
2134 |   height: 32px;
2135 |   background: #fff;
2136 |   animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
2137 | }
2138 | 
2139 | .lds-heart div:after,
2140 | .lds-heart div:before {
2141 |   content: " ";
2142 |   position: absolute;
2143 |   display: block;
2144 |   width: 32px;
2145 |   height: 32px;
2146 |   background: #fff;
2147 | }
2148 | 
2149 | .lds-heart div:before {
2150 |   left: -24px;
2151 |   border-radius: 50% 0 0 50%;
2152 | }
2153 | 
2154 | .lds-heart div:after {
2155 |   top: -24px;
2156 |   border-radius: 50% 50% 0 0;
2157 | }
2158 | 
2159 | @keyframes lds-heart {
2160 |   0% {
2161 |     transform: scale(0.95);
2162 |   }
2163 | 
2164 |   5% {
2165 |     transform: scale(1.1);
2166 |   }
2167 | 
2168 |   39% {
2169 |     transform: scale(0.85);
2170 |   }
2171 | 
2172 |   45% {
2173 |     transform: scale(1);
2174 |   }
2175 | 
2176 |   60% {
2177 |     transform: scale(0.95);
2178 |   }
2179 | 
2180 |   100% {
2181 |     transform: scale(0.9);
2182 |   }
2183 | }
2184 | 
2185 | /*---------------------------------------Loader-34th------------------------------*/
2186 | .loader-34 span {
2187 |   display: inline-block;
2188 |   margin: 5px;
2189 |   height: 10px;
2190 |   width: 10px;
2191 |   margin: 25px auto;
2192 | 
2193 |   border-radius: 50%;
2194 |   background-color: #ffffff;
2195 | 
2196 |   animation: oscillate 1.2s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
2197 | }
2198 | 
2199 | .loader34_circle_1 {
2200 |   animation-delay: 0.1s !important;
2201 | }
2202 | 
2203 | .loader34_circle_2 {
2204 |   animation-delay: 0.2s !important;
2205 | }
2206 | 
2207 | .loader34_circle_3 {
2208 |   animation-delay: 0.3s !important;
2209 | }
2210 | 
2211 | .loader34_circle_4 {
2212 |   animation-delay: 0.4s !important;
2213 | }
2214 | 
2215 | .loader34_circle_5 {
2216 |   animation-delay: 0.5s !important;
2217 | }
2218 | 
2219 | @keyframes oscillate {
2220 |   0% {
2221 |     transform: translateY(0px);
2222 |     opacity: 1;
2223 |   }
2224 | 
2225 |   50% {
2226 |     transform: translateY(-30px);
2227 |     opacity: 0;
2228 |   }
2229 | 
2230 |   100% {
2231 |     transform: translateY(0px);
2232 |     opacity: 1;
2233 |   }
2234 | }
2235 | 
2236 | /* ----------------Loader-35th----------------- */
2237 | .loader35 {
2238 |   width: 80px;
2239 |   height: 80px;
2240 | }
2241 | 
2242 | .loader-35 {
2243 |   transform-origin: center;
2244 |   animation-name: animation;
2245 |   animation-duration: 1.2s;
2246 |   animation-timing-function: cubic-bezier;
2247 |   animation-iteration-count: infinite;
2248 | }
2249 | 
2250 | @keyframes animation {
2251 |   0% {
2252 |     stroke-dasharray: 1 98;
2253 |     stroke-dashoffset: -105;
2254 |   }
2255 | 
2256 |   50% {
2257 |     stroke-dasharray: 80 10;
2258 |     stroke-dashoffset: -160;
2259 |   }
2260 | 
2261 |   100% {
2262 |     stroke-dasharray: 1 98;
2263 |     stroke-dashoffset: -300;
2264 |   }
2265 | }
2266 | 
2267 | /* ----------------Loader-36th----------------- */
2268 | .signal {
2269 |   width: 40px;
2270 |   height: 40px;
2271 |   margin: 15px auto;
2272 |   background-color: rgb(255, 255, 255);
2273 | 
2274 |   border-radius: 100%;
2275 |   -webkit-animation: sk-scaleout 1s infinite ease-in-out;
2276 |   animation: sk-scaleout 1s infinite ease-in-out;
2277 | }
2278 | 
2279 | @-webkit-keyframes sk-scaleout {
2280 |   0% {
2281 |     -webkit-transform: scale(0);
2282 |   }
2283 | 
2284 |   100% {
2285 |     -webkit-transform: scale(1);
2286 |     opacity: 0;
2287 |   }
2288 | }
2289 | 
2290 | @keyframes sk-scaleout {
2291 |   0% {
2292 |     -webkit-transform: scale(0);
2293 |     transform: scale(0);
2294 |   }
2295 | 
2296 |   100% {
2297 |     -webkit-transform: scale(1);
2298 |     transform: scale(1);
2299 |     opacity: 0;
2300 |   }
2301 | }
2302 | 
2303 | /* ----------------Loader-37th----------------- */
2304 | 
2305 | @keyframes loader37 {
2306 |   from {
2307 |     transform: rotate(0);
2308 |   }
2309 | 
2310 |   to {
2311 |     transform: rotate(360deg);
2312 |   }
2313 | }
2314 | 
2315 | @keyframes loader37-part {
2316 |   from {
2317 |     transform: translate(0);
2318 |   }
2319 | 
2320 |   25% {
2321 |     transform: translate(5px);
2322 |     animation-timing-function: cubic-bezier(1, 0, 0.51, 1.58);
2323 |   }
2324 | 
2325 |   50% {
2326 |     transform: translate(10px) scale(1.6);
2327 |     animation-timing-function: ease-in;
2328 |   }
2329 | 
2330 |   75% {
2331 |     transform: translate(5px);
2332 |   }
2333 | }
2334 | 
2335 | @keyframes loader37-part2 {
2336 |   from {
2337 |     transform: translate(20px);
2338 |   }
2339 | 
2340 |   25% {
2341 |     transform: translate(15px);
2342 |     animation-timing-function: cubic-bezier(1, 0, 0.51, 1.58);
2343 |   }
2344 | 
2345 |   50% {
2346 |     transform: translate(10px) scale(1.6);
2347 |     animation-timing-function: ease-in;
2348 |   }
2349 | 
2350 |   75% {
2351 |     transform: translate(15px);
2352 |   }
2353 | }
2354 | 
2355 | .loader37 {
2356 |   height: 20px;
2357 |   width: 30px;
2358 |   margin: 30px auto;
2359 |   animation: loader37 2s linear infinite;
2360 | }
2361 | 
2362 | .loader37:before,
2363 | .loader37:after {
2364 |   content: "";
2365 |   position: absolute;
2366 |   top: 0;
2367 |   bottom: 0;
2368 |   margin: auto;
2369 |   width: 10px;
2370 |   height: 10px;
2371 |   border-radius: 5px;
2372 |   background: #efdfff;
2373 |   transform-origin: 50% 50%;
2374 | }
2375 | 
2376 | .loader37:before {
2377 |   transform: translate(0);
2378 |   animation: loader37-part 1.5s linear infinite;
2379 | }
2380 | 
2381 | .loader37:after {
2382 |   transform: translate(20px);
2383 |   animation: loader37-part2 1.5s linear infinite;
2384 | }
2385 | 
2386 | /* .............Loader-38th............... */
2387 | 
2388 | .loader38 {
2389 |   color: #ffffff;
2390 |   font-size: 30px;
2391 |   overflow: hidden;
2392 |   width: 1em;
2393 |   height: 1em;
2394 |   border-radius: 50%;
2395 |   margin: 25px auto;
2396 |   position: relative;
2397 |   -webkit-transform: translateZ(0);
2398 |   -ms-transform: translateZ(0);
2399 |   transform: translateZ(0);
2400 |   -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
2401 |   animation: load6 1.7s infinite ease, round 1.7s infinite ease;
2402 | }
2403 | 
2404 | @-webkit-keyframes load6 {
2405 |   0% {
2406 |     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
2407 |       0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2408 |   }
2409 | 
2410 |   5%,
2411 |   95% {
2412 |     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
2413 |       0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2414 |   }
2415 | 
2416 |   10%,
2417 |   59% {
2418 |     box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
2419 |       -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
2420 |       -0.297em -0.775em 0 -0.477em;
2421 |   }
2422 | 
2423 |   20% {
2424 |     box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
2425 |       -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
2426 |       -0.749em -0.34em 0 -0.477em;
2427 |   }
2428 | 
2429 |   38% {
2430 |     box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
2431 |       -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
2432 |       -0.82em -0.09em 0 -0.477em;
2433 |   }
2434 | 
2435 |   100% {
2436 |     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
2437 |       0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2438 |   }
2439 | }
2440 | 
2441 | @keyframes load6 {
2442 |   0% {
2443 |     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
2444 |       0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2445 |   }
2446 | 
2447 |   5%,
2448 |   95% {
2449 |     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
2450 |       0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2451 |   }
2452 | 
2453 |   10%,
2454 |   59% {
2455 |     box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
2456 |       -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
2457 |       -0.297em -0.775em 0 -0.477em;
2458 |   }
2459 | 
2460 |   20% {
2461 |     box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
2462 |       -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
2463 |       -0.749em -0.34em 0 -0.477em;
2464 |   }
2465 | 
2466 |   38% {
2467 |     box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
2468 |       -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
2469 |       -0.82em -0.09em 0 -0.477em;
2470 |   }
2471 | 
2472 |   100% {
2473 |     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
2474 |       0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
2475 |   }
2476 | }
2477 | 
2478 | @-webkit-keyframes round {
2479 |   0% {
2480 |     -webkit-transform: rotate(0deg);
2481 |     transform: rotate(0deg);
2482 |   }
2483 | 
2484 |   100% {
2485 |     -webkit-transform: rotate(360deg);
2486 |     transform: rotate(360deg);
2487 |   }
2488 | }
2489 | 
2490 | @keyframes round {
2491 |   0% {
2492 |     -webkit-transform: rotate(0deg);
2493 |     transform: rotate(0deg);
2494 |   }
2495 | 
2496 |   100% {
2497 |     -webkit-transform: rotate(360deg);
2498 |     transform: rotate(360deg);
2499 |   }
2500 | }
2501 | 
2502 | /* -----------Loader-39------------ */
2503 | .loader39 {
2504 |   box-sizing: border-box;
2505 |   display: inline-block;
2506 |   width: 50px;
2507 |   height: 80px;
2508 |   border-top: 5px solid #fff;
2509 |   border-bottom: 5px solid #fff;
2510 |   position: relative;
2511 |   background: linear-gradient(#ff3d00 30px, transparent 0) no-repeat;
2512 |   background-size: 2px 40px;
2513 |   background-position: 50% 0px;
2514 |   animation: spinx 5s linear infinite;
2515 | }
2516 | 
2517 | .loader39:before,
2518 | .loader39:after {
2519 |   content: "";
2520 |   width: 40px;
2521 |   left: 50%;
2522 |   height: 35px;
2523 |   position: absolute;
2524 |   top: 0;
2525 |   transform: translatex(-50%);
2526 |   background: rgba(255, 255, 255, 0.4);
2527 |   border-radius: 0 0 20px 20px;
2528 |   background-size: 100% auto;
2529 |   background-repeat: no-repeat;
2530 |   background-position: 0 0px;
2531 |   animation: lqt 5s linear infinite;
2532 | }
2533 | 
2534 | .loader39:after {
2535 |   top: auto;
2536 |   bottom: 0;
2537 |   border-radius: 20px 20px 0 0;
2538 |   animation: lqb 5s linear infinite;
2539 | }
2540 | 
2541 | @keyframes lqt {
2542 |   0%,
2543 |   100% {
2544 |     background-image: linear-gradient(#ff3d00 40px, transparent 0);
2545 |     background-position: 0% 0px;
2546 |   }
2547 | 
2548 |   50% {
2549 |     background-image: linear-gradient(#ff3d00 40px, transparent 0);
2550 |     background-position: 0% 40px;
2551 |   }
2552 | 
2553 |   50.1% {
2554 |     background-image: linear-gradient(#ff3d00 40px, transparent 0);
2555 |     background-position: 0% -40px;
2556 |   }
2557 | }
2558 | 
2559 | @keyframes lqb {
2560 |   0% {
2561 |     background-image: linear-gradient(#ff3d00 40px, transparent 0);
2562 |     background-position: 0 40px;
2563 |   }
2564 | 
2565 |   100% {
2566 |     background-image: linear-gradient(#ff3d00 40px, transparent 0);
2567 |     background-position: 0 -40px;
2568 |   }
2569 | }
2570 | 
2571 | @keyframes spinx {
2572 |   0%,
2573 |   49% {
2574 |     transform: rotate(0deg);
2575 |     background-position: 50% 36px;
2576 |   }
2577 | 
2578 |   51%,
2579 |   98% {
2580 |     transform: rotate(180deg);
2581 |     background-position: 50% 4px;
2582 |   }
2583 | 
2584 |   100% {
2585 |     transform: rotate(360deg);
2586 |     background-position: 50% 36px;
2587 |   }
2588 | }
2589 | 
2590 | /* ------------loader 40th----------*/
2591 | .loader40 {
2592 |   text-align: center;
2593 |   vertical-align: middle;
2594 |   width: 80px;
2595 |   height: 80px;
2596 |   position: relative;
2597 |   display: flex;
2598 |   background: white;
2599 |   border-radius: 10%;
2600 |   box-shadow: 0px 40px 60px -20px rgba(0, 0, 0, 0.2);
2601 | }
2602 | 
2603 | .loader40 span {
2604 |   display: block;
2605 |   width: 20px;
2606 |   height: 20px;
2607 |   background: #eee;
2608 |   border-radius: 50%;
2609 |   margin: 0 5px;
2610 |   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
2611 | }
2612 | 
2613 | .loader40 span:nth-child(2) {
2614 |   background: #f07e6e;
2615 | }
2616 | 
2617 | .loader40 span:nth-child(3) {
2618 |   background: #84cdfa;
2619 | }
2620 | 
2621 | .loader40 span:nth-child(4) {
2622 |   background: #5ad1cd;
2623 | }
2624 | 
2625 | .loader40 span:not(:last-child) {
2626 |   animation: animate 1.5s linear infinite;
2627 | }
2628 | 
2629 | @keyframes animate {
2630 |   0% {
2631 |     transform: translateX(0);
2632 |   }
2633 | 
2634 |   100% {
2635 |     transform: translateX(20px);
2636 |   }
2637 | }
2638 | 
2639 | .loader40 span:last-child {
2640 |   animation: jump 1.5s ease-in-out infinite;
2641 | }
2642 | 
2643 | @keyframes jump {
2644 |   0% {
2645 |     transform: translate(0, 0);
2646 |   }
2647 | 
2648 |   10% {
2649 |     transform: translate(5px, -5px);
2650 |   }
2651 | 
2652 |   20% {
2653 |     transform: translate(10px, 5px);
2654 |   }
2655 | 
2656 |   30% {
2657 |     transform: translate(15px, -25px);
2658 |   }
2659 | 
2660 |   70% {
2661 |     transform: translate(-75px, -25px);
2662 |   }
2663 | 
2664 |   80% {
2665 |     transform: translate(-70px, 5px);
2666 |   }
2667 | 
2668 |   90% {
2669 |     transform: translate(-65px, -5px);
2670 |   }
2671 | 
2672 |   100% {
2673 |     transform: translate(-60px, 0);
2674 |   }
2675 | }
2676 | 
2677 | /* .............Loader-41th............... */
2678 | 
2679 | .loader41 {
2680 |   position: relative;
2681 |   width: 150px;
2682 |   height: 20px;
2683 |   background-color: rgba(255, 255, 255, 0.2);
2684 | }
2685 | 
2686 | .loader41:before {
2687 |   content: "";
2688 |   position: absolute;
2689 |   background-color: #fff;
2690 |   top: 0px;
2691 |   left: 0px;
2692 |   height: 20px;
2693 |   width: 0px;
2694 |   z-index: 0;
2695 |   opacity: 1;
2696 |   -webkit-transform-origin: 100% 0%;
2697 |   transform-origin: 100% 0%;
2698 |   -webkit-animation: loader41 10s ease-in-out infinite;
2699 |   animation: loader41 10s ease-in-out infinite;
2700 | }
2701 | 
2702 | .loader41:after {
2703 |   content: "LOADING ...";
2704 |   color: #fff;
2705 |   font-weight: 200;
2706 |   font-size: 16px;
2707 |   position: absolute;
2708 |   width: 100%;
2709 |   height: 20px;
2710 |   line-height: 20px;
2711 |   left: 0;
2712 |   top: 0;
2713 | }
2714 | 
2715 | @-webkit-keyframes loader41 {
2716 |   0% {
2717 |     width: 0px;
2718 |   }
2719 | 
2720 |   70% {
2721 |     width: 100%;
2722 |     opacity: 1;
2723 |   }
2724 | 
2725 |   90% {
2726 |     opacity: 0;
2727 |     width: 100%;
2728 |   }
2729 | 
2730 |   100% {
2731 |     opacity: 0;
2732 |     width: 0px;
2733 |   }
2734 | }
2735 | 
2736 | @keyframes loader41 {
2737 |   0% {
2738 |     width: 0px;
2739 |   }
2740 | 
2741 |   70% {
2742 |     width: 100%;
2743 |     opacity: 1;
2744 |   }
2745 | 
2746 |   90% {
2747 |     opacity: 0;
2748 |     width: 100%;
2749 |   }
2750 | 
2751 |   100% {
2752 |     opacity: 0;
2753 |     width: 0px;
2754 |   }
2755 | }
2756 | 
2757 | /* .............Loader 42............... */
2758 | .loader42 {
2759 |   position: relative;
2760 |   width: 120px;
2761 |   height: 90px;
2762 |   margin: 0 auto;
2763 | }
2764 | 
2765 | .loader42:before {
2766 |   content: "";
2767 |   position: absolute;
2768 |   bottom: 30px;
2769 |   left: 51px;
2770 |   height: 25px;
2771 |   width: 25px;
2772 |   border-radius: 50%;
2773 |   background: #ff3d00;
2774 |   animation: loading-bounce 0.5s ease-in-out infinite alternate;
2775 | }
2776 | 
2777 | .loader42:after {
2778 |   content: "";
2779 |   position: absolute;
2780 |   right: 0;
2781 |   top: 0;
2782 |   height: 7px;
2783 |   width: 45px;
2784 |   border-radius: 4px;
2785 |   box-shadow: 0 5px 0 #fff, -35px 50px 0 #fff, -70px 95px 0 #fff;
2786 |   animation: loading-step 1s ease-in-out infinite;
2787 | }
2788 | 
2789 | @keyframes loading-bounce {
2790 |   0% {
2791 |     transform: scale(1, 0.7);
2792 |   }
2793 | 
2794 |   40% {
2795 |     transform: scale(0.8, 1.2);
2796 |   }
2797 | 
2798 |   60% {
2799 |     transform: scale(1, 1);
2800 |   }
2801 | 
2802 |   100% {
2803 |     bottom: 100px;
2804 |   }
2805 | }
2806 | 
2807 | @keyframes loading-step {
2808 |   0% {
2809 |     box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #fff, -35px 50px 0 #fff,
2810 |       -70px 90px 0 #fff;
2811 |   }
2812 | 
2813 |   100% {
2814 |     box-shadow: 0 10px 0 #fff, -35px 50px 0 #fff, -70px 90px 0 #fff,
2815 |       -70px 90px 0 rgba(0, 0, 0, 0);
2816 |   }
2817 | }
2818 | 
2819 | /* .............Loader-43rd............... */
2820 | .loader43 {
2821 |   width: 20px;
2822 |   height: 20px;
2823 |   background: #24bd54;
2824 |   box-shadow: 0 0 60px 15px #24bd54;
2825 |   transform: translate(-80px);
2826 |   clip-path: inset(0);
2827 |   animation: l43-1 0.5s ease-in-out infinite alternate,
2828 |     l43-2 1s ease-in-out infinite;
2829 | }
2830 | 
2831 | @keyframes l43-1 {
2832 |   100% {
2833 |     transform: translateX(80px);
2834 |   }
2835 | }
2836 | 
2837 | @keyframes l43-2 {
2838 |   33% {
2839 |     clip-path: inset(0 0 0 -100px);
2840 |   }
2841 | 
2842 |   50% {
2843 |     clip-path: inset(0 0 0 0);
2844 |   }
2845 | 
2846 |   83% {
2847 |     clip-path: inset(0 -100px 0 0);
2848 |   }
2849 | }
2850 | 
2851 | /* .............Loader-44th............... */
2852 | .loader44 {
2853 |   width: 120px;
2854 |   height: 21px;
2855 |   background: linear-gradient(#000 0 0) left/10px 100% no-repeat #ddd;
2856 |   animation: l44 1s infinite cubic-bezier(0, 0.2, 1, 1);
2857 |   position: relative;
2858 | }
2859 | 
2860 | .loader44:before,
2861 | .loader44:after {
2862 |   content: "";
2863 |   position: absolute;
2864 |   left: 0;
2865 |   right: 0;
2866 |   height: 7px;
2867 |   background: linear-gradient(#000 0 0) left/10px 100% no-repeat #ddd;
2868 |   animation: inherit;
2869 | }
2870 | 
2871 | .loader44:before {
2872 |   top: 0;
2873 |   animation-timing-function: cubic-bezier(0, 0, 1, 1);
2874 | }
2875 | 
2876 | .loader44:after {
2877 |   bottom: 0;
2878 |   animation-timing-function: cubic-bezier(0, 0.4, 1, 1);
2879 | }
2880 | 
2881 | @keyframes l44 {
2882 |   50% {
2883 |     background-position: right;
2884 |   }
2885 | }
2886 | 
2887 | /* .............Loader-45th............... */
2888 | :root {
2889 |   --bg-45: #e3e4e8;
2890 |   --fg-45: #2e3138;
2891 |   --primary-45: #25dff4;
2892 | }
2893 | 
2894 | .loader-45 {
2895 |   width: 80px;
2896 |   height: 100px;
2897 | }
2898 | 
2899 | .hourglass2,
2900 | .hourglass2:before,
2901 | .hourglass2:after {
2902 |   animation-duration: 4s;
2903 |   animation-iteration-count: infinite;
2904 | }
2905 | 
2906 | .hourglass2 {
2907 |   --polygonH: polygon(
2908 |     0% 0%,
2909 |     100% 0%,
2910 |     100% 5.55%,
2911 |     95% 5.55%,
2912 |     95% 28%,
2913 |     60% 46%,
2914 |     60% 54%,
2915 |     95% 72%,
2916 |     95% 94.45%,
2917 |     100% 94.45%,
2918 |     100% 100%,
2919 |     0% 100%,
2920 |     0% 94.45%,
2921 |     5% 94.45%,
2922 |     5% 72%,
2923 |     40% 54%,
2924 |     40% 46%,
2925 |     5% 28%,
2926 |     5% 5.55%,
2927 |     0% 5.55%
2928 |   );
2929 |   animation-name: flip;
2930 |   animation-timing-function: ease-in-out;
2931 |   background-image: linear-gradient(
2932 |     var(--primary-45) 0.5em,
2933 |     #737a8c55 0.5em 8.5em,
2934 |     var(--primary-45) 8.5em
2935 |   );
2936 |   clip-path: var(--polygonH);
2937 |   -webkit-clip-path: var(--polygonH);
2938 |   overflow: hidden;
2939 |   position: relative;
2940 |   width: 100%;
2941 |   height: 100%;
2942 |   z-index: 0;
2943 | }
2944 | 
2945 | .hourglass2:before,
2946 | .hourglass2:after {
2947 |   animation-timing-function: linear;
2948 |   content: "";
2949 |   display: block;
2950 |   position: absolute;
2951 | }
2952 | 
2953 | .hourglass2:before {
2954 |   --polygonB1: polygon(
2955 |     0% 0%,
2956 |     100% 0%,
2957 |     100% 24%,
2958 |     50% 47%,
2959 |     50% 47%,
2960 |     50% 47%,
2961 |     50% 47%,
2962 |     50% 47%,
2963 |     50% 47%,
2964 |     50% 47%,
2965 |     50% 47%,
2966 |     0% 24%
2967 |   );
2968 |   --polygonB2: polygon(
2969 |     0% 4%,
2970 |     100% 4%,
2971 |     100% 24%,
2972 |     55% 45%,
2973 |     55% 100%,
2974 |     55% 100%,
2975 |     55% 100%,
2976 |     45% 100%,
2977 |     45% 100%,
2978 |     45% 100%,
2979 |     45% 45%,
2980 |     0% 24%
2981 |   );
2982 |   --polygonB3: polygon(
2983 |     0% 24%,
2984 |     100% 24%,
2985 |     100% 24%,
2986 |     55% 45%,
2987 |     55% 80%,
2988 |     100% 100%,
2989 |     100% 100%,
2990 |     0% 100%,
2991 |     0% 100%,
2992 |     45% 80%,
2993 |     45% 45%,
2994 |     0% 24%
2995 |   );
2996 |   --polygonB4: polygon(
2997 |     45% 45%,
2998 |     55% 45%,
2999 |     55% 45%,
3000 |     55% 45%,
3001 |     55% 58%,
3002 |     100% 76%,
3003 |     100% 100%,
3004 |     0% 100%,
3005 |     0% 76%,
3006 |     45% 58%,
3007 |     45% 45%,
3008 |     45% 45%
3009 |   );
3010 |   --polygonB5: polygon(
3011 |     50% 53%,
3012 |     50% 53%,
3013 |     50% 53%,
3014 |     50% 53%,
3015 |     50% 53%,
3016 |     100% 76%,
3017 |     100% 100%,
3018 |     0% 100%,
3019 |     0% 76%,
3020 |     50% 53%,
3021 |     50% 53%,
3022 |     50% 53%
3023 |   );
3024 |   animation-name: fill;
3025 |   background-color: var(--fg-45);
3026 |   background-size: 100% 3.6em;
3027 |   clip-path: var(--polygonB1);
3028 |   -webkit-clip-path: var(--polygonB1);
3029 |   top: 0.5em;
3030 |   left: 0.5em;
3031 |   width: 4em;
3032 |   height: 8em;
3033 |   z-index: 1;
3034 | }
3035 | 
3036 | .hourglass2:after {
3037 |   animation-name: glare;
3038 |   background: linear-gradient(
3039 |         90deg,
3040 |         #0000 0.5em,
3041 |         #0003 0.5em 1.5em,
3042 |         #0000 1.5em 3.5em,
3043 |         #fff3 3.5em 4.5em,
3044 |         #fff0 4.5em 6.5em,
3045 |         #0003 6.5em 7.5em,
3046 |         #0000 7.5em
3047 |       )
3048 |       0 0 / 100% 0.5em,
3049 |     linear-gradient(
3050 |         90deg,
3051 |         #0000 0.75em,
3052 |         #0003 0.75em 1.25em,
3053 |         #0000 1.25em 3.75em,
3054 |         #fff3 3.75em 4.25em,
3055 |         #fff0 4.25em 6.75em,
3056 |         #0003 6.75em 7.25em,
3057 |         #0000 7.25em
3058 |       )
3059 |       0 0.5em / 100% 8em,
3060 |     linear-gradient(
3061 |         90deg,
3062 |         #0000 0.5em,
3063 |         #0003 0.5em 1.5em,
3064 |         #0000 1.5em 3.5em,
3065 |         #fff3 3.5em 4.5em,
3066 |         #fff0 4.5em 6.5em,
3067 |         #0003 6.5em 7.5em,
3068 |         #0000 7.5em
3069 |       )
3070 |       0 100% / 100% 0.5em;
3071 |   background-repeat: repeat-x;
3072 |   /* top: 0;
3073 |   left: -3em;
3074 |   width: 200%;
3075 |   height: 100%; */
3076 |   z-index: 2;
3077 | }
3078 | 
3079 | /* Animations */
3080 | @keyframes fill {
3081 |   from {
3082 |     clip-path: var(--polygonB1);
3083 |     -webkit-clip-path: var(--polygonB1);
3084 |   }
3085 | 
3086 |   10% {
3087 |     clip-path: var(--polygonB2);
3088 |     -webkit-clip-path: var(--polygonB2);
3089 |   }
3090 | 
3091 |   45% {
3092 |     clip-path: var(--polygonB3);
3093 |     -webkit-clip-path: var(--polygonB3);
3094 |   }
3095 | 
3096 |   80% {
3097 |     clip-path: var(--polygonB4);
3098 |     -webkit-clip-path: var(--polygonB4);
3099 |   }
3100 | 
3101 |   85%,
3102 |   to {
3103 |     clip-path: var(--polygonB5);
3104 |     -webkit-clip-path: var(--polygonB5);
3105 |   }
3106 | }
3107 | 
3108 | @keyframes glare {
3109 |   from,
3110 |   90% {
3111 |     transform: translateX(0);
3112 |   }
3113 | 
3114 |   to {
3115 |     transform: translateX(3em);
3116 |   }
3117 | }
3118 | 
3119 | @keyframes flip {
3120 |   from,
3121 |   90% {
3122 |     transform: rotate(0);
3123 |   }
3124 | 
3125 |   to {
3126 |     transform: rotate(180deg);
3127 |   }
3128 | }
3129 | 
3130 | /* Dark mode */
3131 | @media (prefers-color-scheme: dark) {
3132 |   :root {
3133 |     --bg-45: #17181c;
3134 |     --fg-45: #c7cad1;
3135 |   }
3136 | }
3137 | 
3138 | /* .............Loader-46th............... */
3139 | .loader-46,
3140 | .loader-46 div {
3141 |   box-sizing: border-box;
3142 | }
3143 | 
3144 | .loader-46 {
3145 |   display: inline-block;
3146 |   position: relative;
3147 |   width: 80px;
3148 |   height: 80px;
3149 | }
3150 | 
3151 | .loader-46 div {
3152 |   position: absolute;
3153 |   top: 33.33333px;
3154 |   width: 13.33333px;
3155 |   height: 13.33333px;
3156 |   border-radius: 50%;
3157 |   background: white;
3158 |   animation-timing-function: cubic-bezier(0, 1, 1, 0);
3159 | }
3160 | 
3161 | .loader-46 div:nth-child(1) {
3162 |   left: 8px;
3163 |   animation: loader-461 0.6s infinite;
3164 | }
3165 | 
3166 | .loader-46 div:nth-child(2) {
3167 |   left: 8px;
3168 |   animation: loader-462 0.6s infinite;
3169 | }
3170 | 
3171 | .loader-46 div:nth-child(3) {
3172 |   left: 32px;
3173 |   animation: loader-462 0.6s infinite;
3174 | }
3175 | 
3176 | .loader-46 div:nth-child(4) {
3177 |   left: 56px;
3178 |   animation: loader-463 0.6s infinite;
3179 | }
3180 | 
3181 | @keyframes loader-461 {
3182 |   0% {
3183 |     transform: scale(0);
3184 |   }
3185 |   100% {
3186 |     transform: scale(1);
3187 |   }
3188 | }
3189 | 
3190 | @keyframes loader-463 {
3191 |   0% {
3192 |     transform: scale(1);
3193 |   }
3194 |   100% {
3195 |     transform: scale(0);
3196 |   }
3197 | }
3198 | 
3199 | @keyframes loader-462 {
3200 |   0% {
3201 |     transform: translate(0, 0);
3202 |   }
3203 |   100% {
3204 |     transform: translate(24px, 0);
3205 |   }
3206 | }
3207 | 
3208 | /* -----------Loader-47th--------- */
3209 | .loader-47 {
3210 |   width: 50px;
3211 |   height: 50px;
3212 |   border: 5px solid #ffffff;
3213 |   animation: loader-47-rotate 2s infinite ease;
3214 | }
3215 | 
3216 | .loader-47 div {
3217 |   width: 100%;
3218 |   background-color: #ffffff;
3219 |   animation: loader-47-fill 2s infinite ease-in;
3220 | }
3221 | 
3222 | @keyframes loader-47-rotate {
3223 |   0% {
3224 |     transform: rotate(0deg);
3225 |   }
3226 | 
3227 |   25% {
3228 |     transform: rotate(180deg);
3229 |   }
3230 | 
3231 |   50% {
3232 |     transform: rotate(180deg);
3233 |   }
3234 | 
3235 |   75% {
3236 |     transform: rotate(360deg);
3237 |   }
3238 | 
3239 |   100% {
3240 |     transform: rotate(360deg);
3241 |   }
3242 | }
3243 | 
3244 | @keyframes loader-47-fill {
3245 |   0% {
3246 |     height: 0%;
3247 |   }
3248 | 
3249 |   25% {
3250 |     height: 0%;
3251 |   }
3252 | 
3253 |   50% {
3254 |     height: 100%;
3255 |   }
3256 | 
3257 |   75% {
3258 |     height: 100%;
3259 |   }
3260 | 
3261 |   100% {
3262 |     height: 0%;
3263 |   }
3264 | }
3265 | 
3266 | /* .............Loader-48th............... */
3267 | 
3268 | .loader48 {
3269 |   display: inline-block;
3270 |   position: relative;
3271 |   width: 50px;
3272 |   height: 50px;
3273 |   -webkit-animation: loader48 1.5s linear infinite;
3274 |   animation: loader48 1.5s linear infinite;
3275 | }
3276 | .loader48:before,
3277 | .loader48:after {
3278 |   position: absolute;
3279 |   content: "";
3280 |   left: 30px;
3281 |   top: 0;
3282 |   width: 30px;
3283 |   height: 50px;
3284 |   background: white;
3285 |   -moz-border-radius: 30px 30px 0 0;
3286 |   border-radius: 30px 30px 0 0;
3287 |   -webkit-transform: rotate(-45deg);
3288 |   -moz-transform: rotate(-45deg);
3289 |   -ms-transform: rotate(-45deg);
3290 |   -o-transform: rotate(-45deg);
3291 |   transform: rotate(-45deg);
3292 |   -webkit-transform-origin: 0 100%;
3293 |   -moz-transform-origin: 0 100%;
3294 |   -ms-transform-origin: 0 100%;
3295 |   -o-transform-origin: 0 100%;
3296 |   transform-origin: 0 100%;
3297 | }
3298 | .loader48:after {
3299 |   left: 0;
3300 |   -webkit-transform: rotate(45deg);
3301 |   -moz-transform: rotate(45deg);
3302 |   -ms-transform: rotate(45deg);
3303 |   -o-transform: rotate(45deg);
3304 |   transform: rotate(45deg);
3305 |   -webkit-transform-origin: 100% 100%;
3306 |   -moz-transform-origin: 100% 100%;
3307 |   -ms-transform-origin: 100% 100%;
3308 |   -o-transform-origin: 100% 100%;
3309 |   transform-origin: 100% 100%;
3310 | }
3311 | 
3312 | @keyframes loader48 {
3313 |   0% {
3314 |     transform: scale(0, 0);
3315 |     opacity: 0;
3316 |   }
3317 |   100% {
3318 |     transform: scale(1, 1);
3319 |     opacity: 1;
3320 |   }
3321 | }
3322 | @-webkit-keyframes loader48 {
3323 |   0% {
3324 |     -webkit-transform: scale(0, 0);
3325 |     opacity: 0;
3326 |   }
3327 |   100% {
3328 |     -webkit-transform: scale(1, 1);
3329 |     opacity: 1;
3330 |   }
3331 | }
3332 | 
3333 | /* -----------Loader-49th--------- */
3334 | 
3335 | .loader-49 {
3336 |   width: 120px;
3337 |   height: 100px;
3338 |   display: flex;
3339 |   justify-content: center;
3340 |   align-items: center;
3341 | }
3342 | 
3343 | .loader-49-text {
3344 |   position: relative;
3345 |   font-family: "Poppins", sans-serif;
3346 |   text-transform: uppercase;
3347 |   color: #222;
3348 |   border-bottom: 10px solid #222;
3349 |   letter-spacing: 0.05rem;
3350 | }
3351 | .loader-49-text::before {
3352 |   content: attr(data-text);
3353 |   position: absolute;
3354 |   top: 0;
3355 |   left: 0;
3356 |   width: 100%;
3357 |   color: #03a9f4;
3358 |   overflow: hidden;
3359 |   border-bottom: 10px solid #03a9f4;
3360 |   animation: loader-49-animate 10s linear infinite;
3361 | }
3362 | @keyframes loader-49-animate {
3363 |   0% {
3364 |     width: 0;
3365 |   }
3366 |   100% {
3367 |     width: 100%;
3368 |   }
3369 | }
3370 | 
3371 | /* .............Loader-50th............... */
3372 | .loader-50 {
3373 |   width: 120px;
3374 |   height: 20px;
3375 |   background: repeating-linear-gradient(
3376 |       90deg,
3377 |       white 0 calc(25% - 5px),
3378 |       transparent 0 25%
3379 |     )
3380 |     left/calc(4 * 100%/3) 100%;
3381 |   animation: i1 0.5s infinite linear;
3382 | }
3383 | @keyframes i1 {
3384 |   100% {
3385 |     background-position: right;
3386 |   }
3387 | }
3388 | 
3389 | /* .............Loader-51th............... */
3390 | .loader-51 {
3391 |   position: relative;
3392 |   width: 200px;
3393 |   height: 200px;
3394 |   transform-style: preserve-3d;
3395 |   transform: perspective(500px) rotateX(60deg);
3396 | }
3397 | .loader-51 > span {
3398 |   position: absolute;
3399 |   display: block;
3400 |   border: 2px solid #fff;
3401 |   box-sizing: border-box;
3402 |   border-radius: 50%;
3403 |   animation: animate-loader-51 3s ease-in-out infinite;
3404 | }
3405 | @keyframes animate-loader-51 {
3406 |   0%,
3407 |   100% {
3408 |     transform: translateZ(-50px);
3409 |   }
3410 |   50% {
3411 |     transform: translateZ(50px);
3412 |   }
3413 | }
3414 | .loader-51 > span:nth-child(1) {
3415 |   top: 0px;
3416 |   left: 0px;
3417 |   right: 0px;
3418 |   bottom: 0px;
3419 |   animation-delay: 1.44s;
3420 | }
3421 | .loader-51 > span:nth-child(2) {
3422 |   top: 6px;
3423 |   left: 6px;
3424 |   right: 6px;
3425 |   bottom: 6px;
3426 |   animation-delay: 1.3s;
3427 | }
3428 | .loader-51 > span:nth-child(3) {
3429 |   top: 12px;
3430 |   left: 12px;
3431 |   right: 12px;
3432 |   bottom: 12px;
3433 |   animation-delay: 1.2s;
3434 | }
3435 | .loader-51 > span:nth-child(4) {
3436 |   top: 18px;
3437 |   left: 18px;
3438 |   right: 18px;
3439 |   bottom: 18px;
3440 |   animation-delay: 1.1s;
3441 | }
3442 | .loader-51 > span:nth-child(5) {
3443 |   top: 24px;
3444 |   left: 24px;
3445 |   right: 24px;
3446 |   bottom: 24px;
3447 |   animation-delay: 1s;
3448 | }
3449 | .loader-51 > span:nth-child(6) {
3450 |   top: 30px;
3451 |   left: 30px;
3452 |   right: 30px;
3453 |   bottom: 30px;
3454 |   animation-delay: 0.9s;
3455 | }
3456 | .loader-51 > span:nth-child(7) {
3457 |   top: 36px;
3458 |   left: 36px;
3459 |   right: 36px;
3460 |   bottom: 36px;
3461 |   animation-delay: 0.8s;
3462 | }
3463 | .loader-51 > span:nth-child(8) {
3464 |   top: 42px;
3465 |   left: 42px;
3466 |   right: 42px;
3467 |   bottom: 42px;
3468 |   animation-delay: 0.7s;
3469 | }
3470 | .loader-51 > span:nth-child(9) {
3471 |   top: 48px;
3472 |   left: 48px;
3473 |   right: 48px;
3474 |   bottom: 48px;
3475 |   animation-delay: 0.6s;
3476 | }
3477 | .loader-51 > span:nth-child(10) {
3478 |   top: 54px;
3479 |   left: 54px;
3480 |   right: 54px;
3481 |   bottom: 54px;
3482 |   animation-delay: 0.5s;
3483 | }
3484 | .loader-51 > span:nth-child(11) {
3485 |   top: 60px;
3486 |   left: 60px;
3487 |   right: 60px;
3488 |   bottom: 60px;
3489 |   animation-delay: 0.4s;
3490 | }
3491 | .loader-51 > span:nth-child(12) {
3492 |   top: 66px;
3493 |   left: 66px;
3494 |   right: 66px;
3495 |   bottom: 66px;
3496 |   animation-delay: 0.3s;
3497 | }
3498 | .loader-51 > span:nth-child(13) {
3499 |   top: 72px;
3500 |   left: 72px;
3501 |   right: 72px;
3502 |   bottom: 72px;
3503 |   animation-delay: 0.2s;
3504 | }
3505 | .loader-51 > span:nth-child(14) {
3506 |   top: 78px;
3507 |   left: 78px;
3508 |   right: 78px;
3509 |   bottom: 78px;
3510 |   animation-delay: 0.1s;
3511 | }
3512 | .loader-51 > span:nth-child(15) {
3513 |   top: 84px;
3514 |   left: 84px;
3515 |   right: 84px;
3516 |   bottom: 84px;
3517 |   animation-delay: 0s;
3518 | }
3519 | 
3520 | /* .............Loader-nth............... */
3521 | /* add the css for the Loader-nth... */
3522 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta
  7 |       name="css-loaders"
  8 |       content="css-loaders, css-spinners, loading-css..."
  9 |     />
 10 |     <meta
 11 |       name="css-spinners"
 12 |       content="css-loaders, css-spinners, loading-css..."
 13 |     />
 14 |     <meta
 15 |       name="loading-css"
 16 |       content="css-loaders, css-spinners, loading-css..."
 17 |     />
 18 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 19 |     <link rel="stylesheet" href="./index.css" />
 20 |     <title>css-loaders</title>
 21 |   </head>
 22 | 
 23 |   <body>
 24 |     <h1 class="main-heading">Simple CSS-LOADERS ⌛</h1>
 25 |     <div class="main-area">
 26 |       Created By
 27 |       <a href="https://github.com/rohit8020" target="_blank">
 28 |         <img
 29 |           title="Rohit Gangwar | Github:rohit8020"
 30 |           src="./rohit_profile_img.png"
 31 |           alt="https://avatars.githubusercontent.com/u/76878634?v=4"
 32 |       /></a>
 33 |       <br />
 34 |       This is a open-source project, You can contribute here...
 35 |       <a href="https://github.com/rohit8020/css-loaders" target="_blank"
 36 |         ><img
 37 |           title="Contribute to the project!"
 38 |           src="./github.png"
 39 |           alt="https://i.pinimg.com/originals/48/e0/73/48e07378e01dd719c060c1f2f2b5cb00.png"
 40 |       /></a>
 41 |     </div>
 42 |     <div id="demo-modal" class="modal">
 43 |       <div class="modal__content">
 44 |         <h1>Copy Code</h1>
 45 |         <p id="code-paragraph">Code...</p>
 46 |         <a href="#" class="modal__close">&times;</a>
 47 |       </div>
 48 |     </div>
 49 |     <div class="container">
 50 |       <!-- Loader-1 -->
 51 |       <div class="loader-box">
 52 |         <div class="loader-1">
 53 |           <div></div>
 54 |           <div></div>
 55 |           <div></div>
 56 |         </div>
 57 |         <a href="#demo-modal" id="1" class="show-code-btn">Show Code</a>
 58 |       </div>
 59 | 
 60 |       <!-- Loader-2 -->
 61 |       <div class="loader-box">
 62 |         <div class="loader-2"></div>
 63 |         <a href="#demo-modal" id="2" class="show-code-btn">Show Code</a>
 64 |       </div>
 65 | 
 66 |       <!-- Loader-3 -->
 67 |       <div class="loader-box">
 68 |         <div class="loader-3 white"></div>
 69 |         <a href="#demo-modal" id="3" class="show-code-btn">Show Code</a>
 70 |       </div>
 71 | 
 72 |       <!-- Loader-4 -->
 73 |       <div class="loader-box">
 74 |         <div class="loader-4">
 75 |           <div class="dot-loader"></div>
 76 |           <div class="dot-loader dot-loader--2"></div>
 77 |           <div class="dot-loader dot-loader--3"></div>
 78 |         </div>
 79 |         <a href="#demo-modal" id="4" class="show-code-btn">Show Code</a>
 80 |       </div>
 81 | 
 82 |       <!-- Loader-5 -->
 83 |       <div class="loader-box">
 84 |         <div class="loader_5">
 85 |           <div class="loader5_int"></div>
 86 |         </div>
 87 |         <a href="#demo-modal" id="5" class="show-code-btn">Show Code</a>
 88 |       </div>
 89 | 
 90 |       <!-- Loader-6 -->
 91 |       <div class="loader-box">
 92 |         <div class="loader-6">
 93 |           <div class="set-one">
 94 |             <div class="circle"></div>
 95 |             <div class="circle"></div>
 96 |           </div>
 97 |           <div class="set-two">
 98 |             <div class="circle"></div>
 99 |             <div class="circle"></div>
100 |           </div>
101 |         </div>
102 |         <a href="#demo-modal" id="6" class="show-code-btn">Show Code</a>
103 |       </div>
104 | 
105 |       <!-- Loader-7 -->
106 |       <div class="loader-box">
107 |         <div class="loader-7">
108 |           <div class="dot-loader-7"></div>
109 |           <div class="dot-loader-7"></div>
110 |           <div class="dot-loader-7"></div>
111 |           <span class="loading-7">Loading...</span>
112 |         </div>
113 |         <a href="#demo-modal" id="7" class="show-code-btn">Show Code</a>
114 |       </div>
115 |       <!-- Loader-8 -->
116 |       <div class="loader-box">
117 |         <div class="loader-8">
118 |           <div class="loader-hourglass"></div>
119 |         </div>
120 |         <a href="#demo-modal" id="8" class="show-code-btn">Show Code</a>
121 |       </div>
122 | 
123 |       <!-- Loader-9 -->
124 |       <div class="loader-box">
125 |         <div class="loader-9">
126 |           <div class="loader-ripple">
127 |             <div></div>
128 |             <div></div>
129 |           </div>
130 |         </div>
131 |         <a href="#demo-modal" id="9" class="show-code-btn">Show Code</a>
132 |       </div>
133 | 
134 |       <!-- Loader-10 -->
135 |       <div class="loader-box">
136 |         <div class="loader-10">
137 |           <div class="l10"></div>
138 |         </div>
139 |         <a href="#demo-modal" id="10" class="show-code-btn">Show Code</a>
140 |       </div>
141 | 
142 |       <!-- Loader-11 -->
143 |       <div class="loader-box">
144 |         <div class="loader-11">
145 |           <div class="loader-circle">
146 |             <div></div>
147 |           </div>
148 |         </div>
149 |         <a href="#demo-modal" id="11" class="show-code-btn">Show Code</a>
150 |       </div>
151 | 
152 |       <!-- Loader-12 -->
153 |       <div class="loader-box">
154 |         <div class="loader-12">
155 |           <span class="loader_arrow"></span>
156 |         </div>
157 |         <a href="#demo-modal" id="12" class="show-code-btn">Show Code</a>
158 |       </div>
159 | 
160 |       <!-- Loader-13-->
161 |       <div class="loader-box">
162 |         <div class="loader-13">
163 |           <div class="loader13">
164 |             <div class="loader13">
165 |               <div class="loader13">
166 |                 <div class="loader13">
167 |                   <div class="loader13">
168 |                     <div class="loader13">
169 |                       <div class="loader13">
170 |                         <div class="loader13">
171 |                           <div class="loader13"></div>
172 |                         </div>
173 |                       </div>
174 |                     </div>
175 |                   </div>
176 |                 </div>
177 |               </div>
178 |             </div>
179 |           </div>
180 |         </div>
181 |         <a href="#demo-modal" id="13" class="show-code-btn">Show Code</a>
182 |       </div>
183 | 
184 |       <!-- Loader-14 -->
185 |       <div class="loader-box">
186 |         <div class="loader-14">
187 |           <div class="l-14"></div>
188 |         </div>
189 |         <a href="#demo-modal" id="14" class="show-code-btn">Show Code</a>
190 |       </div>
191 | 
192 |       <!-- Loader-15 -->
193 |       <div class="loader-box">
194 |         <div class="spinner-container">
195 |           <div class="spinner"></div>
196 |         </div>
197 | 
198 |         <a href="#demo-modal" id="15" class="show-code-btn">Show Code</a>
199 |       </div>
200 | 
201 |       <!-- Loader-16 -->
202 |       <div class="loader-box">
203 |         <div class="loader-16"></div>
204 |         <span class="sat"> loading... </span>
205 |         <a href="#demo-modal" id="16" class="show-code-btn">Show Code</a>
206 |       </div>
207 | 
208 |       <!-- Loader-17 -->
209 |       <div class="loader-box">
210 |         <div class="loader-17">
211 |           <span class="pp" style="--i: 1"></span>
212 |           <span class="pp" style="--i: 2"></span>
213 |           <span class="pp" style="--i: 3"></span>
214 |           <span class="pp" style="--i: 4"></span>
215 |           <span class="pp" style="--i: 5"></span>
216 |           <span class="pp" style="--i: 6"></span>
217 |           <span class="pp" style="--i: 7"></span>
218 |           <span class="pp" style="--i: 8"></span>
219 |           <span class="pp" style="--i: 9"></span>
220 |           <span class="pp" style="--i: 10"></span>
221 |           <span class="pp" style="--i: 11"></span>
222 |           <span class="pp" style="--i: 12"></span>
223 |           <span class="pp" style="--i: 13"></span>
224 |           <span class="pp" style="--i: 14"></span>
225 |           <span class="pp" style="--i: 15"></span>
226 |           <span class="pp" style="--i: 16"></span>
227 |           <span class="pp" style="--i: 17"></span>
228 |           <span class="pp" style="--i: 18"></span>
229 |           <span class="pp" style="--i: 19"></span>
230 |           <span class="pp" style="--i: 20"></span>
231 |           <a href="#demo-modal" id="17" class="show-code-btn show">Show Code</a>
232 |         </div>
233 |       </div>
234 | 
235 |       <!-- Loader-18 -->
236 |       <div class="loader-box">
237 |         <div class="loader-18">
238 |           <div class="loader-placeholder">
239 |             <div class="indicator"></div>
240 |           </div>
241 |         </div>
242 |         <a href="#demo-modal" id="18" class="show-code-btn">Show Code</a>
243 |       </div>
244 | 
245 |       <!-- Loader-19 -->
246 |       <div class="loader-box">
247 |         <div class="loading">
248 |           <div></div>
249 |         </div>
250 |         <a href="#demo-modal" id="19" class="show-code-btn">Show Code</a>
251 |       </div>
252 | 
253 |       <!--Loader-20-->
254 |       <div class="loader-box">
255 |         <div class="loader-20">
256 |           <span class="word1">l</span>
257 |           <span class="word2">o</span>
258 |           <span class="word3">a</span>
259 |           <span class="word4">d</span>
260 |           <span class="word5">i</span>
261 |           <span class="word6">n</span>
262 |           <span class="word7">g</span>
263 |         </div>
264 |         <a href="#demo-modal" id="20" class="show-code-btn">Show Code</a>
265 |       </div>
266 |       <!-- Loader 21-->
267 | 
268 |       <div class="loader-box">
269 |         <div class="loader21">
270 |           <svg
271 |             class="svg"
272 |             xmlns="http://www.w3.org/2000/svg"
273 |             viewBox="0 0 16 13.86"
274 |           >
275 |             <defs>
276 |               <polygon
277 |                 id="hexagon"
278 |                 points="4.29 13.36 0.58 6.93 4.29 0.5 11.71 0.5 15.42 6.93 11.71 13.36 4.29 13.36"
279 |               />
280 |               <g id="inner-shadow" transform="translate(-2, -2)">
281 |                 <use
282 |                   xlink:href="#hexagon"
283 |                   class="inner-shadow"
284 |                   transform="scale(1.25)"
285 |                 />
286 |               </g>
287 |               <g id="inner-shadow-animated" transform="translate(-2, -2)">
288 |                 <use
289 |                   xlink:href="#hexagon"
290 |                   class="inner-shadow--animated"
291 |                   transform="scale(1.25)"
292 |                 />
293 |               </g>
294 |             </defs>
295 |             <mask id="mask">
296 |               <rect x="-4" y="-4" width="24" height="24" fill="black" />
297 |               <use xlink:href="#hexagon" fill="white" />
298 |             </mask>
299 |             <use xlink:href="#hexagon" class="fill" />
300 |             <use xlink:href="#hexagon" class="fill--animated" />
301 |             <use xlink:href="#inner-shadow" mask="url(#mask)" />
302 | 
303 |             <use xlink:href="#inner-shadow-animated" mask="url(#mask)" />
304 |           </svg>
305 |         </div>
306 |         <a href="#demo-modal" id="21" class="show-code-btn">Show Code</a>
307 |       </div>
308 | 
309 |       <!-- Loader 22 -->
310 |       <div class="loader-box">
311 |         <div>
312 |           <span class="dot" id="dot1"></span>
313 |           <span class="dot" id="dot2"></span>
314 |           <span class="dot" id="dot3"></span>
315 |           <span class="dot" id="dot4"></span>
316 |         </div>
317 |         <a href="#demo-modal" id="22" class="show-code-btn">Show Code</a>
318 |       </div>
319 | 
320 |       <!-- Loader-23 -->
321 |       <div class="loader-box">
322 |         <div class="loader-23">
323 |           <div class="loading">
324 |             <span class="loader"></span>
325 |             <span class="loader"></span>
326 |             <span class="loader"></span>
327 |           </div>
328 |         </div>
329 |         <a href="#demo-modal" id="23" class="show-code-btn">Show Code</a>
330 |       </div>
331 | 
332 |       <!-- Loader-24 -->
333 |       <div class="loader-box">
334 |         <div class="loader-24"></div>
335 |         <a href="#demo-modal" id="24" class="show-code-btn">Show Code</a>
336 |       </div>
337 | 
338 |       <!-- Loader-25 -->
339 |       <div class="loader-box">
340 |         <div class="loader-25"></div>
341 |         <a href="#demo-modal" id="25" class="show-code-btn">Show Code</a>
342 |       </div>
343 | 
344 |       <!-- Loader 26 -->
345 |       <div class="loader-box">
346 |         <div class="pixels">
347 |           <span></span>
348 |           <span></span>
349 |           <span></span>
350 |           <span></span>
351 |           <span></span>
352 |           <span></span>
353 |           <span></span>
354 |         </div>
355 |         <a href="#demo-modal" id="26" class="show-code-btn">Show Code</a>
356 |       </div>
357 | 
358 |       <!-- Loader 27 -->
359 |       <div class="loader-box">
360 |         <div class="loader-27">
361 |           <div class="lds-spinner">
362 |             <div></div>
363 |             <div></div>
364 |             <div></div>
365 |             <div></div>
366 |             <div></div>
367 |             <div></div>
368 |             <div></div>
369 |             <div></div>
370 |             <div></div>
371 |             <div></div>
372 |             <div></div>
373 |             <div></div>
374 |           </div>
375 |         </div>
376 |         <a href="#demo-modal" id="27" class="show-code-btn">Show Code</a>
377 |       </div>
378 | 
379 |       <!-- Loader-28 -->
380 |       <div class="loader-box">
381 |         <div class="loader-28">
382 |           <div class="lds-spinner"></div>
383 |         </div>
384 |         <a href="#demo-modal" id="28" class="show-code-btn">Show Code</a>
385 |       </div>
386 | 
387 |       <!-- Loader-29 -->
388 |       <div class="loader-box">
389 |         <div class="loader-29">
390 |           <div class="wave"></div>
391 |           <div class="wave"></div>
392 |           <div class="wave"></div>
393 |           <div class="wave"></div>
394 |           <div class="wave"></div>
395 |           <div class="wave"></div>
396 |           <div class="wave"></div>
397 |           <div class="wave"></div>
398 |           <div class="wave"></div>
399 |           <div class="wave"></div>
400 |         </div>
401 |         <a href="#demo-modal" id="29" class="show-code-btn">Show Code</a>
402 |       </div>
403 | 
404 |       <!-- Loader-30 -->
405 |       <div class="loader-box">
406 |         <div class="loader-30">
407 |           <div class="color"></div>
408 |         </div>
409 | 
410 |         <a href="#demo-modal" id="30" class="show-code-btn">Show Code</a>
411 |       </div>
412 | 
413 |       <!-- Loader 31 -->
414 |       <div class="loader-box">
415 |         <div class="loader-31">
416 |           <div class="loader31">
417 |             <div class="loader__bar bar"></div>
418 |             <div class="loader__bar bar"></div>
419 |             <div class="loader__bar bar"></div>
420 |             <div class="loader__bar bar"></div>
421 |             <div class="loader__bar bar"></div>
422 |             <div class="loader__ball"></div>
423 |           </div>
424 |         </div>
425 |         <a href="#demo-modal" id="31" class="show-code-btn">Show Code</a>
426 |       </div>
427 | 
428 |       <!-- Loader 32 -->
429 |       <div class="loader-box">
430 |         <div class="loader-32">
431 |           <div class="loader32 loadern"></div>
432 |         </div>
433 |         <a href="#demo-modal" id="32" class="show-code-btn">Show Code</a>
434 |       </div>
435 | 
436 |       <!--Loader 33-->
437 |       <div class="loader-box">
438 |         <div class="loader-33">
439 |           <div class="lds-heart">
440 |             <div></div>
441 |           </div>
442 |         </div>
443 |         <a href="#demo-modal" id="33" class="show-code-btn">Show Code</a>
444 |       </div>
445 | 
446 |       <!--Loader 34-->
447 |       <div class="loader-box">
448 |         <div class="loader-34">
449 |           <span class="loader34_circle_1"></span>
450 |           <span class="loader34_circle_2"></span>
451 |           <span class="loader34_circle_3"></span>
452 |           <span class="loader34_circle_4"></span>
453 |           <span class="loader34_circle_5"></span>
454 |         </div>
455 |         <a href="#demo-modal" id="34" class="show-code-btn">Show Code</a>
456 |       </div>
457 | 
458 |       <!-- Loader 35 -->
459 |       <div class="loader-box">
460 |         <div class="loader35">
461 |           <svg viewBox="0 0 100 100">
462 |             <defs>
463 |               <filter id="shadow">
464 |                 <feDropShadow
465 |                   dx="0"
466 |                   dy="0"
467 |                   stdDeviation="1.5"
468 |                   flood-color="#fc6767"
469 |                 />
470 |               </filter>
471 |             </defs>
472 |             <circle
473 |               class="loader-35"
474 |               style="
475 |                 fill: transparent;
476 |                 stroke: #ffffff;
477 |                 stroke-width: 7px;
478 |                 stroke-linecap: round;
479 |                 filter: url(#shadow);
480 |               "
481 |               cx="50"
482 |               cy="50"
483 |               r="45"
484 |             />
485 |           </svg>
486 |         </div>
487 |         <a href="#demo-modal" id="35" class="show-code-btn">Show Code</a>
488 |       </div>
489 | 
490 |       <!--Loader 36-->
491 |       <div class="loader-box">
492 |         <div class="loader-36">
493 |           <div class="signal">
494 |             <div></div>
495 |           </div>
496 |         </div>
497 |         <a href="#demo-modal" id="36" class="show-code-btn">Show Code</a>
498 |       </div>
499 | 
500 |       <!-- Loader-37 -->
501 |       <div class="loader-box">
502 |         <div class="loader-37">
503 |           <div class="loader loader37"></div>
504 |         </div>
505 |         <a href="#demo-modal" id="37" class="show-code-btn">Show Code</a>
506 |       </div>
507 | 
508 |       <!-- Loader-38 -->
509 |       <div class="loader-box">
510 |         <div class="loader38"></div>
511 |         <a href="#demo-modal" id="38" class="show-code-btn">Show Code</a>
512 |       </div>
513 | 
514 |       <!-- Loader-39 -->
515 |       <div class="loader-box">
516 |         <span class="loader39"></span>
517 |         <a href="#demo-modal" id="39" class="show-code-btn">Show Code</a>
518 |       </div>
519 | 
520 |       <!-- Loader-40 -->
521 |       <div class="loader-box">
522 |         <div class="loader40">
523 |           <span></span>
524 |           <span></span>
525 |           <span></span>
526 |           <span></span>
527 |           <span></span>
528 |         </div>
529 |         <a href="#demo-modal" id="40" class="show-code-btn">Show Code</a>
530 |       </div>
531 | 
532 |       <!-- Loader-41 -->
533 |       <div class="loader-box">
534 |         <div class="loader41"></div>
535 |         <a href="#demo-modal" id="41" class="show-code-btn">Show Code</a>
536 |       </div>
537 | 
538 |       <!-- Loader-42 -->
539 |       <div class="loader-box">
540 |         <div class="loader42"></div>
541 |         <a href="#demo-modal" id="42" class="show-code-btn">Show Code</a>
542 |       </div>
543 | 
544 |       <!-- Loader-43 -->
545 |       <div class="loader-box">
546 |         <div class="loader43"></div>
547 |         <a href="#demo-modal" id="43" class="show-code-btn">Show Code</a>
548 |       </div>
549 | 
550 |       <!-- Loader-44 -->
551 |       <div class="loader-box">
552 |         <div class="loader44"></div>
553 |         <a href="#demo-modal" id="44" class="show-code-btn">Show Code</a>
554 |       </div>
555 | 
556 |       <!-- Loader-45-->
557 |       <div class="loader-box">
558 |         <div class="loader-45">
559 |           <div class="hourglass2"></div>
560 |         </div>
561 |         <a href="#demo-modal" id="45" class="show-code-btn">Show Code</a>
562 |       </div>
563 | 
564 |       <!-- Loader-46 -->
565 |       <div class="loader-box">
566 |         <div class="loader-46">
567 |           <div></div>
568 |           <div></div>
569 |           <div></div>
570 |           <div></div>
571 |         </div>
572 |         <a href="#demo-modal" id="46" class="show-code-btn">Show Code</a>
573 |       </div>
574 | 
575 |       <!-- Loader-47 -->
576 |       <div class="loader-box">
577 |         <div class="loader-47">
578 |           <div></div>
579 |         </div>
580 |         <a href="#demo-modal" id="47" class="show-code-btn">Show Code</a>
581 |       </div>
582 | 
583 |       <!-- Loader-48 -->
584 |       <div class="loader-box">
585 |         <div class="loader48"></div>
586 |         <a href="#demo-modal" id="48" class="show-code-btn">Show Code</a>
587 |       </div>
588 | 
589 |       <!-- Loader-49 -->
590 |       <div class="loader-box">
591 |         <div class="loader-49">
592 |           <h3 class="loader-49-text" data-text="Loading...">Loading...</h3>
593 |         </div>
594 |         <a href="#demo-modal" id="49" class="show-code-btn">Show Code</a>
595 |       </div>
596 | 
597 |       <!-- Loader-50 -->
598 |       <div class="loader-box">
599 |         <div class="loader-50"></div>
600 |         <a href="#demo-modal" id="50" class="show-code-btn">Show Code</a>
601 |       </div>
602 | 
603 |       <!-- Loader-51 -->
604 |       <div class="loader-box">
605 |         <div class="loader-51">
606 |           <span></span>
607 |           <span></span>
608 |           <span></span>
609 |           <span></span>
610 |           <span></span>
611 |           <span></span>
612 |           <span></span>
613 |           <span></span>
614 |           <span></span>
615 |           <span></span>
616 |           <span></span>
617 |           <span></span>
618 |           <span></span>
619 |           <span></span>
620 |           <span></span>
621 |         </div>
622 |         <a href="#demo-modal" id="51" class="show-code-btn">Show Code</a>
623 |       </div>
624 | 
625 |       <!-- Loader-n -->
626 |       <!-- <div class="loader-box">
627 |         <div class="loader-n">
628 |           <div></div>
629 |           <div></div>
630 |           .....
631 |           .....
632 |         </div>
633 |         The id should be n i.e. if nth loader then write id="n"
634 |         <a href="#demo-modal" id="n" class="show-code-btn">Show Code</a>
635 |       </div> -->
636 |       <!--
637 |         You can add the loader HTML code here and add the css code inside the
638 |         index.css file
639 |       -->
640 |       <div class="loader-box">More to add...</div>
641 |     </div>
642 |     <footer>
643 |       <p class="footer">© rohit8020(Rohit Gangwar)</p>
644 |     </footer>
645 |     <script src="./codes.js"></script>
646 |     <script src="./index.js"></script>
647 |   </body>
648 | </html>
649 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | //There is no need to touch below code, You just have to add your loader's code 
 2 | // inside the codes array i.e in the file codes.js
 3 | let showcode = document.querySelectorAll(".show-code-btn");
 4 | let code_para = document.querySelector("#code-paragraph");
 5 | showcode.forEach((btn) => {
 6 |   btn.addEventListener("click", () => {
 7 |     code_para.innerText = codes.find((c) => c.id == btn.id).code;
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/rohit_profile_img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rohit8020/css-loaders/7d0e5cc3cee6a4ea661216044d68952311a284c3/rohit_profile_img.png


--------------------------------------------------------------------------------
/website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rohit8020/css-loaders/7d0e5cc3cee6a4ea661216044d68952311a284c3/website.png


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