├── LICENSE ├── README.md ├── browserconfig.xml ├── css └── styles.css ├── images ├── Cooking.mp4 ├── Frame 5.png ├── Loader-one.png ├── Loader-screen.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── codepen.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── git.png ├── loader.png ├── mstile-150x150.png └── safari-pinned-tab.svg ├── index.html ├── js ├── app.js └── loaders │ ├── bubble.js │ ├── circle.js │ ├── graph.js │ ├── line.js │ ├── objects.js │ ├── progress.js │ ├── rect.js │ ├── skeleton.js │ └── text.js ├── scss └── styles.scss └── site.webmanifest /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Vineeth.TR 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 | # CSS Loaders & Spinners 2 | A general situation that we all might face while going through websites/apps is to wait for some progress or something to get loaded. A most simple solution in such scenarios is to use a loader or spinner to indicate users that something is loading in the background. 3 | Considering this, I tried to create a library having a collection of such loaders/spinners. There are no image dependencies for this library. It's developed using pure CSS. Hence it will load fast and is easily customizable too. 4 | 5 | [![image](https://user-images.githubusercontent.com/5153908/140635756-e2a4d043-d86b-4748-b006-7db8e7e03079.png) 6 | ](https://cssloaders.github.io) 7 | 8 | 9 | 10 | ![CSS loaders and spinner](https://user-images.githubusercontent.com/5153908/140634495-3ae7b6ae-8535-4e95-b76f-a4420029ca0d.gif) 11 | 12 | 13 | 14 | ## HTML 15 | 16 | Each loader has been build on top of a single html tag, so that it is easily portable. Hence more convenient to be intrgrate with projects 17 | 18 | ```html 19 | 20 |
21 | 22 | ``` 23 | 24 | 25 | ## Video Walkthrough 26 | 27 | https://user-images.githubusercontent.com/5153908/140642916-e8d0e071-96ab-45ac-98d3-10c858e504a5.mp4 28 | 29 | 30 | 31 | Please feel free to comment your suggestions and feedbacks on Product Hunt 32 | 33 | [![CSS Loaders - Collection of different types of CSS loaders, spinners | Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=318866&theme=light)](https://www.producthunt.com/posts/css-loaders?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-css-loaders) 34 | -------------------------------------------------------------------------------- /browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar:hover{width:18px;background:#0004}::-webkit-scrollbar-track:hover{background:#0001}::-webkit-scrollbar-track{background:#263038}::-webkit-scrollbar-thumb{background:#ff3d00}::-webkit-scrollbar-thumb:hover{background:#fff}body{margin:0;background:#263038;font-family:Arial,Helvetica,sans-serif}body>img{display:none}body.pop{overflow:hidden}header{background:#0d161b;padding:10px 20px;min-height:50px;width:100%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}header nav{display:flex;align-items:center;justify-content:center}header nav .nav-btn{display:inline-block;width:32px;height:32px;background-color:#fff;background-repeat:no-repeat;background-size:110% auto;background-position:center;border-radius:50%}header nav .nav-btn.git{background-image:url(../images/git.png)}header nav .nav-btn.codepen{background-image:url(../images/codepen.png)}header nav .nav-btn+.nav-btn{margin-left:10px}.brand{color:#fff;font-size:32px;display:inline-block;position:relative}.brand::after{content:'';position:absolute;left:20px;bottom:7px;border:3px solid #fff;border-bottom-color:#ff3d00;width:20px;height:20px;border-radius:50%;animation:brandRotation .6s linear infinite}@keyframes brandRotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#main{min-height:100vh;width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}#main .section{min-width:200px;width:33.33%;height:360px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;cursor:pointer;transition:.2s linear}#main .section:nth-child(2n+1){background:rgba(0,0,0,.1)}#main .section:hover{background:rgba(0,0,0,.3)}@media (max-width:768px){#main .section{width:50%}}@media (max-width:480px){#main .section{width:100%}}footer{background:#0d161b;padding:15px;text-align:center;color:#ccc;width:100%;font-size:12px}footer a{font-size:16px;color:#fff;transition:.2s ease;text-decoration:none;display:inline-block;position:relative}footer a:active,footer a:hover{color:#fff;transform:scale(1.15)}.overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:2000;visibility:hidden;opacity:0;overflow-y:auto}.overlay.in{visibility:visible;opacity:1}.btn-close{position:absolute;top:0;right:0;z-index:5;line-height:20px;height:20px;width:20px;font-size:26px;font-weight:400;padding:0;background:#eee;border:none;outline:0;cursor:pointer}.popup{position:relative;transform:translateY(-20px);background:#fff;padding:20px 15px;max-width:600px;min-height:400px;margin:20px auto;width:100%;transition:.2s ease-in}.in .popup{transform:translateY(10px)}.showcase{background:#263038;margin-bottom:15px}.showcase .section{width:100%;height:300px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center}.code-area .code-header{padding:5px 10px;background:#222;color:#fff;font-size:14px;position:relative}.code-area+.code-area{margin-top:10px}.copy{outline:0;border:none;background:#000;position:absolute;right:5px;top:50%;transform:translateY(-50%);color:#fff;padding:3px 8px;cursor:pointer;user-select:none}.copy::before{content:'';display:inline-block;width:10px;height:12px;border:1px solid #fff;box-shadow:2px -2px #000,3px -3px;margin-right:8px;position:relative;top:3px}code{background:#000;padding:5px 10px;display:block;white-space:pre;color:#03a9f4;min-height:30px;font-size:14px;line-height:18px}#markup{color:#f4a003}#css{max-height:200px;overflow:auto}div[data-id=prog-crak-erh]{justify-content:flex-start!important} -------------------------------------------------------------------------------- /images/Cooking.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/Cooking.mp4 -------------------------------------------------------------------------------- /images/Frame 5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/Frame 5.png -------------------------------------------------------------------------------- /images/Loader-one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/Loader-one.png -------------------------------------------------------------------------------- /images/Loader-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/Loader-screen.png -------------------------------------------------------------------------------- /images/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/android-chrome-192x192.png -------------------------------------------------------------------------------- /images/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/android-chrome-512x512.png -------------------------------------------------------------------------------- /images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/apple-touch-icon.png -------------------------------------------------------------------------------- /images/codepen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/codepen.png -------------------------------------------------------------------------------- /images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/favicon-16x16.png -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/favicon.ico -------------------------------------------------------------------------------- /images/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/git.png -------------------------------------------------------------------------------- /images/loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/loader.png -------------------------------------------------------------------------------- /images/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vineethtrv/css-loader/f51b9ae2cad53582f009240f04fd830142799328/images/mstile-150x150.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | CSS loaders and Spinners 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 55 | 56 | 57 |
58 | L   aders 59 | 60 | 64 |
65 | 66 |
67 | 68 | 69 | 75 | 76 | 77 |
78 |
79 | 80 |
81 |
82 |
83 |
84 | HTML 85 | 86 |
87 | 88 |
89 |
90 |
91 | CSS 92 | 93 |
94 | 95 |
96 |
97 |
98 |
99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | import { BUBBLE } from './loaders/bubble.js'; 2 | import { CIRCLE } from './loaders/circle.js'; 3 | import { RECT } from './loaders/rect.js'; 4 | import { LINE } from './loaders/line.js'; 5 | import { PROGRESS } from './loaders/progress.js'; 6 | import { TEXT } from './loaders/text.js'; 7 | import { GRAPH } from './loaders/graph.js'; 8 | import { OBJECTS } from './loaders/objects.js'; 9 | import { SKELETON } from './loaders/skeleton.js'; 10 | 11 | 12 | 13 | const LOADERS = [...CIRCLE, ...BUBBLE, ...RECT, ...LINE, ...PROGRESS, ...TEXT, ...OBJECTS, ...GRAPH , ...SKELETON ]; 14 | 15 | 16 | const main = document.getElementById('main'); 17 | 18 | 19 | // Create Spinners 20 | LOADERS.forEach((loader, i) => { 21 | // Append Loader 22 | main.appendChild(createLoader(i)); 23 | 24 | }) 25 | 26 | 27 | function createLoader(i){ 28 | let loader = LOADERS[i]; 29 | 30 | // Create html 31 | let sectionEl = document.createElement('div'); 32 | sectionEl.setAttribute('class', 'section'); 33 | sectionEl.setAttribute('data-id', loader.id); 34 | sectionEl.setAttribute('data-index', (i + 1)); 35 | let shadowRoot = sectionEl.attachShadow({ mode: 'open' }); 36 | 37 | let loaderEl = document.createElement('span'); 38 | loaderEl.setAttribute('class', 'loader'); 39 | loaderEl.innerHTML = loader.content || null; 40 | shadowRoot.appendChild(loaderEl); 41 | 42 | //Create CSS 43 | let loaderStyles = document.createElement('style'); 44 | loaderStyles.type = 'text/css'; 45 | loaderStyles.innerHTML = loader.css; 46 | shadowRoot.appendChild(loaderStyles); 47 | 48 | return sectionEl 49 | } 50 | 51 | 52 | 53 | 54 | document.querySelectorAll('#main .section').forEach(elm => { 55 | elm.addEventListener('click', (e) => { 56 | let index = parseInt(e.target.dataset.index); 57 | let showCase = document.querySelector('.showcase'); 58 | 59 | showCase.replaceChildren(createLoader((index - 1))); 60 | 61 | 62 | // console.log(e); 63 | showCase.dataset.index = index; 64 | 65 | // load code 66 | document.querySelector('#markup').textContent = LOADERS[index - 1].html; 67 | document.querySelector('#css').textContent = LOADERS[index - 1].css; 68 | 69 | // popup 70 | document.querySelector('body').classList.add('pop') 71 | document.querySelector('.overlay').classList.add('in') 72 | }) 73 | }) 74 | 75 | 76 | // close popup 77 | document.querySelector('.btn-close').addEventListener('click', (e) => { 78 | document.querySelector('body').classList.remove('pop') 79 | document.querySelector('.overlay').classList.remove('in'); 80 | }); 81 | 82 | document.querySelector('.overlay').addEventListener('click', (e) => { 83 | if (e.target.className === "overlay in") { 84 | document.querySelector('body').classList.remove('pop') 85 | document.querySelector('.overlay').classList.remove('in'); 86 | } 87 | }); 88 | 89 | 90 | // Copy to clipboard 91 | document.querySelectorAll('.copy').forEach(copyBtn => { 92 | copyBtn.addEventListener('click', (e) => { 93 | const id = e.target.dataset.id; 94 | selectText(id); 95 | document.execCommand("copy"); 96 | e.target.textContent = 'Copied'; 97 | 98 | setTimeout( time => e.target.textContent = 'Copy' , 300); 99 | }) 100 | }); 101 | 102 | 103 | // select Text 104 | function selectText(containerid) { 105 | if (document.selection) { // IE 106 | var range = document.body.createTextRange(); 107 | range.moveToElementText(document.getElementById(containerid)); 108 | range.select(); 109 | } else if (window.getSelection) { 110 | var range = document.createRange(); 111 | range.selectNode(document.getElementById(containerid)); 112 | window.getSelection().removeAllRanges(); 113 | window.getSelection().addRange(range); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /js/loaders/bubble.js: -------------------------------------------------------------------------------- 1 | export const BUBBLE = [ 2 | { 3 | id: "5s44kmptpx", 4 | html: ``, 5 | css: `.loader { 6 | width: 48px; 7 | height: 48px; 8 | border-radius: 50%; 9 | display: block; 10 | margin:15px auto; 11 | position: relative; 12 | box-sizing: border-box; 13 | animation: zeroRotation 1s linear infinite alternate; 14 | } 15 | .loader::after, 16 | .loader::before { 17 | content: ''; 18 | box-sizing: border-box; 19 | position: absolute; 20 | left: 0; 21 | top: 0; 22 | background: #FF3D00; 23 | width: 16px; 24 | height: 16px; 25 | transform: translate(-50%, 50%); 26 | border-radius: 50%; 27 | } 28 | .loader::before { 29 | left: auto; 30 | right: 0; 31 | transform: translate(50%, 100%); 32 | } 33 | 34 | @keyframes zeroRotation { 35 | 0% { 36 | transform: scale(1) rotate(0deg); 37 | } 38 | 100% { 39 | transform: scale(0) rotate(360deg); 40 | } 41 | } `, 42 | }, { 43 | id: "w216qsky6id", 44 | html: ``, 45 | css: `.loader { 46 | width: 48px; 47 | height: 48px; 48 | display: block; 49 | margin:15px auto; 50 | position: relative; 51 | color: #FFF; 52 | box-sizing: border-box; 53 | animation: rotation 1s linear infinite; 54 | } 55 | .loader::after, 56 | .loader::before { 57 | content: ''; 58 | box-sizing: border-box; 59 | position: absolute; 60 | width: 24px; 61 | height: 24px; 62 | top: 0; 63 | background-color: #FFF; 64 | border-radius: 50%; 65 | animation: scale50 1s infinite ease-in-out; 66 | } 67 | .loader::before { 68 | top: auto; 69 | bottom: 0; 70 | background-color: #FF3D00; 71 | animation-delay: 0.5s; 72 | } 73 | 74 | @keyframes rotation { 75 | 0% { 76 | transform: rotate(0deg); 77 | } 78 | 100% { 79 | transform: rotate(360deg); 80 | } 81 | } 82 | @keyframes scale50 { 83 | 0%, 100% { 84 | transform: scale(0); 85 | } 86 | 50% { 87 | transform: scale(1); 88 | } 89 | } `, 90 | }, { 91 | id: "e53631pwlqi", 92 | html: ``, 93 | css: `.loader { 94 | width: 48px; 95 | height: 48px; 96 | display: block; 97 | margin:15px auto; 98 | position: relative; 99 | color: #FFF; 100 | box-sizing: border-box; 101 | animation: rotation 1s linear infinite; 102 | } 103 | .loader::after, 104 | .loader::before { 105 | content: ''; 106 | box-sizing: border-box; 107 | position: absolute; 108 | width: 24px; 109 | height: 24px; 110 | top: 50%; 111 | left: 50%; 112 | transform: scale(0.5) translate(0, 0); 113 | background-color: #FFF; 114 | border-radius: 50%; 115 | animation: animloader 1s infinite ease-in-out; 116 | } 117 | .loader::before { 118 | background-color: #FF3D00; 119 | transform: scale(0.5) translate(-48px, -48px); 120 | } 121 | 122 | @keyframes rotation { 123 | 0% { 124 | transform: rotate(0deg); 125 | } 126 | 100% { 127 | transform: rotate(360deg); 128 | } 129 | } 130 | @keyframes animloader { 131 | 50% { 132 | transform: scale(1) translate(-50%, -50%); 133 | } 134 | } 135 | `, 136 | }, 137 | 138 | { 139 | id: "prePresLding34", 140 | html: ``, 141 | css: `.loader { 142 | position: relative; 143 | } 144 | .loader:before , .loader:after { 145 | content: ''; 146 | width: 15px; 147 | height: 15px; 148 | display: block; 149 | position: relative; 150 | margin: 10px auto ; 151 | border-radius: 50%; 152 | background: #fff; 153 | animation: left 1s infinite ease-in-out; 154 | } 155 | .loader:after { 156 | background: #FF3D00; 157 | animation: right 1s infinite ease-in-out; 158 | } 159 | 160 | 161 | @keyframes right { 162 | 0% , 100%{transform: translate(-15px) } 163 | 50% { transform: translate(15px) } 164 | } 165 | 166 | @keyframes left { 167 | 0% , 100%{ transform: translate(15px) } 168 | 50% { transform: translate(-15px) } 169 | } 170 | 171 | 172 | ` 173 | }, 174 | 175 | { 176 | id: "ball@2Xsn-1", 177 | html: ``, 178 | css: `.loader { 179 | box-sizing: border-box; 180 | position: relative; 181 | width: 48px; 182 | height: 48px; 183 | animation: flip 1s linear infinite; 184 | } 185 | .loader:after, .loader:before { 186 | content: ""; 187 | width: 24px; 188 | height: 24px; 189 | position: absolute; 190 | border-radius: 50%; 191 | background: #FF3D00; 192 | animation: spin 1s linear infinite; 193 | transform-origin: 12px 100%; 194 | } 195 | .loader:before { 196 | transform-origin: 0 50%; 197 | background: #fff; 198 | } 199 | @keyframes spin { 200 | to { 201 | transform: rotate(360deg); 202 | } 203 | } 204 | @keyframes flip { 205 | 0%, 50% { 206 | transform: rotateY(0deg); 207 | } 208 | 50%, 100% { 209 | transform: rotateY(180deg); 210 | } 211 | } 212 | ` 213 | }, 214 | 215 | 216 | { 217 | id: "ball@2Xsn-2", 218 | html: ``, 219 | css: `.loader { 220 | box-sizing: border-box; 221 | position: relative; 222 | width: 48px; 223 | height: 48px; 224 | animation: spin 1s linear infinite; 225 | } 226 | .loader:after, .loader:before { 227 | content: ""; 228 | width: 24px; 229 | height: 24px; 230 | position: absolute; 231 | border-radius: 50%; 232 | background: #FF3D00; 233 | animation: spin 1s linear infinite; 234 | transform-origin: 0px 100%; 235 | } 236 | .loader:before { 237 | transform-origin: 0 50%; 238 | background: #fff; 239 | } 240 | @keyframes spin { 241 | to { 242 | transform: rotate(360deg); 243 | } 244 | } 245 | ` 246 | }, 247 | { 248 | id: "ball@2Xsn-3", 249 | html: ``, 250 | css: `.loader { 251 | box-sizing: border-box; 252 | position: relative; 253 | width: 48px; 254 | height: 48px; 255 | animation: spin 1s linear infinite; 256 | } 257 | .loader:after, .loader:before { 258 | content: ""; 259 | width: 24px; 260 | height: 24px; 261 | position: absolute; 262 | border-radius: 50%; 263 | background: #FF3D00; 264 | animation: flipY 1s linear infinite; 265 | transform-origin: 50% 50%; 266 | } 267 | .loader:before { 268 | transform-origin: 0% 100%; 269 | background: #fff; 270 | } 271 | @keyframes spin { 272 | to { 273 | transform: rotate(360deg); 274 | } 275 | } 276 | @keyframes flipY { 277 | 0%, 50% { 278 | transform: rotateY(0deg); 279 | } 280 | 50%, 100% { 281 | transform: rotateY(180deg); 282 | } 283 | } 284 | ` 285 | }, 286 | 287 | 288 | { 289 | id: "ball@2Xsn-4", 290 | html: ``, 291 | css: `.loader { 292 | width: calc(100px - 14px); 293 | height: 50px; 294 | position: relative; 295 | animation: flippx 1s infinite linear; 296 | } 297 | .loader:before { 298 | content: ""; 299 | position: absolute; 300 | inset: 0; 301 | margin: auto; 302 | width: 20px; 303 | height: 20px; 304 | border-radius: 50%; 305 | background: #FF3D00; 306 | transform-origin: -14px 50%; 307 | animation: spin 0.5s infinite linear; 308 | } 309 | @keyframes flippx { 310 | 0%, 49% { 311 | transform: scaleX(1); 312 | } 313 | 50%, 100% { 314 | transform: scaleX(-1); 315 | } 316 | } 317 | @keyframes spin { 318 | 100% { 319 | transform: rotate(360deg); 320 | } 321 | } 322 | ` 323 | }, 324 | { 325 | id: "msgerBblFdxbl", 326 | html: ``, 327 | css: `.loader, .loader:before, .loader:after { 328 | border-radius: 50%; 329 | width: 2.5em; 330 | height: 2.5em; 331 | animation-fill-mode: both; 332 | animation: bblFadInOut 1.8s infinite ease-in-out; 333 | } 334 | .loader { 335 | color: #FFF; 336 | font-size: 7px; 337 | position: relative; 338 | text-indent: -9999em; 339 | transform: translateZ(0); 340 | animation-delay: -0.16s; 341 | } 342 | .loader:before, 343 | .loader:after { 344 | content: ''; 345 | position: absolute; 346 | top: 0; 347 | } 348 | .loader:before { 349 | left: -3.5em; 350 | animation-delay: -0.32s; 351 | } 352 | .loader:after { 353 | left: 3.5em; 354 | } 355 | 356 | @keyframes bblFadInOut { 357 | 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em } 358 | 40% { box-shadow: 0 2.5em 0 0 } 359 | } 360 | ` 361 | }, 362 | { 363 | id: "msgerBblLdan3xbl", 364 | html: ``, 365 | css: `.loader { 366 | width: 16px; 367 | height: 16px; 368 | border-radius: 50%; 369 | background-color: #fff; 370 | box-shadow: 32px 0 #fff, -32px 0 #fff; 371 | position: relative; 372 | animation: flash 0.5s ease-out infinite alternate; 373 | } 374 | 375 | @keyframes flash { 376 | 0% { 377 | background-color: #FFF2; 378 | box-shadow: 32px 0 #FFF2, -32px 0 #FFF; 379 | } 380 | 50% { 381 | background-color: #FFF; 382 | box-shadow: 32px 0 #FFF2, -32px 0 #FFF2; 383 | } 384 | 100% { 385 | background-color: #FFF2; 386 | box-shadow: 32px 0 #FFF, -32px 0 #FFF2; 387 | } 388 | } 389 | ` 390 | }, 391 | 392 | 393 | 394 | 395 | { 396 | id: "qt4al5cwmmg", 397 | html: ``, 398 | css: `.loader { 399 | width: 16px; 400 | height: 16px; 401 | border-radius: 50%; 402 | display: block; 403 | margin:15px auto; 404 | position: relative; 405 | background: #FFF; 406 | box-sizing: border-box; 407 | animation: shadowExpandX 2s linear infinite alternate; 408 | } 409 | 410 | @keyframes shadowExpandX { 411 | 0% { 412 | box-shadow: 0 0, 0 0; 413 | color: rgba(255, 255, 255, 0.2); 414 | } 415 | 100% { 416 | box-shadow: -24px 0, 24px 0; 417 | color: rgba(255, 255, 255, 0.8); 418 | } 419 | }`, 420 | }, { 421 | id: "1jxkx6vu7vj", 422 | html: ``, 423 | css: `.loader { 424 | width: 16px; 425 | height: 16px; 426 | border-radius: 50%; 427 | display: block; 428 | margin:15px auto; 429 | position: relative; 430 | background: #FFF; 431 | box-shadow: -24px 0 #FFF, 24px 0 #FFF; 432 | box-sizing: border-box; 433 | animation: shadowPulse 2s linear infinite; 434 | } 435 | 436 | @keyframes shadowPulse { 437 | 33% { 438 | background: #FFF; 439 | box-shadow: -24px 0 #FF3D00, 24px 0 #FFF; 440 | } 441 | 66% { 442 | background: #FF3D00; 443 | box-shadow: -24px 0 #FFF, 24px 0 #FFF; 444 | } 445 | 100% { 446 | background: #FFF; 447 | box-shadow: -24px 0 #FFF, 24px 0 #FF3D00; 448 | } 449 | } 450 | `, 451 | }, { 452 | id: "h36psmkc5la", 453 | html: ``, 454 | css: `.loader { 455 | width: 16px; 456 | height: 16px; 457 | border-radius: 50%; 458 | display: block; 459 | margin:15px auto; 460 | position: relative; 461 | background: #FF3D00; 462 | color: #FFF; 463 | box-shadow: -24px 0, 24px 0; 464 | box-sizing: border-box; 465 | animation: rotation 2s ease-in-out infinite; 466 | } 467 | 468 | @keyframes rotation { 469 | 0% { 470 | transform: rotate(0deg); 471 | } 472 | 100% { 473 | transform: rotate(360deg); 474 | } 475 | } 476 | `, 477 | }, 478 | { 479 | id: "collution2BallJp1x", 480 | html: ``, 481 | css: `.loader { 482 | width: 82px; 483 | height: 18px; 484 | position: relative; 485 | } 486 | .loader::before , .loader::after { 487 | content: ''; 488 | position: absolute; 489 | left: 50%; 490 | transform: translate(-50% , 10%); 491 | top: 0; 492 | background: #FF3D00; 493 | width: 16px; 494 | height: 16px; 495 | border-radius: 50%; 496 | animation: jump 0.5s ease-in infinite alternate; 497 | } 498 | 499 | .loader::after { 500 | background: #0000; 501 | color: #fff; 502 | top: 100%; 503 | box-shadow: 32px -20px , -32px -20px; 504 | animation: split 0.5s ease-out infinite alternate; 505 | } 506 | 507 | @keyframes split { 508 | 0% { box-shadow: 8px -20px, -8px -20px} 509 | 100% { box-shadow: 32px -20px , -32px -20px} 510 | } 511 | @keyframes jump { 512 | 0% { transform: translate(-50% , -150%)} 513 | 100% { transform: translate(-50% , 10%)} 514 | } 515 | `, 516 | }, 517 | 518 | { 519 | id: "bbl2xcrlrot", 520 | html: ``, 521 | css: `.loader { 522 | width: 16px; 523 | height: 16px; 524 | border-radius: 50%; 525 | background: #FF3D00; 526 | position: relative; 527 | } 528 | .loader:before, 529 | .loader:after { 530 | content: ""; 531 | position: absolute; 532 | border-radius: 50%; 533 | inset: 0; 534 | background: #fff; 535 | transform: rotate(0deg) translate(30px); 536 | animation: rotate 1s ease infinite; 537 | } 538 | .loader:after { 539 | animation-delay: 0.5s 540 | } 541 | @keyframes rotate { 542 | 100% {transform: rotate(360deg) translate(30px) 543 | } 544 | `, 545 | }, 546 | 547 | 548 | { 549 | id: "brb1xbeeMv", 550 | html: ``, 551 | css: `.loader { 552 | width: 64px; 553 | height: 12px; 554 | background: 555 | radial-gradient(circle 6px, #FFF 100%, transparent 0), 556 | radial-gradient(circle 6px, #FFF 100%, transparent 0); 557 | background-size:12px 12px; 558 | background-position: left center , right center ; 559 | background-repeat: no-repeat; 560 | position: relative; 561 | } 562 | .loader:before { 563 | content: ""; 564 | position: absolute; 565 | width: 12px; 566 | height: 12px; 567 | border-radius: 50%; 568 | background: #FF3D00; 569 | inset:0; 570 | margin: auto; 571 | animation: mvX 0.6s, mvY 0.3s; 572 | animation-timing-function:cubic-bezier(.5,-300,.5, 300); 573 | animation-iteration-count:infinite; 574 | } 575 | 576 | @keyframes mvX { 577 | 100% { left: 0.85px} 578 | } 579 | @keyframes mvY { 580 | 100% { top : 0.5px } 581 | } 582 | `, 583 | }, 584 | 585 | 586 | { 587 | id: "b4bqez184d", 588 | html: ``, 589 | css: `.loader { 590 | width: 12px; 591 | height: 12px; 592 | border-radius: 50%; 593 | display: block; 594 | margin:15px auto; 595 | position: relative; 596 | color: #FFF; 597 | box-sizing: border-box; 598 | animation: animloader 1s linear infinite alternate; 599 | } 600 | 601 | @keyframes animloader { 602 | 0% { 603 | box-shadow: -38px -6px, -14px 6px, 14px -6px; 604 | } 605 | 33% { 606 | box-shadow: -38px 6px, -14px -6px, 14px 6px; 607 | } 608 | 66% { 609 | box-shadow: -38px -6px, -14px 6px, 14px -6px; 610 | } 611 | 100% { 612 | box-shadow: -38px 6px, -14px -6px, 14px 6px; 613 | } 614 | }`, 615 | }, 616 | { 617 | id: "bbl3xrnhit", 618 | html: ``, 619 | css: `.loader { 620 | width: 108px; 621 | height: 16px; 622 | background: 623 | radial-gradient(circle 8px at 8px center, #FFF 100%, transparent 0), 624 | radial-gradient(circle 8px at 8px center, #FFF 100%, transparent 0); 625 | background-size: 16px 16px; 626 | background-repeat: no-repeat; 627 | position: relative; 628 | animation: ballX 1s linear infinite; 629 | } 630 | .loader:before { 631 | content: ""; 632 | position: absolute; 633 | width: 16px; 634 | height: 16px; 635 | border-radius: 50%; 636 | background:#FFF; 637 | inset:0; 638 | margin:auto; 639 | animation: moveX 1s cubic-bezier(0.5,300,0.5,-300) infinite; 640 | } 641 | @keyframes ballX { 642 | 0%,25%,50%,75%, 100% {background-position: 25% 0,75% 0} 643 | 40% {background-position: 25% 0,85% 0} 644 | 90% {background-position: 15% 0,75% 0} 645 | } 646 | @keyframes moveX { 647 | 100% {transform:translate(0.15px)} 648 | } 649 | `, 650 | }, 651 | { 652 | id: "ball#flRbc", 653 | html: ``, 654 | css: `.loader { 655 | position: relative; 656 | width: 100px; 657 | height: 16px; 658 | } 659 | .loader:before , .loader:after{ 660 | content: ""; 661 | position: absolute; 662 | width: 16px; 663 | height: 16px; 664 | border-radius: 50%; 665 | background: #fff; 666 | box-shadow: 32px 0 #fff; 667 | left: 0; 668 | top: 0; 669 | animation: ballMoveX 1s linear infinite; 670 | } 671 | .loader:after { 672 | box-shadow: none; 673 | transform-origin: 40px 0; 674 | transform: rotate(-153deg); 675 | animation: rotateLoader 1s linear infinite; 676 | } 677 | 678 | @keyframes rotateLoader { 679 | 0% , 10%{ transform: rotate(-153deg); } 680 | 90%, 100% { transform: rotate(0deg); } 681 | } 682 | @keyframes ballMoveX { 683 | 0% , 10%{ transform: translateX(0) } 684 | 90%, 100% { transform: translateX(32px) } 685 | } 686 | `, 687 | }, 688 | { 689 | id: "ballCrdLd", 690 | html: ``, 691 | css: `.loader { 692 | position: relative; 693 | width: 100px; 694 | height: 16px; 695 | } 696 | .loader:before , .loader:after{ 697 | content: ""; 698 | position: absolute; 699 | width: 16px; 700 | height: 16px; 701 | border-radius: 50%; 702 | background: #fff; 703 | box-shadow: 32px 0 #fff; 704 | left: 0; 705 | top: 0; 706 | animation: ballMoveX 2s linear infinite; 707 | } 708 | .loader:after { 709 | box-shadow: none; 710 | transform: translateX(64px) scale(1); 711 | z-index: 2; 712 | animation: none; 713 | animation: trfLoader 2s linear infinite; 714 | } 715 | 716 | @keyframes trfLoader { 717 | 0% , 5%{ 718 | transform: translateX(64px) scale(1); 719 | background: #FFF; 720 | } 721 | 10%{ 722 | transform: translateX(64px) scale(1); 723 | background: #ff3d00; 724 | } 725 | 40%{ 726 | transform: translateX(32px) scale(1.5); 727 | background: #ff3d00; 728 | } 729 | 90%, 95% { 730 | transform: translateX(0px) scale(1); 731 | background: #ff3d00; 732 | } 733 | 100% { 734 | transform: translateX(0px) scale(1); 735 | background: #FFF; 736 | } 737 | } 738 | @keyframes ballMoveX { 739 | 0% , 10%{ transform: translateX(0) } 740 | 90%, 100% { transform: translateX(32px) } 741 | } 742 | `, 743 | }, 744 | 745 | { 746 | id: "ball4puncUp", 747 | html: ``, 748 | css: `.loader { 749 | animation: rotate 1s infinite; 750 | height: 50px; 751 | width: 50px; 752 | } 753 | 754 | .loader:before, 755 | .loader:after { 756 | border-radius: 50%; 757 | content: ""; 758 | display: block; 759 | height: 20px; 760 | width: 20px; 761 | } 762 | .loader:before { 763 | animation: ball1 1s infinite; 764 | background-color: #fff; 765 | box-shadow: 30px 0 0 #ff3d00; 766 | margin-bottom: 10px; 767 | } 768 | .loader:after { 769 | animation: ball2 1s infinite; 770 | background-color: #ff3d00; 771 | box-shadow: 30px 0 0 #fff; 772 | } 773 | 774 | @keyframes rotate { 775 | 0% { transform: rotate(0deg) scale(0.8) } 776 | 50% { transform: rotate(360deg) scale(1.2) } 777 | 100% { transform: rotate(720deg) scale(0.8) } 778 | } 779 | 780 | @keyframes ball1 { 781 | 0% { 782 | box-shadow: 30px 0 0 #ff3d00; 783 | } 784 | 50% { 785 | box-shadow: 0 0 0 #ff3d00; 786 | margin-bottom: 0; 787 | transform: translate(15px, 15px); 788 | } 789 | 100% { 790 | box-shadow: 30px 0 0 #ff3d00; 791 | margin-bottom: 10px; 792 | } 793 | } 794 | 795 | @keyframes ball2 { 796 | 0% { 797 | box-shadow: 30px 0 0 #fff; 798 | } 799 | 50% { 800 | box-shadow: 0 0 0 #fff; 801 | margin-top: -20px; 802 | transform: translate(15px, 15px); 803 | } 804 | 100% { 805 | box-shadow: 30px 0 0 #fff; 806 | margin-top: 0; 807 | } 808 | } 809 | `, 810 | }, 811 | 812 | 813 | 814 | 815 | { 816 | id: "jk3s5paxg1", 817 | html: ``, 818 | css: `.loader { 819 | width: 10px; 820 | height: 10px; 821 | border-radius: 50%; 822 | display: block; 823 | margin:15px auto; 824 | position: relative; 825 | color: #FFF; 826 | left: -100px; 827 | box-sizing: border-box; 828 | animation: shadowRolling 2s linear infinite; 829 | } 830 | 831 | @keyframes shadowRolling { 832 | 0% { 833 | box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); 834 | } 835 | 12% { 836 | box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); 837 | } 838 | 25% { 839 | box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); 840 | } 841 | 36% { 842 | box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0); 843 | } 844 | 50% { 845 | box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white; 846 | } 847 | 62% { 848 | box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white; 849 | } 850 | 75% { 851 | box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white; 852 | } 853 | 87% { 854 | box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white; 855 | } 856 | 100% { 857 | box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0); 858 | } 859 | }`, 860 | }, { 861 | id: "v6gj5f7r1a", 862 | html: ``, 863 | css: `.loader { 864 | width: 12px; 865 | height: 12px; 866 | border-radius: 50%; 867 | display: block; 868 | margin:15px auto; 869 | position: relative; 870 | color: #FFF; 871 | box-sizing: border-box; 872 | animation: animloader 2s linear infinite; 873 | } 874 | 875 | @keyframes animloader { 876 | 0% { 877 | box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; 878 | } 879 | 25% { 880 | box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px; 881 | } 882 | 50% { 883 | box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px; 884 | } 885 | 75% { 886 | box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; 887 | } 888 | 100% { 889 | box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px; 890 | } 891 | }`, 892 | }, 893 | 894 | { 895 | id: "mdqx53v2ufl", 896 | html: ``, 897 | css: `.loader { 898 | width: 12px; 899 | height: 12px; 900 | border-radius: 50%; 901 | display: block; 902 | margin:15px auto; 903 | position: relative; 904 | color: #FFF; 905 | box-sizing: border-box; 906 | animation: animloader 1s linear infinite alternate; 907 | } 908 | 909 | @keyframes animloader { 910 | 0% { 911 | box-shadow: -38px -12px , -14px 0, 14px 0, 38px 0; 912 | } 913 | 33% { 914 | box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; 915 | } 916 | 66% { 917 | box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0; 918 | } 919 | 100% { 920 | box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px; 921 | } 922 | } 923 | 924 | `, 925 | }, 926 | 927 | { 928 | id: "bbl4flowBrix", 929 | html: ``, 930 | css: `.loader { 931 | width: 16px; 932 | height: 16px; 933 | position: relative; 934 | left: -32px; 935 | border-radius: 50%; 936 | color: #fff; 937 | background: currentColor; 938 | box-shadow: 32px 0 , -32px 0 , 64px 0; 939 | } 940 | 941 | .loader::after { 942 | content: ''; 943 | position: absolute; 944 | left: -32px; 945 | top: 0; 946 | width: 16px; 947 | height: 16px; 948 | border-radius: 10px; 949 | background:#FF3D00; 950 | animation: move 3s linear infinite alternate; 951 | } 952 | 953 | @keyframes move { 954 | 0% , 5%{ 955 | left: -32px; 956 | width: 16px; 957 | } 958 | 15% , 20%{ 959 | left: -32px; 960 | width: 48px; 961 | } 962 | 30% , 35%{ 963 | left: 0px; 964 | width: 16px; 965 | } 966 | 45% , 50%{ 967 | left: 0px; 968 | width: 48px; 969 | } 970 | 60% , 65%{ 971 | left: 32px; 972 | width: 16px; 973 | } 974 | 975 | 75% , 80% { 976 | left: 32px; 977 | width: 48px; 978 | } 979 | 95%, 100% { 980 | left: 64px; 981 | width: 16px; 982 | } 983 | `, 984 | }, 985 | 986 | { 987 | id: "ntonPend5Xbal", 988 | html: ``, 989 | css: `.loader { 990 | width: 16px; 991 | height: 16px; 992 | border-radius: 50%; 993 | background-color: #fff; 994 | box-shadow: 32px 0 #fff, -32px 0 #fff; 995 | position: relative; 996 | animation: flash 0.3s ease-in infinite alternate; 997 | } 998 | .loader::before , .loader::after { 999 | content: ''; 1000 | position: absolute; 1001 | left: -64px; 1002 | top: 0; 1003 | background: #FFF; 1004 | width: 16px; 1005 | height: 16px; 1006 | border-radius: 50%; 1007 | transform-origin: 35px -35px; 1008 | transform: rotate(45deg); 1009 | animation: hitL 0.3s ease-in infinite alternate; 1010 | } 1011 | 1012 | .loader::after { 1013 | left: 64px; 1014 | transform: rotate(-45deg); 1015 | transform-origin: -35px -35px; 1016 | animation: hitR 0.3s ease-out infinite alternate; 1017 | } 1018 | 1019 | @keyframes flash { 1020 | 0% , 100%{ 1021 | background-color: rgba(255, 255, 255, 0.25); 1022 | box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 0.25); 1023 | } 1024 | 25% { 1025 | background-color: rgba(255, 255, 255, 0.25); 1026 | box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 1); 1027 | } 1028 | 50% { 1029 | background-color: rgba(255, 255, 255, 1); 1030 | box-shadow: 32px 0 rgba(255, 255, 255, 0.25), -32px 0 rgba(255, 255, 255, 0.25); 1031 | } 1032 | 75% { 1033 | background-color: rgba(255, 255, 255, 0.25); 1034 | box-shadow: 32px 0 rgba(255, 255, 255, 1), -32px 0 rgba(255, 255, 255, 0.25); 1035 | } 1036 | } 1037 | 1038 | @keyframes hitL { 1039 | 0% { 1040 | transform: rotate(45deg); 1041 | background-color: rgba(255, 255, 255, 1); 1042 | } 1043 | 25% , 100% { 1044 | transform: rotate(0deg); 1045 | background-color: rgba(255, 255, 255, 0.25); 1046 | } 1047 | } 1048 | 1049 | @keyframes hitR { 1050 | 0% , 75% { 1051 | transform: rotate(0deg); 1052 | background-color: rgba(255, 255, 255, 0.25); 1053 | } 1054 | 100% { 1055 | transform: rotate(-45deg); 1056 | background-color: rgba(255, 255, 255, 1); 1057 | } 1058 | } 1059 | `, 1060 | }, 1061 | { 1062 | id: "cyclo5xballx", 1063 | html: ``, 1064 | css: `.loader { 1065 | position: relative; 1066 | width: 15px; 1067 | height: 64px; 1068 | } 1069 | .loader::after , .loader::before { 1070 | content: ''; 1071 | position: absolute; 1072 | left: 0; 1073 | top: 0; 1074 | color: #fff; 1075 | background: currentColor; 1076 | width: 16px; 1077 | height: 16px; 1078 | border-radius: 50%; 1079 | box-shadow: 45px 0 , -45px 0; 1080 | animation: move 0.5s linear infinite alternate; 1081 | } 1082 | 1083 | .loader::before { 1084 | top: 100%; 1085 | box-shadow: 50px 0 ; 1086 | left: -25px; 1087 | animation-direction: alternate-reverse; 1088 | } 1089 | 1090 | @keyframes move { 1091 | 0% { top: 0 } 1092 | 50% { top: 50% } 1093 | 100% { top: 100% } 1094 | }`, 1095 | }, 1096 | 1097 | 1098 | 1099 | 1100 | { 1101 | id: "bbleHrSpinShdw34f", 1102 | html: ``, 1103 | css: `.loader { 1104 | position: relative; 1105 | display: flex; 1106 | } 1107 | .loader:before , .loader:after { 1108 | content: ''; 1109 | width: 15px; 1110 | height: 15px; 1111 | display: inline-block; 1112 | position: relative; 1113 | margin: 0 5px ; 1114 | border-radius: 50%; 1115 | color: #FFF; 1116 | background: currentColor; 1117 | box-shadow: 50px 0 , -50px 0; 1118 | animation: left 1s infinite ease-in-out; 1119 | } 1120 | .loader:after { 1121 | color: #FF3D00; 1122 | animation: right 1.1s infinite ease-in-out; 1123 | } 1124 | 1125 | 1126 | @keyframes right { 1127 | 0% , 100%{transform: translateY(-10px) } 1128 | 50% { transform: translateY(10px) } 1129 | } 1130 | 1131 | @keyframes left { 1132 | 0% , 100%{ transform: translateY(10px) } 1133 | 50% { transform: translateY(-10px) } 1134 | } 1135 | `, 1136 | }, 1137 | { 1138 | id: "bbleVrncgShdw34f", 1139 | html: ``, 1140 | css: `.loader { 1141 | height: 150px; 1142 | position: relative; 1143 | } 1144 | .loader:before , .loader:after { 1145 | content: ''; 1146 | width: 15px; 1147 | height: 15px; 1148 | display: block; 1149 | position: relative; 1150 | margin: 10px auto ; 1151 | border-radius: 50%; 1152 | color: #FFF; 1153 | background: currentColor; 1154 | box-shadow: 0 50px , 0 100px; 1155 | animation: left 1s infinite ease-in-out; 1156 | } 1157 | .loader:after { 1158 | animation: right 1.1s infinite ease-in-out; 1159 | } 1160 | 1161 | 1162 | @keyframes right { 1163 | 0% , 100%{transform: translate(-15px) } 1164 | 50% { transform: translate(15px) } 1165 | } 1166 | 1167 | @keyframes left { 1168 | 0% , 100%{ transform: translate(15px) } 1169 | 50% { transform: translate(-15px) } 1170 | } 1171 | `, 1172 | }, 1173 | ] -------------------------------------------------------------------------------- /js/loaders/graph.js: -------------------------------------------------------------------------------- 1 | export const GRAPH = [ 2 | 3 | { 4 | id: "clipBrdFill", 5 | html: ``, 6 | css: `.loader { 7 | position: relative; 8 | width: 100px; 9 | height: 130px; 10 | background: #fff; 11 | border-radius: 4px; 12 | } 13 | .loader:before{ 14 | content: ''; 15 | position: absolute; 16 | width: 54px; 17 | height: 25px; 18 | left: 50%; 19 | top: 0; 20 | background-image: 21 | radial-gradient(ellipse at center, #0000 24%,#de3500 25%,#de3500 64%,#0000 65%), 22 | linear-gradient(to bottom, #0000 34%,#de3500 35%); 23 | background-size: 12px 12px , 100% auto; 24 | background-repeat: no-repeat; 25 | background-position: center top; 26 | transform: translate(-50% , -65%); 27 | box-shadow: 0 -3px rgba(0, 0, 0, 0.25) inset; 28 | } 29 | .loader:after{ 30 | content: ''; 31 | position: absolute; 32 | left: 50%; 33 | top: 20%; 34 | transform: translateX(-50%); 35 | width: 66%; 36 | height: 60%; 37 | background: linear-gradient(to bottom, #f79577 30%, #0000 31%); 38 | background-size: 100% 16px; 39 | animation: writeDown 2s ease-out infinite; 40 | } 41 | 42 | @keyframes writeDown { 43 | 0% { height: 0%; opacity: 0;} 44 | 20%{ height: 0%; opacity: 1;} 45 | 80% { height: 65%; opacity: 1;} 46 | 100% { height: 65%; opacity: 0;} 47 | } 48 | `, 49 | }, 50 | 51 | { 52 | id: "bookPagging", 53 | html: ``, 54 | css: `.loader { 55 | width: 200px; 56 | height: 140px; 57 | background: #979794; 58 | box-sizing: border-box; 59 | position: relative; 60 | border-radius:8px; 61 | perspective: 1000px; 62 | } 63 | 64 | .loader:before{ 65 | content: ''; 66 | position: absolute; 67 | left: 10px; 68 | right: 10px; 69 | top: 10px; 70 | bottom: 10px; 71 | border-radius:8px; 72 | background: #f5f5f5 no-repeat; 73 | background-size: 60px 10px; 74 | background-image: linear-gradient(#ddd 100px, transparent 0) , 75 | linear-gradient(#ddd 100px, transparent 0), 76 | linear-gradient(#ddd 100px, transparent 0), 77 | linear-gradient(#ddd 100px, transparent 0), 78 | linear-gradient(#ddd 100px, transparent 0), 79 | linear-gradient(#ddd 100px, transparent 0); 80 | 81 | background-position: 15px 30px , 15px 60px , 15px 90px, 82 | 105px 30px , 105px 60px , 105px 90px; 83 | box-shadow: 0 0 10px rgba(0,0,0,0.25); 84 | } 85 | .loader:after { 86 | content: ''; 87 | position: absolute; 88 | width: calc(50% - 10px); 89 | right: 10px; 90 | top: 10px; 91 | bottom: 10px; 92 | border-radius: 8px; 93 | background: #fff no-repeat; 94 | background-size: 60px 10px; 95 | background-image: linear-gradient(#ddd 100px, transparent 0), 96 | linear-gradient(#ddd 100px, transparent 0), 97 | linear-gradient(#ddd 100px, transparent 0); 98 | background-position: 50% 30px ,50% 60px , 50% 90px; 99 | transform: rotateY(0deg ); 100 | transform-origin: left center; 101 | animation: paging 1s linear infinite; 102 | } 103 | 104 | 105 | @keyframes paging { 106 | to { 107 | transform: rotateY( -180deg ); 108 | } 109 | } 110 | `, 111 | }, 112 | { 113 | id: "pencilWrt", 114 | html: ``, 115 | css: `.loader { 116 | position: relative; 117 | height: 200px; 118 | width: 200px; 119 | border-bottom: 3px solid #ff3d00; 120 | box-sizing: border-box; 121 | animation: drawLine 4s linear infinite; 122 | } 123 | .loader:before { 124 | content: ""; 125 | position: absolute; 126 | left: calc(100% + 14px); 127 | bottom: -6px; 128 | width: 16px; 129 | height: 100px; 130 | border-radius: 20px 20px 50px 50px; 131 | background-repeat: no-repeat; 132 | background-image: linear-gradient(#ff3d00 6px, transparent 0), 133 | linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%), 134 | linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%), 135 | linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% ); 136 | background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px; 137 | background-position: center bottom, left 88px, right 88px, left top; 138 | transform: rotate(25deg); 139 | animation: pencilRot 4s linear infinite; 140 | } 141 | 142 | @keyframes drawLine { 143 | 0%, 100% { width: 0px } 144 | 45%, 55% { width: 200px } 145 | } 146 | 147 | @keyframes pencilRot { 148 | 0%, 45% { 149 | bottom: -6px; 150 | left: calc(100% + 14px); 151 | transform: rotate(25deg); 152 | } 153 | 55%, 154 | 100% { 155 | bottom: -12px; 156 | left: calc(100% + 16px); 157 | transform: rotate(220deg); 158 | } 159 | } 160 | `, 161 | }, 162 | 163 | 164 | { 165 | id: "gHomeChrgLdingFlash", 166 | html: ``, 167 | css: `.loader { 168 | width: 148px; 169 | height: 148px; 170 | border-radius: 50%; 171 | margin: -64px auto 0; 172 | background-color: #ccc; 173 | background-image: radial-gradient(#fff 4px, #0000 0), 174 | radial-gradient(#fff 4px, #0000 0), 175 | radial-gradient(#fff 4px, #0000 0), 176 | radial-gradient(#fff 4px, #0000 0); 177 | background-position: 24px center, 8px center, -8px center, -24px center; 178 | position: relative; 179 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) inset; 180 | animation: flash 1s linear infinite; 181 | } 182 | .loader::before , .loader::after { 183 | content: ''; 184 | position: absolute; 185 | border: 1px solid #ccc; 186 | border-top-color:#0000; 187 | left: 50%; 188 | top: 100%; 189 | transform: translateX(-50%); 190 | width: 16px; 191 | height: 18px; 192 | background: #fff; 193 | } 194 | 195 | .loader::before { 196 | width: 0px; 197 | height: 64px; 198 | transform: translate(-50% , 18px); 199 | } 200 | 201 | @keyframes flash { 202 | 0%{ 203 | background-image: 204 | radial-gradient(#DDD 4px, #0000 0), 205 | radial-gradient(#DDD 4px, #0000 0), 206 | radial-gradient(#DDD 4px, #0000 0), 207 | radial-gradient(#DDD 4px, #0000 0); 208 | } 209 | 25%{ 210 | background-image: 211 | radial-gradient(#DDD 4px, #0000 0), 212 | radial-gradient(#DDD 4px, #0000 0), 213 | radial-gradient(#DDD 4px, #0000 0), 214 | radial-gradient(#fff 4px, #0000 0); 215 | } 216 | 50%{ 217 | background-image: 218 | radial-gradient(#DDD 4px, #0000 0), 219 | radial-gradient(#DDD 4px, #0000 0), 220 | radial-gradient(#fff 4px, #0000 0), 221 | radial-gradient(#fff 4px, #0000 0); 222 | } 223 | 75%{ 224 | background-image: 225 | radial-gradient(#DDD 4px, #0000 0), 226 | radial-gradient(#fff 4px, #0000 0), 227 | radial-gradient(#fff 4px, #0000 0), 228 | radial-gradient(#fff 4px, #0000 0); 229 | } 230 | 100%{ 231 | background-image: 232 | radial-gradient(#fff 4px, #0000 0), 233 | radial-gradient(#fff 4px, #0000 0), 234 | radial-gradient(#fff 4px, #0000 0), 235 | radial-gradient(#fff 4px, #0000 0); 236 | } 237 | `, 238 | }, 239 | 240 | { 241 | id: "phoneChrgingLda", 242 | html: ``, 243 | css: `.loader { 244 | position: relative; 245 | width: 92px; 246 | height: 180px; 247 | border-radius: 8px; 248 | transform: translateY(-30px); 249 | background-color: #000; 250 | background-image: 251 | radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%), 252 | linear-gradient(#111, #111); 253 | background-repeat: no-repeat; 254 | background-size: 10px 10px , 84px 162px; 255 | background-position: center 2px, 4px 8px; 256 | animation: lightUp 6s linear infinite alternate; 257 | } 258 | .loader:before { 259 | content: ''; 260 | position: absolute; 261 | left: 50%; 262 | top: 190px; 263 | transform: translateX(-50%); 264 | width: 32px; 265 | height: 75px; 266 | background-image: 267 | linear-gradient(#fff, #fff), 268 | linear-gradient(#bbb, #bbb), 269 | linear-gradient(#fff, #fff); 270 | background-repeat: no-repeat; 271 | background-position: center 4px , center top, center 5px; 272 | background-size: 11px 11px , 7px 4px , 2px 100%; 273 | animation: plugin 6s linear infinite alternate; 274 | } 275 | 276 | .loader:after { 277 | content: ''; 278 | width: 30px; 279 | height: 60px; 280 | background-image: 281 | linear-gradient(#888, #888), 282 | linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%), 283 | linear-gradient(#15ff00, #15ff00), 284 | linear-gradient(#888, #888); 285 | background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px; 286 | background-position: center 0 , center 6px , center bottom , center 4px; 287 | background-repeat: no-repeat; 288 | top: 50%; 289 | left: 50%; 290 | position: absolute; 291 | transform: translate(-50% , -50%); 292 | animation: charging 6s linear infinite alternate; 293 | } 294 | 295 | @keyframes charging { 296 | 0% , 25%{ 297 | opacity: 0; 298 | background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px; 299 | } 300 | 26% , 75%{ 301 | opacity: 1; 302 | background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px; 303 | } 304 | 50% , 100%{ 305 | opacity: 1; 306 | background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px 307 | } 308 | } 309 | 310 | @keyframes lightUp { 311 | 0% , 25%{ 312 | background-image: 313 | radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%), 314 | linear-gradient(#111, #111); 315 | } 316 | 26% , 100%{ 317 | background-image: 318 | radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%), 319 | linear-gradient(#DDD, #DDD); 320 | } 321 | } 322 | 323 | 324 | @keyframes plugin { 325 | 0% , 25% { 326 | top: 190px; 327 | background-position: center 4px , center top, center 5px; 328 | } 329 | 26% , 100% { 330 | background-position: center 0 , center top, center 5px; 331 | top: 180px; 332 | } 333 | } 334 | `, 335 | }, 336 | { 337 | id: "phoneplzSldingswp", 338 | html: ``, 339 | css: `.loader { 340 | width: 112px; 341 | height: 218px; 342 | border-radius: 8px; 343 | background: #fff; 344 | background-image: 345 | linear-gradient(#c70000 30px, transparent 0), 346 | linear-gradient(#e4c200 30px, transparent 0), 347 | linear-gradient(#00a136 30px, transparent 0), 348 | linear-gradient(#0026ff 30px, transparent 0), 349 | linear-gradient(#7e0069 30px, transparent 0); 350 | background-repeat: no-repeat; 351 | background-position: 5px 5px, 5px 40px, 5px 75px, 5px 110px , 5px 145px; 352 | background-size: 90px 30px; 353 | border: 6px solid #222; 354 | border-width: 18px 6px 20px; 355 | box-sizing: border-box; 356 | position: relative; 357 | animation: clpszp 4s linear infinite; 358 | } 359 | .loader:before{ 360 | content: ''; 361 | position: absolute; 362 | left: -6px; 363 | top: -18px; 364 | width: 112px; 365 | height: 218px; 366 | border-radius: 8px; 367 | background: linear-gradient(80deg, rgba(0,0,0,0.05) 45%,rgba(0,0,0,0) 46%); 368 | } 369 | .loader:after{ 370 | content: ''; 371 | position: absolute; 372 | box-sizing: border-box; 373 | left: 60px; 374 | top: 8px; 375 | width: 24px; 376 | height: 24px; 377 | z-index: 2; 378 | backdrop-filter: blur(5px); 379 | border-radius: 50%; 380 | background: rgba(0,0,0,0.12); 381 | border: 2px solid rgba(255,255,255,0.2); 382 | animation: thumbMove 4s linear infinite ; 383 | } 384 | 385 | @keyframes thumbMove { 386 | 0% { 387 | left: 60px; 388 | top: 8px; 389 | } 390 | 10% { 391 | left: 20px; 392 | top: 8px; 393 | } 394 | 20% { 395 | left: 10px; 396 | top: 40px; 397 | } 398 | 30% { 399 | left: 50px; 400 | top: 40px; 401 | } 402 | 40% { 403 | left: 50px; 404 | top: 80px; 405 | } 406 | 50% { 407 | left: 20px; 408 | top: 80px; 409 | } 410 | 60% { 411 | left: 10px; 412 | top: 110px; 413 | } 414 | 70% { 415 | left: 60px; 416 | top: 110px; 417 | } 418 | 80% { 419 | left: 75px; 420 | top: 135px; 421 | } 422 | 90% { 423 | left: 45px; 424 | top: 155px; 425 | } 426 | 100% { 427 | left: 25px; 428 | top: 8px; 429 | } 430 | 431 | } 432 | 433 | @keyframes clpszp { 434 | 0% { 435 | background-position: 5px 5px, 5px 40px, 5px 75px, 5px 110px , 5px 145px; 436 | } 437 | 20% { 438 | background-position: -100px 5px, 5px 40px, 5px 75px, 5px 110px , 5px 145px; 439 | } 440 | 40% { 441 | background-position: -100px 5px, 100px 40px, 5px 75px, 5px 110px , 5px 145px; 442 | } 443 | 60% { 444 | background-position: -100px 5px, 100px 40px, -100px 75px, 5px 110px , 5px 145px; 445 | } 446 | 80% { 447 | background-position: -100px 5px, 100px 40px, -100px 75px, 100px 110px , 5px 145px; 448 | } 449 | 100% { 450 | background-position: -100px 5px, 100px 40px, -100px 75px, 100px 110px , -100px 145px; 451 | } 452 | } 453 | `, 454 | }, 455 | { 456 | id: "envMsLd", 457 | html: ``, 458 | css: `.loader { 459 | position: relative; 460 | border-style: solid; 461 | box-sizing: border-box; 462 | border-width: 40px 60px 30px 60px; 463 | border-color: #3760C9 #96DDFC #96DDFC #36BBF7; 464 | animation: envFloating 1s ease-in infinite alternate; 465 | } 466 | 467 | .loader:after{ 468 | content:""; 469 | position: absolute; 470 | right: 62px; 471 | top: -40px; 472 | height: 70px; 473 | width: 50px; 474 | background-image: 475 | linear-gradient(#fff 45px, transparent 0), 476 | linear-gradient(#fff 45px, transparent 0), 477 | linear-gradient(#fff 45px, transparent 0); 478 | background-repeat: no-repeat; 479 | background-size: 30px 4px; 480 | background-position: 0px 11px , 8px 35px, 0px 60px; 481 | animation: envDropping 0.75s linear infinite; 482 | } 483 | 484 | @keyframes envFloating { 485 | 0% { transform: translate(-2px, -5px)} 486 | 100% { transform: translate(0, 5px)} 487 | } 488 | 489 | @keyframes envDropping { 490 | 0% {background-position: 100px 11px , 115px 35px, 105px 60px; opacity: 1;} 491 | 50% {background-position: 0px 11px , 20px 35px, 5px 60px; } 492 | 60% {background-position: -30px 11px , 0px 35px, -10px 60px; } 493 | 75%, 100% {background-position: -30px 11px , -30px 35px, -30px 60px; opacity: 0;} 494 | } 495 | `, 496 | }, 497 | 498 | { 499 | id: "pprDltFlp", 500 | html: `Deleting`, 501 | content: 'Deleting', 502 | css: `.loader { 503 | position: relative; 504 | background: #ff3d00; 505 | width: 80px; 506 | height: 30px; 507 | line-height: 18px; 508 | text-align: center; 509 | color: #931010; 510 | font-weight: 700; 511 | letter-spacing: 0.5px; 512 | font-size: 14px; 513 | box-sizing: border-box; 514 | border: 5px groove #de3500; 515 | border-radius: 0 0 4px 4px; 516 | box-shadow: 0 5px 7px #0002; 517 | } 518 | .loader:before { 519 | content: ""; 520 | width: 70px; 521 | height: 80px; 522 | background: #fff; 523 | box-shadow: 0 0 10px #0003; 524 | position: absolute; 525 | left: 50%; 526 | transform: translatex(-50%); 527 | bottom: calc(100% + 6px); 528 | animation: loadPaper 4s ease-in infinite; 529 | } 530 | .loader:after { 531 | content: ""; 532 | width: 70px; 533 | height: 80px; 534 | background: linear-gradient(to right, #fff 50%, #0000 51%); 535 | background-size: 9px 80px; 536 | position: absolute; 537 | left: 50%; 538 | transform: translatex(-50%); 539 | top: calc(100% + 6px); 540 | animation: disposePaper 4s ease-in infinite; 541 | } 542 | 543 | @keyframes loadPaper { 544 | 0%, 545 | 10% { 546 | height: 80px; 547 | bottom: calc(100% + 40px); 548 | } 549 | 50% { 550 | height: 80px; 551 | bottom: calc(100% + 6px); 552 | } 553 | 75%, 554 | 100% { 555 | height: 0px; 556 | bottom: calc(100% + 6px); 557 | } 558 | } 559 | 560 | @keyframes disposePaper { 561 | 0%, 562 | 50% { 563 | height: 0px; 564 | top: calc(100% + 6px); 565 | } 566 | 75% { 567 | height: 80px; 568 | top: calc(100% + 6px); 569 | opacity: 1; 570 | } 571 | 100% { 572 | height: 80px; 573 | top: calc(100% + 40px); 574 | opacity: 0; 575 | } 576 | } 577 | `, 578 | }, 579 | 580 | { 581 | id: "pprDltmch", 582 | html: ``, 583 | css: `.loader { 584 | position: relative; 585 | width: 120px; 586 | height: 55px; 587 | background-repeat: no-repeat; 588 | background-image: 589 | radial-gradient(circle 2.5px , #ff3d00 100%, transparent 0), 590 | radial-gradient(circle 2.5px , #ff3d00 100%, transparent 0), 591 | linear-gradient(#f0fda3 20px, transparent 0), 592 | linear-gradient(#333 90px, transparent 0), 593 | linear-gradient(#049b87 120px, transparent 0), 594 | linear-gradient(to right, #017a6a 10%,#333 10%,#333 90%,#017a6a 90%) 595 | ; 596 | 597 | background-size: 5px 5px, 5px 5px, 30px 5px, 90px 10px, 120px 45px , 100px 15px; 598 | background-position: 48px 20px , 60px 20px, 10px 20px, center bottom , center bottom , center 0 ; 599 | 600 | } 601 | .loader:before { 602 | content: ""; 603 | width: 70px; 604 | height: 80px; 605 | background-color: #fff; 606 | background-image: linear-gradient(to bottom, #FFF 50%, #f86133 51%), 607 | linear-gradient(to bottom, #bbb 50%, #0000 51%); 608 | background-size: 60px 20px, 60px 10px; 609 | background-repeat: no-repeat, repeat-y; 610 | background-position: center -5px , center 0; 611 | box-shadow: 0 0 10px #0003; 612 | position: absolute; 613 | left: 50%; 614 | transform: translatex(-50%); 615 | bottom: calc(100% + 30px); 616 | animation: loadPaper 2s ease-in infinite; 617 | } 618 | .loader:after { 619 | content: ""; 620 | width: 70px; 621 | height: 90px; 622 | background-image: 623 | linear-gradient(to right, #fff 50%, #0000 51%), 624 | linear-gradient(to right, #fff 50%, #0000 51%), 625 | linear-gradient(to right, #fff 50%, #0000 51%), 626 | linear-gradient(to right, #fff 50%, #0000 51%), 627 | linear-gradient(to right, #fff 50%, #0000 51%), 628 | linear-gradient(to right, #fff 50%, #0000 51%), 629 | linear-gradient(to right, #fff 50%, #0000 51%), 630 | linear-gradient(to right, #fff 50%, #0000 51%); 631 | background-size: 10px 80px; 632 | background-position: 0 0px , 9px 5px, 18px 0px, 27px 7px, 633 | 36px 10px, 45px 5px, 55px 0px, 64px 8px; 634 | background-repeat: no-repeat; 635 | position: absolute; 636 | left: 50%; 637 | transform: translatex(-50%); 638 | top: calc(100% + 6px); 639 | animation: disposePaper 2s ease-in infinite; 640 | } 641 | 642 | @keyframes loadPaper { 643 | 0% { 644 | opacity: 0; 645 | height: 80px; 646 | bottom: calc(100% + 30px); 647 | } 648 | 2% { 649 | opacity: 0; 650 | height: 80px; 651 | bottom: calc(100% + 15px); 652 | } 653 | 50% { 654 | height: 80px; 655 | bottom: calc(100% - 10px); 656 | } 657 | 75%, 658 | 100% { 659 | height: 0px; 660 | bottom: calc(100% - 10px); 661 | } 662 | } 663 | 664 | @keyframes disposePaper { 665 | 0%, 666 | 60% { 667 | height: 0px; 668 | top: calc(100% - 9px); 669 | background-position: 0 0px , 9px 0, 18px 0, 27px 0, 670 | 36px 0, 45px 0, 55px 0, 64px 0; 671 | } 672 | 80% { 673 | height: 90px; 674 | top: calc(100% - 9px); 675 | opacity: 1; 676 | } 677 | 100% { 678 | height: 90px; 679 | top: calc(100% + 25px); 680 | background-position: 0 0px , 9px 5px, 18px 0px, 27px 7px, 681 | 36px 10px, 45px 5px, 55px 0px, 64px 8px; 682 | opacity: 0; 683 | } 684 | } 685 | `, 686 | }, 687 | { 688 | id: "audCst", 689 | html: ``, 690 | css: `.loader { 691 | margin: auto; 692 | width: 100px; 693 | height: 30px; 694 | overflow: hidden; 695 | position: relative; 696 | background: rgba(0, 0, 0, 0.3); 697 | border-radius: 5px; 698 | box-shadow: 0px 35px 0 -5px #aaa, 0 -5px 0 0px #ddd, 0 -25px 0 -5px #fff, 699 | -25px -30px 0 0px #ddd, -25px 30px 0 0px #ddd, 25px -30px 0 0px #ddd, 700 | 25px 30px 0 0px #ddd, 20px 10px 0 5px #ddd, 20px -10px 0 5px #ddd, 701 | -20px -10px 0 5px #ddd, -20px 10px 0 5px #ddd; 702 | } 703 | .loader:after, 704 | .loader:before { 705 | content: ""; 706 | border-radius: 100%; 707 | width: 35px; 708 | height: 35px; 709 | display: block; 710 | position: absolute; 711 | border: 4px dashed #fff; 712 | bottom: -4px; 713 | transform: rotate(0deg); 714 | box-sizing: border-box; 715 | animation: tape 4s linear infinite; 716 | } 717 | .loader:before { 718 | right: 0; 719 | box-shadow: 0 0 0 4px #fff, 0 0 0 34px #000; 720 | } 721 | .loader:after { 722 | left: 0; 723 | box-shadow: 0 0 0 4px #fff, 0 0 0 65px #000; 724 | } 725 | 726 | @keyframes tape { 727 | 0% { 728 | transform: rotate(0deg) scale(0.4); 729 | } 730 | 100% { 731 | transform: rotate(-360deg) scale(0.4); 732 | } 733 | } 734 | `, 735 | }, 736 | { 737 | id: "audRolSp", 738 | html: ``, 739 | css: `.loader { 740 | width: 120px; 741 | height: 80px; 742 | position: relative; 743 | transform: rotate(-90deg); 744 | background: linear-gradient(174deg, #0000 49%,#000 50%, #0000 51%); 745 | } 746 | .loader:after, 747 | .loader:before { 748 | content: ""; 749 | border-radius: 100%; 750 | width: 35px; 751 | height: 35px; 752 | display: block; 753 | position: absolute; 754 | border: 4px dashed #fff; 755 | bottom: 49px; 756 | transform: rotate(0deg); 757 | box-sizing: border-box; 758 | animation: tape 4s linear infinite; 759 | 760 | } 761 | .loader:before { 762 | right: -14px; 763 | box-shadow: 0 0 0 4px #fff, 0 0 0 34px #000 , 0 0 5px 34px #0005; 764 | } 765 | .loader:after { 766 | left: -13px; 767 | box-shadow: 0 0 0 4px #fff, 0 0 0 65px #000, 0 0 5px 65px #0005; 768 | } 769 | 770 | @keyframes tape { 771 | 0% { transform: rotate(0deg) scale(0.4) } 772 | 100% { transform: rotate(-360deg) scale(0.4) } 773 | } 774 | `, 775 | }, 776 | { 777 | id: "printerLd", 778 | html: ``, 779 | css: `.loader { 780 | position: relative; 781 | width: 120px; 782 | height: 55px; 783 | background-repeat: no-repeat; 784 | background-image: 785 | radial-gradient(circle 2.5px , #ff3d00 100%, transparent 0), 786 | linear-gradient(#525252 90px, transparent 0), 787 | linear-gradient(#ececec 120px, transparent 0), 788 | linear-gradient(to right, #eee 10%,#333 10%,#333 90%,#eee 90%) 789 | ; 790 | 791 | background-size: 5px 5px, 90px 10px, 120px 45px , 100px 15px; 792 | background-position: 110px 15px,center bottom , center bottom , center 0 ; 793 | 794 | } 795 | .loader:before { 796 | content: ""; 797 | width: 70px; 798 | background-color: #fff; 799 | box-shadow: 0 0 10px #0003; 800 | position: absolute; 801 | left: 50%; 802 | transform: translatex(-50%); 803 | bottom: calc(100% - 10px); 804 | animation: printerPaper 4s ease-in infinite; 805 | } 806 | .loader:after { 807 | content: ""; 808 | width: 70px; 809 | height: 80px; 810 | background-color: #fff; 811 | background-image: linear-gradient(to bottom, #FFF 50%, #ff3d00 51%), 812 | linear-gradient(to bottom, #bbb 50%, #0000 51%); 813 | background-size: 60px 20px, 60px 10px; 814 | background-repeat: no-repeat, repeat-y; 815 | background-position: center 55px , center 0; 816 | position: absolute; 817 | left: 50%; 818 | transform: translatex(-50%) rotate(180deg); 819 | box-shadow: 0 10px #fff inset; 820 | top: calc(100% - 8px); 821 | animation: PrintedPaper 4s ease-in infinite; 822 | } 823 | 824 | @keyframes printerPaper { 825 | 0% , 25% { height: 50px} 826 | 75%, 100% { height: 0} 827 | } 828 | 829 | @keyframes PrintedPaper { 830 | 0%, 30% { 831 | height: 0px; 832 | top: calc(100% - 8px); 833 | } 834 | 835 | 80% { 836 | height: 80px; 837 | top: calc(100% - 8px); 838 | opacity: 1; 839 | } 840 | 100% { 841 | height: 80px; 842 | top: calc(100% + 10px); 843 | opacity: 0; 844 | } 845 | } 846 | `, 847 | }, 848 | { 849 | id: "washingMachine", 850 | html: ``, 851 | css: `.loader { 852 | width: 120px; 853 | height: 150px; 854 | background-color: #fff; 855 | background-repeat: no-repeat; 856 | background-image: linear-gradient(#ddd 50%, #bbb 51%), 857 | linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd), 858 | radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%), 859 | radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%), 860 | radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%); 861 | background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px; 862 | background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px; 863 | position: relative; 864 | border-radius: 6%; 865 | animation: shake 3s ease-in-out infinite; 866 | transform-origin: 60px 180px; 867 | } 868 | .loader:before { 869 | content: ""; 870 | position: absolute; 871 | left: 5px; 872 | top: 100%; 873 | width: 7px; 874 | height: 5px; 875 | background: #aaa; 876 | border-radius: 0 0 4px 4px; 877 | box-shadow: 102px 0 #aaa; 878 | } 879 | 880 | .loader:after { 881 | content: ""; 882 | position: absolute; 883 | width: 95px; 884 | height: 95px; 885 | left: 0; 886 | right: 0; 887 | margin: auto; 888 | bottom: 20px; 889 | background-color: #bbdefb; 890 | background-image: 891 | linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ), 892 | linear-gradient(135deg, #64b5f6 50%, #607d8b 51%); 893 | background-size: 30px 100%, 90px 80px; 894 | border-radius: 50%; 895 | background-repeat: repeat, no-repeat; 896 | background-position: 0 0; 897 | box-sizing: border-box; 898 | border: 10px solid #DDD; 899 | box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset; 900 | animation: spin 3s ease-in-out infinite; 901 | } 902 | 903 | @keyframes spin { 904 | 0% { transform: rotate(0deg) } 905 | 50% { transform: rotate(360deg) } 906 | 75% { transform: rotate(750deg) } 907 | 100% { transform: rotate(1800deg) } 908 | } 909 | @keyframes shake { 910 | 65%, 80%, 88%, 96% { transform: rotate(0.5deg) } 911 | 50%, 75%, 84%, 92% { transform: rotate(-0.5deg) } 912 | 0%, 50%, 100% { transform: rotate(0) } 913 | }`, 914 | }, 915 | 916 | { 917 | id: "kolIcereamClrShift", 918 | html: ``, 919 | css: `.loader { 920 | height: 150px; 921 | width: 100px; 922 | border-radius: 55px 55px 10px 10px; 923 | position: relative; 924 | background: #FF3D00; 925 | 926 | background-image: linear-gradient(0deg, 927 | #f63a99 25%, 928 | #30dcf6 25%, 929 | #30dcf6 25%, 930 | #30dcf6 50%, 931 | #f2d200 50%, 932 | #f2d200 50%, 933 | #f2d200 75%, 934 | #70ca5c 75%); 935 | background-position: 0px 0px; 936 | background-size: auto 175px; 937 | background-repeat: repeat-y; 938 | animation: colorShift 6s linear infinite; 939 | 940 | } 941 | .loader:before { 942 | content: ''; 943 | position: absolute; 944 | left: 10px; 945 | bottom: 15px; 946 | width: 15px; 947 | height: 100px; 948 | border-radius: 50px; 949 | background: rgba(255, 255, 255, 0.5); 950 | 951 | } 952 | 953 | .loader:after { 954 | content: ""; 955 | position: absolute; 956 | left: 50%; 957 | top: 100%; 958 | transform: translate(-50% , 0); 959 | box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset; 960 | width: 32px; 961 | height: 45px; 962 | background: #E09C5F; 963 | border-radius: 0 0 12px 12px; 964 | } 965 | 966 | @keyframes colorShift { 967 | to { background-position: 0 175px} 968 | } 969 | 970 | `, 971 | }, 972 | { 973 | id: "bearWatch", 974 | html: ``, 975 | css: `.loader { 976 | width: 160px; 977 | height: 185px; 978 | position: relative; 979 | background: #fff; 980 | border-radius: 100px 100px 0 0; 981 | } 982 | .loader:after { 983 | content: ""; 984 | position: absolute; 985 | width: 100px; 986 | height: 125px; 987 | left: 50%; 988 | top: 25px; 989 | transform: translateX(-50%); 990 | background-image: radial-gradient(circle, #000 48%, transparent 55%), 991 | radial-gradient(circle, #000 48%, transparent 55%), 992 | radial-gradient(circle, #fff 30%, transparent 45%), 993 | radial-gradient(circle, #000 48%, transparent 51%), 994 | linear-gradient(#000 20px, transparent 0), 995 | linear-gradient(#cfecf9 60px, transparent 0), 996 | radial-gradient(circle, #cfecf9 50%, transparent 51%), 997 | radial-gradient(circle, #cfecf9 50%, transparent 51%); 998 | background-repeat: no-repeat; 999 | background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px, 1000 | 50px 25px, 70px 70px, 70px 70px; 1001 | background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px, 1002 | 50% 50px, 50% 22px, 50% 45px; 1003 | animation: faceLift 3s linear infinite alternate; 1004 | } 1005 | .loader:before { 1006 | content: ""; 1007 | position: absolute; 1008 | width: 140%; 1009 | height: 125px; 1010 | left: -20%; 1011 | top: 0; 1012 | background-image: radial-gradient(circle, #fff 48%, transparent 50%), 1013 | radial-gradient(circle, #fff 48%, transparent 50%); 1014 | background-repeat: no-repeat; 1015 | background-size: 65px 65px; 1016 | background-position: 0px 12px, 145px 12px; 1017 | animation: earLift 3s linear infinite alternate; 1018 | } 1019 | 1020 | @keyframes faceLift { 1021 | 0% { 1022 | transform: translateX(-60%); 1023 | } 1024 | 100% { 1025 | transform: translateX(-30%); 1026 | } 1027 | } 1028 | @keyframes earLift { 1029 | 0% { 1030 | transform: translateX(10px); 1031 | } 1032 | 100% { 1033 | transform: translateX(0px); 1034 | } 1035 | } 1036 | `, 1037 | }, 1038 | 1039 | 1040 | 1041 | 1042 | { 1043 | id: "dnsEgg", 1044 | html: ``, 1045 | css: `.loader { 1046 | display: block; 1047 | position: relative; 1048 | width: 118px; 1049 | height: 160px; 1050 | background-color: #FFF; 1051 | border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 1052 | transform-origin: 50% 100%; 1053 | animation: 2s eggRot linear infinite alternate; 1054 | } 1055 | .loader:after{ 1056 | content:""; 1057 | position: absolute; 1058 | left: 50%; 1059 | bottom: 15%; 1060 | width: 80px; 1061 | height: 86px; 1062 | transform: translateX(-50%); 1063 | background-color: #ffd900; 1064 | border-radius: 50% ; 1065 | } 1066 | 1067 | @keyframes eggRot { 1068 | 0%{ transform: rotate(-25deg)} 1069 | 100%{ transform: rotate(25deg)} 1070 | } 1071 | `, 1072 | }, 1073 | 1074 | 1075 | 1076 | 1077 | { 1078 | id: "grpCookPanEgg", 1079 | html: ``, 1080 | css: `.loader { 1081 | width: 100px; 1082 | height: 100px; 1083 | display: block; 1084 | margin: auto; 1085 | position: relative; 1086 | background: #222; 1087 | border-radius: 50%; 1088 | box-sizing: border-box; 1089 | transform-origin: 170px 50px; 1090 | border: 4px solid #333; 1091 | box-shadow: 3px 4px #0003 inset, 0 0 6px #0002 inset; 1092 | animation: panmov 0.4s ease-in-out infinite alternate; 1093 | } 1094 | .loader::before { 1095 | content: ''; 1096 | position: absolute; 1097 | left: 50%; 1098 | top: 50%; 1099 | transform: translate(-50%, -50%) skew(-15deg, 15deg) rotate(-15deg); 1100 | width: 55px; 1101 | height: 53px; 1102 | background: #fff; 1103 | background-image: 1104 | radial-gradient(circle 3px , #fff6 90%, transparent 10%), 1105 | radial-gradient(circle 12px , #ffc400 90%, transparent 10%), 1106 | radial-gradient(circle 12px , #ffae00 100%, transparent 0); 1107 | background-repeat: no-repeat; 1108 | background-position: -4px -6px , -2px -2px , -1px -1px; 1109 | box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset; 1110 | border-radius: 47% 36% 50% 50% / 49% 45% 42% 44%; 1111 | animation: ylmov 0.6s ease-in-out infinite alternate; 1112 | } 1113 | .loader::after { 1114 | content: ''; 1115 | position: absolute; 1116 | left: 100%; 1117 | top: 48px; 1118 | height: 15px; 1119 | width: 70px; 1120 | background: #222222; 1121 | border-radius: 0 8px 8px 0; 1122 | box-shadow: 3px 0 3px #eee2 inset; 1123 | transform: rotate(5deg) translateX(3px); 1124 | } 1125 | 1126 | @keyframes panmov { 1127 | 0% , 10% { transform: rotate(5deg) } 1128 | 90% , 100% { transform: rotate(-5deg) } 1129 | } 1130 | @keyframes ylmov { 1131 | to { 1132 | border-radius: 50% 36% 50% 50% / 49% 50% 45% 45%; 1133 | background-position: -2px -4px , 2px 2px , 1px 1px; 1134 | } 1135 | } 1136 | `, 1137 | }, 1138 | 1139 | { 1140 | id: "grpPanFlyEgg", 1141 | html: ``, 1142 | css: `.loader { 1143 | position: relative; 1144 | width: 120px; 1145 | height: 14px; 1146 | border-radius: 0 0 15px 15px; 1147 | background-color: #3e494d; 1148 | box-shadow: 0 -1px 4px #5d6063 inset; 1149 | animation: panex 0.5s linear alternate infinite; 1150 | transform-origin: 170px 0; 1151 | z-index: 10; 1152 | perspective: 300px; 1153 | 1154 | } 1155 | .loader::before { 1156 | content: ''; 1157 | position: absolute; 1158 | left: calc( 100% - 2px); 1159 | top: 0; 1160 | z-index: -2; 1161 | height: 10px; 1162 | width: 70px; 1163 | border-radius: 0 4px 4px 0; 1164 | background-repeat: no-repeat; 1165 | background-image: linear-gradient(#6c4924, #4b2d21), linear-gradient(#4d5457 24px, transparent 0), linear-gradient(#9f9e9e 24px, transparent 0); 1166 | background-size: 50px 10px , 4px 8px , 24px 4px; 1167 | background-position: right center , 17px center , 0px center; 1168 | } 1169 | .loader::after { 1170 | content: ''; 1171 | position: absolute; 1172 | left: 50%; 1173 | top: 0; 1174 | z-index: -2; 1175 | transform: translate(-50% , -20px) rotate3d(75, -2, 3, 78deg); 1176 | width: 55px; 1177 | height: 53px; 1178 | background: #fff; 1179 | background-image: 1180 | radial-gradient(circle 3px , #fff6 90%, transparent 10%), 1181 | radial-gradient(circle 12px , #ffc400 90%, transparent 10%), 1182 | radial-gradient(circle 12px , #ffae00 100%, transparent 0); 1183 | background-repeat: no-repeat; 1184 | background-position: -4px -6px , -2px -2px , -1px -1px; 1185 | box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset; 1186 | border-radius: 47% 36% 50% 50% / 49% 45% 42% 44%; 1187 | animation: eggRst 1s ease-out infinite; 1188 | } 1189 | 1190 | @keyframes eggRst { 1191 | 0% , 100%{ transform: translate(-50%, -20px) rotate3d(90, 0, 0, 90deg); opacity: 0; } 1192 | 10% , 90% { transform: translate(-50%, -30px) rotate3d(90, 0, 0, 90deg); opacity: 1; } 1193 | 25% {transform: translate(-50% , -40px) rotate3d(85, 17, 2, 70deg) } 1194 | 75% {transform: translate(-50% , -40px) rotate3d(75, -3, 2, 70deg) } 1195 | 50% {transform: translate(-55% , -50px) rotate3d(75, -8, 3, 50deg) } 1196 | } 1197 | @keyframes panex { 1198 | 0%{ transform: rotate(-5deg) } 1199 | 100%{ transform: rotate(10deg) } 1200 | } 1201 | `, 1202 | }, 1203 | 1204 | 1205 | 1206 | 1207 | ] -------------------------------------------------------------------------------- /js/loaders/line.js: -------------------------------------------------------------------------------- 1 | export const LINE = [ 2 | { 3 | id: "6bnzdi6n4z6", 4 | html: ``, 5 | css: `.loader { 6 | width: 8px; 7 | height: 40px; 8 | border-radius: 4px; 9 | display: inline-block; 10 | margin-left: 20px; 11 | margin-top: 10px; 12 | position: relative; 13 | background: currentColor; 14 | color: #FFF; 15 | box-sizing: border-box; 16 | animation: animloader 0.3s 0.3s linear infinite alternate; 17 | } 18 | .loader::after, 19 | .loader::before { 20 | content: ''; 21 | box-sizing: border-box; 22 | width: 8px; 23 | height: 40px; 24 | border-radius: 4px; 25 | background: currentColor; 26 | position: absolute; 27 | bottom: 0; 28 | left: 20px; 29 | animation: animloader1 0.3s 0.45s linear infinite alternate; 30 | } 31 | .loader::before { 32 | left: -20px; 33 | animation-delay: 0s; 34 | } 35 | 36 | @keyframes animloader { 37 | 0% { 38 | height: 40px; 39 | transform: translateY(0); 40 | } 41 | 100% { 42 | height: 10px; 43 | transform: translateY(30px); 44 | } 45 | } 46 | 47 | @keyframes animloader1 { 48 | 0% { 49 | height: 48px; 50 | } 51 | 100% { 52 | height: 4.8px; 53 | } 54 | } 55 | `, 56 | }, { 57 | id: "3n68si8hgcw", 58 | html: ``, 59 | css: `.loader { 60 | width: 8px; 61 | height: 40px; 62 | border-radius: 4px; 63 | display: block; 64 | margin: 20px auto; 65 | position: relative; 66 | background: currentColor; 67 | color: #FFF; 68 | box-sizing: border-box; 69 | animation: animloader 0.3s 0.3s linear infinite alternate; 70 | } 71 | 72 | .loader::after, .loader::before { 73 | content: ''; 74 | width: 8px; 75 | height: 40px; 76 | border-radius: 4px; 77 | background: currentColor; 78 | position: absolute; 79 | top: 50%; 80 | transform: translateY(-50%); 81 | left: 20px; 82 | box-sizing: border-box; 83 | animation: animloader 0.3s 0.45s linear infinite alternate; 84 | } 85 | .loader::before { 86 | left: -20px; 87 | animation-delay: 0s; 88 | } 89 | 90 | @keyframes animloader { 91 | 0% { height: 48px} 92 | 100% { height: 4px} 93 | } 94 | `, 95 | }, { 96 | id: "f9tbqzhdk0u", 97 | html: ``, 98 | css: `.loader { 99 | width: 8px; 100 | height: 48px; 101 | display: block; 102 | margin: auto; 103 | left: -20px; 104 | position: relative; 105 | border-radius: 4px; 106 | box-sizing: border-box; 107 | animation: animloader 1s linear infinite alternate; 108 | } 109 | 110 | @keyframes animloader { 111 | 0% { 112 | box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white; 113 | } 114 | 50% { 115 | box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white; 116 | } 117 | 100% { 118 | box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25); 119 | } 120 | } 121 | `, 122 | }, 123 | 124 | { 125 | id: "dkndou5oj6o", 126 | html: ``, 127 | css: `.loader { 128 | width: 8px; 129 | height: 48px; 130 | display: inline-block; 131 | position: relative; 132 | border-radius: 4px; 133 | color: #FFF; 134 | box-sizing: border-box; 135 | animation: animloader 0.6s linear infinite; 136 | } 137 | 138 | @keyframes animloader { 139 | 0% { 140 | box-shadow: 20px -10px, 40px 10px, 60px 0px; 141 | } 142 | 25% { 143 | box-shadow: 20px 0px, 40px 0px, 60px 10px; 144 | } 145 | 50% { 146 | box-shadow: 20px 10px, 40px -10px, 60px 0px; 147 | } 148 | 75% { 149 | box-shadow: 20px 0px, 40px 0px, 60px -10px; 150 | } 151 | 100% { 152 | box-shadow: 20px -10px, 40px 10px, 60px 0px; 153 | } 154 | } 155 | `, 156 | }, 157 | 158 | { 159 | id: "nd6o-mtrix", 160 | html: ``, 161 | css: `.loader { 162 | width:45px; 163 | height:40px; 164 | background: 165 | linear-gradient(#0000 calc(1*100%/6),#fff 0 calc(3*100%/6),#0000 0), 166 | linear-gradient(#0000 calc(2*100%/6),#fff 0 calc(4*100%/6),#0000 0), 167 | linear-gradient(#0000 calc(3*100%/6),#fff 0 calc(5*100%/6),#0000 0); 168 | background-size:10px 400%; 169 | background-repeat: no-repeat; 170 | animation:matrix 1s infinite linear; 171 | } 172 | @keyframes matrix { 173 | 0% {background-position: 0% 100%, 50% 100%, 100% 100% } 174 | 100% {background-position: 0% 0%, 50% 0%, 100% 0% } 175 | } 176 | `, 177 | }, 178 | 179 | 180 | { 181 | id: "xr1ogquld0d", 182 | html: ``, 183 | css: `.loader { 184 | width: 48px; 185 | height: 6px; 186 | display: block; 187 | margin: auto; 188 | position: relative; 189 | border-radius: 4px; 190 | color: #FFF; 191 | box-sizing: border-box; 192 | animation: animloader 0.6s linear infinite; 193 | } 194 | 195 | @keyframes animloader { 196 | 0% { box-shadow: -10px 20px, 10px 35px , 0px 50px } 197 | 25% { box-shadow: 0px 20px , 0px 35px, 10px 50px } 198 | 50% { box-shadow: 10px 20px, -10px 35px, 0px 50px } 199 | 75% { box-shadow: 0px 20px, 0px 35px, -10px 50px } 200 | 100% { box-shadow: -10px 20px, 10px 35px, 0px 50px} 201 | } 202 | `, 203 | }, { 204 | id: "ll3kbbwjsy", 205 | html: ``, 206 | css: `.loader { 207 | width: 4.8px; 208 | height: 4.8px; 209 | display: inline-block; 210 | margin-top: 20px; 211 | position: relative; 212 | border-radius: 4px; 213 | color: #FFF; 214 | background: currentColor; 215 | box-sizing: border-box; 216 | animation: animloader 0.3s 0.3s linear infinite alternate; 217 | } 218 | .loader::after, 219 | .loader::before { 220 | content: ''; 221 | box-sizing: border-box; 222 | width: 4.8px; 223 | height: 4.8px; 224 | border-radius: 4px; 225 | background: currentColor; 226 | position: absolute; 227 | left: 0; 228 | top: 15px; 229 | animation: animloader 0.3s 0.45s linear infinite alternate; 230 | } 231 | .loader::after { 232 | top: -15px; 233 | animation-delay: 0s; 234 | } 235 | 236 | @keyframes animloader { 237 | 0% { 238 | width: 4.8px; 239 | } 240 | 100% { 241 | width: 48px; 242 | } 243 | }`, 244 | }, { 245 | id: "dvitkpqg7fa", 246 | html: ``, 247 | css: `.loader { 248 | width: 4.8px; 249 | height: 4.8px; 250 | display: block; 251 | margin: 20px auto; 252 | position: relative; 253 | border-radius: 4px; 254 | color: #FFF; 255 | background: currentColor; 256 | box-sizing: border-box; 257 | animation: animloader 0.3s 0.3s linear infinite alternate; 258 | } 259 | .loader::after, 260 | .loader::before { 261 | content: ''; 262 | box-sizing: border-box; 263 | width: 4.8px; 264 | height: 4.8px; 265 | border-radius: 4px; 266 | background: currentColor; 267 | position: absolute; 268 | left: 50%; 269 | transform: translateX(-50%); 270 | top: 15px; 271 | animation: animloader 0.3s 0.45s linear infinite alternate; 272 | } 273 | .loader::after { 274 | top: -15px; 275 | animation-delay: 0s; 276 | } 277 | 278 | @keyframes animloader { 279 | 0% { width: 4.8px } 280 | 100% { width: 48px} 281 | } 282 | `, 283 | }, 284 | { 285 | id: "linSpiLox", 286 | html: ``, 287 | css: `.loader { 288 | color: #FFF; 289 | position: relative; 290 | font-size: 11px; 291 | background: #FFF; 292 | animation: escaleY 1s infinite ease-in-out; 293 | width: 1em; 294 | height: 4em; 295 | animation-delay: -0.16s; 296 | } 297 | .loader:before, 298 | .loader:after { 299 | content: ''; 300 | position: absolute; 301 | top: 0; 302 | left: 2em; 303 | background: #FFF; 304 | width: 1em; 305 | height: 4em; 306 | animation: escaleY 1s infinite ease-in-out; 307 | } 308 | .loader:before { 309 | left: -2em; 310 | animation-delay: -0.32s; 311 | } 312 | 313 | @keyframes escaleY { 314 | 0%, 80%, 100% { 315 | box-shadow: 0 0; 316 | height: 4em; 317 | } 318 | 40% { 319 | box-shadow: 0 -2em; 320 | height: 5em; 321 | } 322 | } 323 | `, 324 | }, 325 | 326 | { 327 | id: "zdy2kji5lvp", 328 | html: ``, 329 | css: `.loader { 330 | width: 8px; 331 | height: 48px; 332 | display: inline-block; 333 | position: relative; 334 | border-radius: 4px; 335 | box-sizing: border-box; 336 | animation: animloader 1s linear infinite alternate; 337 | } 338 | 339 | @keyframes animloader { 340 | 0% { 341 | box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); 342 | } 343 | 20% { 344 | box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); 345 | } 346 | 40% { 347 | box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); 348 | } 349 | 60% { 350 | box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0); 351 | } 352 | 80% { 353 | box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0); 354 | } 355 | 100% { 356 | box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white; 357 | } 358 | } 359 | `, 360 | }, 361 | { 362 | id: "spnPlixShrk34glsf", 363 | html: ``, 364 | css: `.loader { 365 | height: 30px; 366 | width: 10px; 367 | border-radius: 4px; 368 | color: #fff; 369 | background: currentColor; 370 | position: relative; 371 | animation: ht 1s ease-in infinite alternate; 372 | box-shadow: 15px 0 0 -1px , -15px 0 0 -1px , 373 | 30px 0 0 -2px , -30px 0 0 -2px, 374 | 45px 0 0 -3px , -45px 0 0 -3px; 375 | } 376 | 377 | @keyframes ht { 378 | 100% { height: 0px } 379 | } 380 | `, 381 | }, 382 | 383 | { 384 | id: "lnBallStpUp", 385 | html: ``, 386 | css: `.loader { 387 | position: relative; 388 | width: 75px; 389 | height: 100px; 390 | background-repeat: no-repeat; 391 | background-image: linear-gradient(#DDD 50px, transparent 0), 392 | linear-gradient(#DDD 50px, transparent 0), 393 | linear-gradient(#DDD 50px, transparent 0), 394 | linear-gradient(#DDD 50px, transparent 0), 395 | linear-gradient(#DDD 50px, transparent 0); 396 | background-size: 8px 100%; 397 | background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px; 398 | animation: pillerPushUp 4s linear infinite; 399 | } 400 | .loader:after { 401 | content: ''; 402 | position: absolute; 403 | bottom: 10px; 404 | left: 0; 405 | width: 10px; 406 | height: 10px; 407 | background: #de3500; 408 | border-radius: 50%; 409 | animation: ballStepUp 4s linear infinite; 410 | } 411 | 412 | @keyframes pillerPushUp { 413 | 0% , 40% , 100%{background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px} 414 | 50% , 90% {background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px} 415 | } 416 | 417 | @keyframes ballStepUp { 418 | 0% {transform: translate(0, 0)} 419 | 5% {transform: translate(8px, -14px)} 420 | 10% {transform: translate(15px, -10px)} 421 | 17% {transform: translate(23px, -24px)} 422 | 20% {transform: translate(30px, -20px)} 423 | 27% {transform: translate(38px, -34px)} 424 | 30% {transform: translate(45px, -30px)} 425 | 37% {transform: translate(53px, -44px)} 426 | 40% {transform: translate(60px, -40px)} 427 | 50% {transform: translate(60px, 0)} 428 | 57% {transform: translate(53px, -14px)} 429 | 60% {transform: translate(45px, -10px)} 430 | 67% {transform: translate(37px, -24px)} 431 | 70% {transform: translate(30px, -20px)} 432 | 77% {transform: translate(22px, -34px)} 433 | 80% {transform: translate(15px, -30px)} 434 | 87% {transform: translate(7px, -44px)} 435 | 90% {transform: translate(0, -40px)} 436 | 100% {transform: translate(0, 0);} 437 | } 438 | `, 439 | }, 440 | { 441 | id: "sndWveBr", 442 | html: ``, 443 | css: `.loader { 444 | position: relative; 445 | width: 85px; 446 | height: 50px; 447 | background-repeat: no-repeat; 448 | background-image: linear-gradient(#FFF 50px, transparent 0), 449 | linear-gradient(#FFF 50px, transparent 0), 450 | linear-gradient(#FFF 50px, transparent 0), 451 | linear-gradient(#FFF 50px, transparent 0), 452 | linear-gradient(#FFF 50px, transparent 0), 453 | linear-gradient(#FFF 50px, transparent 0); 454 | background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center; 455 | animation: rikSpikeRoll 0.65s linear infinite alternate; 456 | } 457 | @keyframes rikSpikeRoll { 458 | 0% { background-size: 10px 3px;} 459 | 16% { background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px} 460 | 33% { background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px} 461 | 50% { background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px} 462 | 66% { background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px} 463 | 83% { background-size: 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px} 464 | 100% { background-size: 10px 3px, 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px} 465 | } 466 | `, 467 | }, 468 | { 469 | id: "brPpUp", 470 | html: ``, 471 | css: `.loader { 472 | position: relative; 473 | width: 55px; 474 | height: 55px; 475 | background-repeat: no-repeat; 476 | background-image: linear-gradient(#FFF 50px, transparent 0), 477 | linear-gradient(#FFF 50px, transparent 0), 478 | linear-gradient(#FFF 50px, transparent 0), 479 | linear-gradient(#FFF 50px, transparent 0), 480 | linear-gradient(#FFF 50px, transparent 0), 481 | linear-gradient(#FFF 50px, transparent 0); 482 | background-size: 5px 40px; 483 | background-position: 0px center, 10px center, 20px center, 30px center, 40px center, 50px center; 484 | animation: spikeUp 1s linear infinite alternate; 485 | } 486 | @keyframes spikeUp { 487 | 0% { background-size: 5px 40px} 488 | 16% { background-size: 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px} 489 | 33% { background-size: 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px} 490 | 50% { background-size: 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px} 491 | 66% { background-size: 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px} 492 | 83% { background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px} 493 | 100% { background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px} 494 | } 495 | `, 496 | }, 497 | 498 | 499 | 500 | { 501 | id: "ewhrfgl50sf", 502 | html: ``, 503 | css: `.loader { 504 | width: 20px; 505 | height: 12px; 506 | display: block; 507 | margin: auto; 508 | position: relative; 509 | border-radius: 4px; 510 | color: #FFF; 511 | background: currentColor; 512 | box-sizing: border-box; 513 | animation: animloader 0.6s 0.3s ease infinite alternate; 514 | } 515 | .loader::after, 516 | .loader::before { 517 | content: ''; 518 | box-sizing: border-box; 519 | width: 20px; 520 | height: 12px; 521 | background: currentColor; 522 | position: absolute; 523 | border-radius: 4px; 524 | top: 0; 525 | right: 110%; 526 | animation: animloader 0.6s ease infinite alternate; 527 | } 528 | .loader::after { 529 | left: 110%; 530 | right: auto; 531 | animation-delay: 0.6s; 532 | } 533 | 534 | @keyframes animloader { 535 | 0% { 536 | width: 20px; 537 | } 538 | 100% { 539 | width: 48px; 540 | } 541 | }`, 542 | }, 543 | ] -------------------------------------------------------------------------------- /js/loaders/progress.js: -------------------------------------------------------------------------------- 1 | export const PROGRESS = [ 2 | { 3 | id: "bbi2epoor36", 4 | html: ``, 5 | css: `.loader { 6 | width: 100%; 7 | height: 4.8px; 8 | display: inline-block; 9 | position: relative; 10 | background: rgba(255, 255, 255, 0.15); 11 | overflow: hidden; 12 | } 13 | .loader::after { 14 | content: ''; 15 | width: 96px; 16 | height: 4.8px; 17 | background: #FFF; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | box-sizing: border-box; 22 | animation: hitZak 1s linear infinite alternate; 23 | } 24 | 25 | @keyframes hitZak { 26 | 0% { 27 | left: 0; 28 | transform: translateX(-1%); 29 | } 30 | 100% { 31 | left: 100%; 32 | transform: translateX(-99%); 33 | } 34 | } 35 | `, 36 | }, { 37 | id: "5pxufwt6k9", 38 | html: ``, 39 | css: `.loader { 40 | width: 100%; 41 | height: 4.8px; 42 | display: inline-block; 43 | position: relative; 44 | background: rgba(255, 255, 255, 0.15); 45 | overflow: hidden; 46 | } 47 | .loader::after { 48 | content: ''; 49 | width: 192px; 50 | height: 4.8px; 51 | background: #FFF; 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | box-sizing: border-box; 56 | animation: animloader 2s linear infinite; 57 | } 58 | 59 | @keyframes animloader { 60 | 0% { 61 | left: 0; 62 | transform: translateX(-100%); 63 | } 64 | 100% { 65 | left: 100%; 66 | transform: translateX(0%); 67 | } 68 | } 69 | `, 70 | }, { 71 | id: "n1vy1hfmljq", 72 | html: ``, 73 | css: `.loader { 74 | width: 100%; 75 | height: 4.8px; 76 | display: inline-block; 77 | position: relative; 78 | background: rgba(255, 255, 255, 0.15); 79 | overflow: hidden; 80 | } 81 | .loader::after { 82 | content: ''; 83 | box-sizing: border-box; 84 | width: 0; 85 | height: 4.8px; 86 | background: #FFF; 87 | position: absolute; 88 | top: 0; 89 | left: 0; 90 | animation: animFw 10s linear infinite; 91 | } 92 | 93 | @keyframes animFw { 94 | 0% { 95 | width: 0; 96 | } 97 | 100% { 98 | width: 100%; 99 | } 100 | }`, 101 | }, { 102 | id: "prog-crak-erh", 103 | html: ``, 104 | css: `.loader { 105 | width: 0; 106 | height: 4.8px; 107 | display: inline-block; 108 | position: relative; 109 | background: #FFF; 110 | box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 111 | box-sizing: border-box; 112 | animation: animFw 8s linear infinite; 113 | } 114 | .loader::after, 115 | .loader::before { 116 | content: ''; 117 | width: 10px; 118 | height: 1px; 119 | background: #FFF; 120 | position: absolute; 121 | top: 9px; 122 | right: -2px; 123 | opacity: 0; 124 | transform: rotate(-45deg) translateX(0px); 125 | box-sizing: border-box; 126 | animation: coli1 0.3s linear infinite; 127 | } 128 | .loader::before { 129 | top: -4px; 130 | transform: rotate(45deg); 131 | animation: coli2 0.3s linear infinite; 132 | } 133 | 134 | @keyframes animFw { 135 | 0% { 136 | width: 0; 137 | } 138 | 100% { 139 | width: 100%; 140 | } 141 | } 142 | 143 | @keyframes coli1 { 144 | 0% { 145 | transform: rotate(-45deg) translateX(0px); 146 | opacity: 0.7; 147 | } 148 | 100% { 149 | transform: rotate(-45deg) translateX(-45px); 150 | opacity: 0; 151 | } 152 | } 153 | 154 | @keyframes coli2 { 155 | 0% { 156 | transform: rotate(45deg) translateX(0px); 157 | opacity: 1; 158 | } 159 | 100% { 160 | transform: rotate(45deg) translateX(-45px); 161 | opacity: 0.7; 162 | } 163 | } 164 | `, 165 | }, { 166 | id: "25fy52yspad", 167 | html: ``, 168 | css: `.loader { 169 | width: 100%; 170 | height: 4.8px; 171 | display: inline-block; 172 | position: relative; 173 | overflow: hidden; 174 | } 175 | .loader::after { 176 | content: ''; 177 | width: 96px; 178 | height: 4.8px; 179 | background: #FFF; 180 | position: absolute; 181 | top: 0; 182 | left: 0; 183 | box-sizing: border-box; 184 | animation: hitZak 0.6s ease-in-out infinite alternate; 185 | } 186 | 187 | @keyframes hitZak { 188 | 0% { 189 | left: 0; 190 | transform: translateX(-1%); 191 | } 192 | 100% { 193 | left: 100%; 194 | transform: translateX(-99%); 195 | } 196 | } 197 | `, 198 | }, { 199 | id: "4tf5qf1n26l", 200 | html: ``, 201 | css: `.loader { 202 | width: 100%; 203 | height: 4.8px; 204 | display: inline-block; 205 | background: rgba(255, 255, 255, 0.15); 206 | position: relative; 207 | overflow: hidden; 208 | } 209 | .loader::after { 210 | content: ''; 211 | width: 0%; 212 | height: 4.8px; 213 | background-color: #FFF; 214 | background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); 215 | background-size: 15px 15px; 216 | position: absolute; 217 | top: 0; 218 | left: 0; 219 | box-sizing: border-box; 220 | animation: animFw 6s ease-in infinite; 221 | } 222 | 223 | @keyframes animFw { 224 | 0% { 225 | width: 0; 226 | } 227 | 100% { 228 | width: 100%; 229 | } 230 | } 231 | `, 232 | }, { 233 | id: "66tdwbfi0l4", 234 | html: ``, 235 | css: `.loader { 236 | width: 100%; 237 | height: 4.8px; 238 | display: inline-block; 239 | background: rgba(255, 255, 255, 0.15); 240 | position: relative; 241 | overflow: hidden; 242 | } 243 | .loader::after { 244 | content: ''; 245 | width: 0%; 246 | height: 4.8px; 247 | background-color: #FFF; 248 | font-size: 15px; 249 | background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); 250 | background-size: 1em 1em; 251 | position: absolute; 252 | top: 0; 253 | left: 0; 254 | box-sizing: border-box; 255 | animation: animFw 10s ease-in infinite, barStripe 1s linear infinite; 256 | } 257 | 258 | @keyframes barStripe { 259 | 0% { 260 | background-position: 1em 0; 261 | } 262 | 100% { 263 | background-position: 0 0; 264 | } 265 | } 266 | 267 | @keyframes animFw { 268 | 0% { 269 | width: 0; 270 | } 271 | 100% { 272 | width: 100%; 273 | } 274 | } 275 | `, 276 | }, { 277 | id: "9r801t4h2hk", 278 | html: ``, 279 | css: `.loader { 280 | width: 100%; 281 | height: 8px; 282 | display: inline-block; 283 | position: relative; 284 | overflow: hidden; 285 | } 286 | .loader::before { 287 | content: ''; 288 | box-sizing: border-box; 289 | top: 0; 290 | left: 0; 291 | height: 100%; 292 | width: 100%; 293 | position: absolute; 294 | background-color: rgba(255, 255, 255, 0.15); 295 | background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); 296 | background-size: 15px 15px; 297 | z-index: 10; 298 | } 299 | .loader::after { 300 | content: ''; 301 | box-sizing: border-box; 302 | width: 0%; 303 | height: 100%; 304 | background-color: #FFF; 305 | position: absolute; 306 | border-radius: 0 4px 4px 0; 307 | top: 0; 308 | left: 0; 309 | animation: animFw 10s ease-in infinite; 310 | } 311 | 312 | 313 | @keyframes animFw { 314 | 0% { 315 | width: 0; 316 | } 317 | 100% { 318 | width: 100%; 319 | } 320 | } 321 | `, 322 | }, { 323 | id: "xnc4clnb6t", 324 | html: ``, 325 | css: `.loader { 326 | width: 100%; 327 | height: 12px; 328 | display: inline-block; 329 | background-color: #FFF; 330 | background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); 331 | font-size: 30px; 332 | background-size: 1em 1em; 333 | box-sizing: border-box; 334 | animation: barStripe 1s linear infinite; 335 | } 336 | 337 | @keyframes barStripe { 338 | 0% { 339 | background-position: 1em 0; 340 | } 341 | 100% { 342 | background-position: 0 0; 343 | } 344 | }`, 345 | }, { 346 | id: "s9l644spxrp", 347 | html: ``, 348 | css: `.loader { 349 | width: 96px; 350 | height: 16px; 351 | display: inline-block; 352 | background-color: #FFF; 353 | border: 1px solid #FFF; 354 | border-radius: 4px; 355 | background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); 356 | font-size: 30px; 357 | background-size: 1em 1em; 358 | box-sizing: border-box; 359 | animation: barStripe 1s linear infinite; 360 | } 361 | 362 | @keyframes barStripe { 363 | 0% { 364 | background-position: 1em 0; 365 | } 366 | 100% { 367 | background-position: 0 0; 368 | } 369 | }`, 370 | }, 371 | 372 | { 373 | id: "prog-fill", 374 | html: ``, 375 | css: `.loader{ 376 | display: block; 377 | position: relative; 378 | height: 12px; 379 | width: 80%; 380 | border: 1px solid #fff; 381 | border-radius: 10px; 382 | overflow: hidden; 383 | } 384 | .loader:after{ 385 | content: ''; 386 | position: absolute; 387 | left: 0; 388 | top: 0; 389 | height: 100%; 390 | width: 0; 391 | background: #FF3D00; 392 | animation: 6s prog ease-in infinite; 393 | } 394 | 395 | @keyframes prog { 396 | to { width: 100%;} 397 | } 398 | `, 399 | }, 400 | { 401 | id: "prog-go-line", 402 | html: ``, 403 | css: `.loader{ 404 | display: block; 405 | position: relative; 406 | height: 12px; 407 | width: 80%; 408 | border: 1px solid #fff; 409 | border-radius: 10px; 410 | overflow: hidden; 411 | } 412 | .loader::after { 413 | content: ''; 414 | width: 40%; 415 | height: 100%; 416 | background: #FF3D00; 417 | position: absolute; 418 | top: 0; 419 | left: 0; 420 | box-sizing: border-box; 421 | animation: animloader 2s linear infinite; 422 | } 423 | 424 | @keyframes animloader { 425 | 0% { 426 | left: 0; 427 | transform: translateX(-100%); 428 | } 429 | 100% { 430 | left: 100%; 431 | transform: translateX(0%); 432 | } 433 | } 434 | `, 435 | }, 436 | { 437 | id: "prog-plain-fill", 438 | html: ``, 439 | css: `.loader{ 440 | display: block; 441 | position: relative; 442 | height: 25px; 443 | width: 200px; 444 | background: #fff; 445 | overflow: hidden; 446 | } 447 | .loader:after{ 448 | content: ''; 449 | position: absolute; 450 | left: 0; 451 | top: 0; 452 | height: 100%; 453 | width: 0; 454 | background: #FF3D00; 455 | animation: 6s prog ease-in infinite; 456 | } 457 | @keyframes prog { 458 | to { width: 100%;} 459 | } 460 | `, 461 | }, 462 | { 463 | id: "prog-fill-text", 464 | html: ``, 465 | css: `.loader{ 466 | display: block; 467 | position: relative; 468 | height: 32px; 469 | width: 200px; 470 | background: #fff; 471 | border:2px solid #fff; 472 | color: red; 473 | overflow: hidden; 474 | } 475 | .loader::before{ 476 | content: ''; 477 | background: red; 478 | position: absolute; 479 | left: 0; 480 | top: 0; 481 | width: 0; 482 | height: 100%; 483 | animation: loading 10s linear infinite; 484 | } 485 | .loader:after{ 486 | content: ''; 487 | position: absolute; 488 | left: 0; 489 | top: 0; 490 | width: 100%; 491 | height: 100%; 492 | text-align: center; 493 | font-size: 24px; 494 | line-height: 32px; 495 | color: rgb(0,255,255); 496 | mix-blend-mode: difference; 497 | animation: percentage 10s linear infinite; 498 | } 499 | 500 | @keyframes loading { 501 | 0% { width: 0 } 502 | 100% { width: 100% } 503 | } 504 | @keyframes percentage { 505 | 0% { content: "0%"} 506 | 5% { content: "5%"} 507 | 10% { content: "10%"} 508 | 20% { content: "20%"} 509 | 30% { content: "30%"} 510 | 40% { content: "40%"} 511 | 50% { content: "50%"} 512 | 60% { content: "60%"} 513 | 70% { content: "70%"} 514 | 80% { content: "80%"} 515 | 90% { content: "90%"} 516 | 95% { content: "95%"} 517 | 96% { content: "96%"} 518 | 97% { content: "97%"} 519 | 98% { content: "98%"} 520 | 99% { content: "99%"} 521 | 100% { content: "100%"} 522 | } 523 | 524 | `, 525 | }, 526 | 527 | { 528 | id: "pro-bx-ball-rp", 529 | html: ``, 530 | css: `.loader{ 531 | display: block; 532 | position: relative; 533 | height: 32px; 534 | width: 140px; 535 | border: 3px solid #fff; 536 | border-radius: 20px; 537 | box-sizing: border-box; 538 | } 539 | .loader:before{ 540 | content: ''; 541 | position: absolute; 542 | left: 0; 543 | bottom: 0; 544 | width: 26px; 545 | height: 26px; 546 | border-radius: 50%; 547 | background: #FF3D00; 548 | animation: ballbns 2s ease-in-out infinite alternate; 549 | } 550 | @keyframes ballbns { 551 | 0% { left: 0; transform: translateX(0%); } 552 | 100% { left: 100%; transform: translateX(-100%); } 553 | } 554 | `, 555 | }, 556 | 557 | { 558 | id: "pro-fir-ball", 559 | html: ``, 560 | css: ` 561 | .loader{ 562 | display: block; 563 | position: relative; 564 | height: 32px; 565 | width: 150px; 566 | box-sizing: border-box; 567 | overflow: hidden; 568 | border: 2px solid #FFF; 569 | border-radius: 20px; 570 | } 571 | .loader:before{ 572 | content: ''; 573 | position: absolute; 574 | left: 0; 575 | bottom: 2px; 576 | width: 24px; 577 | height: 24px; 578 | border-radius: 50%; 579 | background: #FF3D00; 580 | animation: ballbns 3s ease-in-out infinite; 581 | } 582 | 583 | @keyframes ballbns { 584 | 0% { 585 | left: 0; 586 | transform: translateX(0%); 587 | box-shadow: 588 | -5px 0 0 -1px rgba(255, 61, 0, 0.9), 589 | -10px 0 0 -2px rgba(255, 61, 0, 0.8), 590 | -15px 0 0 -4px rgba(255, 61, 0, 0.6), 591 | -20px 0 0 -6px rgba(255, 61, 0, 0.4), 592 | -25px 0 0 -8px rgba(255, 61, 0, 0.2); 593 | } 594 | 49% { 595 | left: 100%; 596 | transform: translateX(-100%); 597 | box-shadow: 598 | -5px 0 0 -1px rgba(255, 61, 0, 0.9), 599 | -10px 0 0 -2px rgba(255, 61, 0, 0.8), 600 | -15px 0 0 -4px rgba(255, 61, 0, 0.6), 601 | -20px 0 0 -6px rgba(255, 61, 0, 0.4), 602 | -25px 0 0 -8px rgba(255, 61, 0, 0.2); 603 | } 604 | 51% { 605 | left: 100%; 606 | transform: translateX(-100%); 607 | box-shadow: 608 | 5px 0 0 -1px rgba(255, 61, 0, 0.9), 609 | 10px 0 0 -2px rgba(255, 61, 0, 0.8), 610 | 15px 0 0 -4px rgba(255, 61, 0, 0.6), 611 | 20px 0 0 -6px rgba(255, 61, 0, 0.4), 612 | 25px 0 0 -8px rgba(255, 61, 0, 0.2); 613 | } 614 | 100% { 615 | left: 0; 616 | transform: translateX(0%); 617 | box-shadow: 618 | 5px 0 0 -1px rgba(255, 61, 0, 0.9), 619 | 10px 0 0 -2px rgba(255, 61, 0, 0.8), 620 | 15px 0 0 -4px rgba(255, 61, 0, 0.6), 621 | 20px 0 0 -6px rgba(255, 61, 0, 0.4), 622 | 25px 0 0 -8px rgba(255, 61, 0, 0.2); 623 | } 624 | } 625 | `, 626 | }, 627 | 628 | { 629 | id: "pro-ball-grb", 630 | html: ``, 631 | css: `.loader{ 632 | display: block; 633 | position: relative; 634 | height: 32px; 635 | width: 140px; 636 | border: 3px solid #fff; 637 | border-radius: 20px; 638 | box-sizing: border-box; 639 | animation: balancing 2s linear infinite alternate; 640 | transform-origin: center center; 641 | } 642 | .loader:before{ 643 | content: ''; 644 | position: absolute; 645 | left: 0; 646 | bottom: 0; 647 | width: 52px; 648 | height: 26px; 649 | border-radius: 20px; 650 | background: #FF3D00; 651 | animation: ballbns 2s linear infinite alternate; 652 | } 653 | @keyframes ballbns { 654 | 0% { left: 0; transform: translateX(0%); } 655 | 100% { left: 100%; transform: translateX(-100%); } 656 | } 657 | @keyframes balancing { 658 | 0% { transform: rotate(-25deg); } 659 | 50% { transform: rotate(0deg); } 660 | 100% { transform: rotate(25deg); } 661 | } 662 | `, 663 | }, 664 | { 665 | id: "pro-bal-ln-rp", 666 | html: ``, 667 | css: `.loader{ 668 | display: block; 669 | position: relative; 670 | height: 32px; 671 | width: 120px; 672 | background: linear-gradient(#FFF 4px, transparent 0) no-repeat; 673 | background-position: 0 16px; 674 | box-sizing: border-box; 675 | overflow: hidden; 676 | } 677 | .loader:before{ 678 | content: ''; 679 | position: absolute; 680 | left: 0; 681 | bottom: 2px; 682 | width: 28px; 683 | height: 28px; 684 | border-radius: 50%; 685 | background: #FF3D00; 686 | border:6px solid #FFF; 687 | box-sizing: border-box; 688 | animation: ballbns 1.5s linear infinite; 689 | } 690 | 691 | @keyframes ballbns { 692 | 0% { left: 0; transform: translateX(-100%); } 693 | 100% { left: 100%; transform: translateX(0%); } 694 | } 695 | `, 696 | }, 697 | { 698 | id: "pro-dmnd-tgl", 699 | html: ``, 700 | css: `.loader{ 701 | display: block; 702 | position: relative; 703 | height: 32px; 704 | width: 100px; 705 | background: linear-gradient(#FFF 4px, transparent 0) no-repeat; 706 | background-position: 0 14px; 707 | box-sizing: border-box; 708 | overflow: hidden; 709 | } 710 | .loader:before{ 711 | content: ''; 712 | position: absolute; 713 | left: 0; 714 | bottom: 4px; 715 | width: 24px; 716 | height: 24px; 717 | background: #FF3D00; 718 | animation: ballbns 1s linear infinite alternate ; 719 | } 720 | 721 | @keyframes ballbns { 722 | 0% { left: 0; transform: translateX(0%) rotate(45deg); } 723 | 100% { left: 100%; transform: translateX(-100%) rotate(45deg); } 724 | } 725 | `, 726 | }, 727 | { 728 | id: "pro-srl-rp", 729 | html: ``, 730 | css: `.loader{ 731 | display: block; 732 | position: relative; 733 | height: 32px; 734 | border: 2px solid #fff; 735 | width: 120px; 736 | background: #fff; 737 | box-sizing: border-box; 738 | } 739 | .loader:before{ 740 | content: ''; 741 | position: absolute; 742 | left: 0; 743 | bottom: 0px; 744 | width: 28px; 745 | height: 28px; 746 | background: #FF3D00; 747 | animation: ballbns 1s ease-in-out infinite alternate; 748 | } 749 | 750 | @keyframes ballbns { 751 | 0% { left: 0; transform: translateX(0%); } 752 | 100% { left: 100%; transform: translateX(-100%); } 753 | } 754 | `, 755 | }, 756 | { 757 | id: "toBlrSpn", 758 | html: ``, 759 | css: `.loader{ 760 | width: 200px; 761 | height: 40px; 762 | background-color: #0004; 763 | position: relative; 764 | border-radius: 50px; 765 | box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05); 766 | } 767 | .loader:after { 768 | border-radius: 50px; 769 | content: ""; 770 | position: absolute; 771 | background-color: #fff; 772 | left: 2px; 773 | top: 2px; 774 | bottom: 2px; 775 | right: 360px; 776 | animation: slide 2s linear infinite; 777 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 778 | } 779 | 780 | @keyframes slide { 781 | 0% { 782 | right: 150px; 783 | left: 2px; 784 | } 785 | 5% { 786 | left: 2px; 787 | } 788 | 50% { 789 | right: 2px; 790 | left: 150px; 791 | } 792 | 55% { 793 | right: 2px; 794 | } 795 | 100% { 796 | right: 150px; 797 | left: 2px; 798 | } 799 | } 800 | `, 801 | }, 802 | { 803 | id: "toggleBallSlider2Xqr", 804 | html: ``, 805 | css: `.loader{ 806 | width: 100px; 807 | height: 46px; 808 | position: relative; 809 | border-bottom: 5px solid #FFF; 810 | border-top: 5px solid #FFF; 811 | box-sizing: border-box; 812 | } 813 | .loader:before , .loader:after { 814 | content: ""; 815 | position: absolute; 816 | left: 0; 817 | top: -20px; 818 | width: 32px; 819 | height: 32px; 820 | border-radius: 50%; 821 | background: #FF3D00; 822 | border: 5px solid #FFF; 823 | box-sizing: border-box; 824 | animation: slide 1s infinite ease-in-out alternate; 825 | 826 | } 827 | .loader:after { 828 | top: 20px; 829 | animation-direction: alternate-reverse; 830 | } 831 | @keyframes slide { 832 | 0% , 20% { transform: translateX(70px) } 833 | 80% , 100% { transform: translateX(-1px) } 834 | } 835 | `, 836 | }, 837 | 838 | 839 | 840 | 841 | { 842 | id: "pro-fil-gp-sqr", 843 | html: ``, 844 | css: `.loader{ 845 | display: block; 846 | position: relative; 847 | height: 20px; 848 | width: 140px; 849 | background-image: 850 | linear-gradient(#FFF 20px, transparent 0), 851 | linear-gradient(#FFF 20px, transparent 0), 852 | linear-gradient(#FFF 20px, transparent 0), 853 | linear-gradient(#FFF 20px, transparent 0); 854 | background-repeat: no-repeat; 855 | background-size: 20px auto; 856 | background-position: 0 0, 40px 0, 80px 0, 120px 0; 857 | animation: pgfill 1s linear infinite; 858 | } 859 | 860 | @keyframes pgfill { 861 | 0% { background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 862 | 25% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 863 | 50% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 864 | 75% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 865 | 100% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0); } 866 | } 867 | `, 868 | }, 869 | { 870 | id: "pro-sqr-run", 871 | html: ``, 872 | css: `.loader{ 873 | display: block; 874 | position: relative; 875 | height: 20px; 876 | width: 140px; 877 | background-image: 878 | linear-gradient(#FFF 20px, transparent 0), 879 | linear-gradient(#FFF 20px, transparent 0), 880 | linear-gradient(#FFF 20px, transparent 0), 881 | linear-gradient(#FFF 20px, transparent 0); 882 | background-repeat: no-repeat; 883 | background-size: 20px auto; 884 | background-position: 0 0, 40px 0, 80px 0, 120px 0; 885 | animation: pgfill 1s linear infinite; 886 | } 887 | @keyframes pgfill { 888 | 0% { background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 889 | 25% { background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 890 | 50% { background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 891 | 75% { background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); } 892 | 100% { background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0); } 893 | } 894 | `, 895 | }, 896 | { 897 | id: "pro-bb-ln-fl", 898 | html: ``, 899 | css: `.loader{ 900 | width:120px; 901 | height:24px; 902 | -webkit-mask: 903 | radial-gradient(circle closest-side,#fff 94%,#0000) 0 0/25% 100%, 904 | linear-gradient(#fff 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat; 905 | mask: 906 | radial-gradient(circle closest-side,#fff 94%,#0000) 0 0/25% 100%, 907 | linear-gradient(#fff 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat; 908 | background: linear-gradient(#FF3D00 0 0) left/0% 100% no-repeat #fff; 909 | animation:bblprg 2s infinite linear; 910 | } 911 | @keyframes bblprg { 912 | 100% {background-size:100% 100%} 913 | } 914 | `, 915 | }, 916 | { 917 | id: "6vqh50z2ump", 918 | html: ``, 919 | css: `.loader { 920 | width: 96px; 921 | height: 24px; 922 | display: inline-block; 923 | background-color: #FFF; 924 | border: 1px solid #FFF; 925 | border-radius: 4px; 926 | background: linear-gradient(45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent), linear-gradient(-45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent); 927 | font-size: 15px; 928 | background-size: 1em 1em; 929 | box-sizing: border-box; 930 | animation: barStripe 0.6s linear infinite; 931 | } 932 | 933 | @keyframes barStripe { 934 | 0% { 935 | background-position: 1em 0; 936 | } 937 | 100% { 938 | background-position: 0 0; 939 | } 940 | }`, 941 | }, { 942 | id: "tly5d040gdj", 943 | html: ``, 944 | css: `.loader { 945 | width: 130px; 946 | height: 48px; 947 | display: inline-block; 948 | background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%), linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%); 949 | font-size: 10px; 950 | background-size: 32px 32px; 951 | box-sizing: border-box; 952 | animation: raceBoard 0.6s linear infinite; 953 | background-position: 0 0, 16px 16px; 954 | } 955 | 956 | @keyframes raceBoard { 957 | 0% { 958 | background-position: 0 0, 16px 16px; 959 | } 960 | 100% { 961 | background-position: 32px 0px, 48px 16px; 962 | } 963 | }`, 964 | } 965 | 966 | ] -------------------------------------------------------------------------------- /js/loaders/rect.js: -------------------------------------------------------------------------------- 1 | export const RECT = [ 2 | 3 | 4 | { 5 | id: "778qvxwuxps", 6 | html: ``, 7 | css: `.loader { 8 | width: 48px; 9 | height: 48px; 10 | display: inline-block; 11 | position: relative; 12 | } 13 | .loader::after, 14 | .loader::before { 15 | content: ''; 16 | width: 48px; 17 | height: 48px; 18 | border: 2px solid #FFF; 19 | position: absolute; 20 | left: 0; 21 | top: 0; 22 | box-sizing: border-box; 23 | animation: rotation 2s ease-in-out infinite; 24 | } 25 | .loader::after { 26 | border-color: #FF3D00; 27 | animation-delay: 1s; 28 | } 29 | 30 | @keyframes rotation { 31 | 0% { 32 | transform: rotate(0deg); 33 | } 34 | 100% { 35 | transform: rotate(360deg); 36 | } 37 | } `, 38 | }, { 39 | id: "5c6oxb7ativ", 40 | html: ``, 41 | css: `.loader { 42 | width: 48px; 43 | height: 48px; 44 | display: inline-block; 45 | position: relative; 46 | } 47 | .loader::after, 48 | .loader::before { 49 | content: ''; 50 | box-sizing: border-box; 51 | width: 48px; 52 | height: 48px; 53 | border: 4px solid #FFF; 54 | position: absolute; 55 | left: 0; 56 | top: 0; 57 | animation: animloader 2s ease-in-out infinite; 58 | } 59 | .loader::after { 60 | border-color: #FF3D00; 61 | animation-delay: 1s; 62 | } 63 | 64 | @keyframes animloader { 65 | 0% { 66 | transform: scale(0); 67 | opacity: 1; 68 | } 69 | 100% { 70 | transform: scale(1); 71 | opacity: 0; 72 | } 73 | } 74 | `, 75 | }, { 76 | id: "h7hdstj15pb", 77 | html: ``, 78 | css: `.loader { 79 | width: 48px; 80 | height: 48px; 81 | display: inline-block; 82 | position: relative; 83 | } 84 | .loader::after, 85 | .loader::before { 86 | content: ''; 87 | box-sizing: border-box; 88 | width: 48px; 89 | height: 48px; 90 | border: 2px solid #FFF; 91 | position: absolute; 92 | left: 0; 93 | top: 0; 94 | animation: rotation 2s ease-in-out infinite alternate; 95 | } 96 | .loader::after { 97 | border-color: #FF3D00; 98 | animation-direction: alternate-reverse; 99 | } 100 | 101 | @keyframes rotation { 102 | 0% { 103 | transform: rotate(0deg); 104 | } 105 | 100% { 106 | transform: rotate(360deg); 107 | } 108 | } `, 109 | }, { 110 | id: "9j8u5jers2t", 111 | html: ``, 112 | css: `.loader { 113 | width: 48px; 114 | height: 48px; 115 | display: inline-block; 116 | position: relative; 117 | } 118 | .loader::after, 119 | .loader::before { 120 | content: ''; 121 | box-sizing: border-box; 122 | width: 48px; 123 | height: 48px; 124 | border: 2px solid #FFF; 125 | position: absolute; 126 | left: 0; 127 | top: 0; 128 | animation: scaleOut 2s ease-in-out infinite; 129 | } 130 | .loader::after { 131 | border-color: #FF3D00; 132 | animation-delay: 1s; 133 | } 134 | 135 | @keyframes scaleOut { 136 | 0% { 137 | transform: scale(0); 138 | } 139 | 100% { 140 | transform: scale(1); 141 | } 142 | }`, 143 | }, { 144 | id: "qqooho5c05n", 145 | html: ``, 146 | css: `.loader { 147 | width: 48px; 148 | height: 48px; 149 | display: inline-block; 150 | position: relative; 151 | } 152 | .loader::after, 153 | .loader::before { 154 | content: ''; 155 | box-sizing: border-box; 156 | width: 48px; 157 | height: 48px; 158 | border: 2px solid #FFF; 159 | position: absolute; 160 | left: 0; 161 | top: 0; 162 | animation: rotationBreak 3s ease-in-out infinite alternate; 163 | } 164 | .loader::after { 165 | border-color: #FF3D00; 166 | animation-direction: alternate-reverse; 167 | } 168 | 169 | @keyframes rotationBreak { 170 | 0% { 171 | transform: rotate(0); 172 | } 173 | 25% { 174 | transform: rotate(90deg); 175 | } 176 | 50% { 177 | transform: rotate(180deg); 178 | } 179 | 75% { 180 | transform: rotate(270deg); 181 | } 182 | 100% { 183 | transform: rotate(360deg); 184 | } 185 | } 186 | `, 187 | }, { 188 | id: "jcffa36l7ol", 189 | html: ``, 190 | css: `.loader { 191 | width: 48px; 192 | height: 48px; 193 | display: inline-block; 194 | position: relative; 195 | border: 2px solid #FFF; 196 | box-sizing: border-box; 197 | animation: rotation 2s linear infinite; 198 | } 199 | .loader::after, 200 | .loader::before { 201 | content: ''; 202 | box-sizing: border-box; 203 | position: absolute; 204 | left: 0; 205 | right: 0; 206 | top: 0; 207 | bottom: 0; 208 | margin: auto; 209 | border: 2px solid #FF3D00; 210 | width: 38px; 211 | height: 38px; 212 | animation: rotationBack 1.5s linear infinite; 213 | transform-origin: center center; 214 | } 215 | .loader::before { 216 | width: 28px; 217 | height: 28px; 218 | border-color: #FFF; 219 | box-sizing: border-box; 220 | animation: rotation 1s linear infinite; 221 | } 222 | 223 | @keyframes rotation { 224 | 0% { 225 | transform: rotate(0deg); 226 | } 227 | 100% { 228 | transform: rotate(360deg); 229 | } 230 | } 231 | @keyframes rotationBack { 232 | 0% { 233 | transform: rotate(0deg); 234 | } 235 | 100% { 236 | transform: rotate(-360deg); 237 | } 238 | } 239 | 240 | `, 241 | }, 242 | { 243 | id: "dmndSkFill", 244 | html: ``, 245 | css: `.loader { 246 | position: relative; 247 | width: 64px; 248 | height: 64px; 249 | background-color: rgba(0, 0, 0, 0.5); 250 | transform: rotate(45deg); 251 | overflow: hidden; 252 | } 253 | .loader:after{ 254 | content: ''; 255 | position: absolute; 256 | inset: 8px; 257 | margin: auto; 258 | background: #222b32; 259 | } 260 | .loader:before{ 261 | content: ''; 262 | position: absolute; 263 | inset: -15px; 264 | margin: auto; 265 | background: #de3500; 266 | animation: diamondLoader 2s linear infinite; 267 | } 268 | @keyframes diamondLoader { 269 | 0% ,10% { 270 | transform: translate(-64px , -64px) rotate(-45deg) 271 | } 272 | 90% , 100% { 273 | transform: translate(0px , 0px) rotate(-45deg) 274 | } 275 | } 276 | `, 277 | }, 278 | 279 | { 280 | id: "tcrxas6ttns", 281 | html: ``, 282 | css: `.loader { 283 | width: 48px; 284 | height: 48px; 285 | display: inline-block; 286 | position: relative; 287 | background: #FFF; 288 | box-sizing: border-box; 289 | animation: flipX 1s linear infinite; 290 | } 291 | 292 | @keyframes flipX { 293 | 0% { 294 | transform: perspective(200px) rotateX(0deg) rotateY(0deg); 295 | } 296 | 50% { 297 | transform: perspective(200px) rotateX(-180deg) rotateY(0deg); 298 | } 299 | 100% { 300 | transform: perspective(200px) rotateX(-180deg) rotateY(-180deg); 301 | } 302 | } 303 | `, 304 | }, { 305 | id: "l3vyieqr44p", 306 | html: ``, 307 | css: `.loader { 308 | width: 48px; 309 | height: 48px; 310 | display: inline-block; 311 | position: relative; 312 | color: #FFF; 313 | border: 1px solid; 314 | box-sizing: border-box; 315 | animation: fill 2s linear infinite alternate; 316 | } 317 | 318 | @keyframes fill { 319 | 0% { 320 | box-shadow: 0 0 inset; 321 | } 322 | 100% { 323 | box-shadow: 0 -48px inset; 324 | } 325 | } 326 | `, 327 | }, { 328 | id: "56x5ay7i99j", 329 | html: ``, 330 | css: `.loader { 331 | width: 48px; 332 | height: 48px; 333 | display: inline-block; 334 | position: relative; 335 | background: #FFF; 336 | box-sizing: border-box; 337 | animation: zeroRotation 1s ease infinite alternate-reverse; 338 | } 339 | 340 | @keyframes zeroRotation { 341 | 0% { 342 | transform: scale(1) rotate(0deg); 343 | } 344 | 100% { 345 | transform: scale(0) rotate(360deg); 346 | } 347 | } 348 | `, 349 | }, 350 | { 351 | id: "sqr-trf-crl", 352 | html: ``, 353 | css: `.loader{ 354 | display: block; 355 | position: relative; 356 | height: 32px; 357 | width: 100px; 358 | box-sizing: border-box; 359 | overflow: hidden; 360 | } 361 | .loader:before{ 362 | content: ''; 363 | position: absolute; 364 | left: 0; 365 | bottom: 4px; 366 | width: 24px; 367 | height: 24px; 368 | animation: ballbns 2s ease-in infinite; 369 | } 370 | 371 | @keyframes ballbns { 372 | 0% { 373 | left: 0; 374 | transform: translateX(-100%) rotate(0deg); 375 | border-radius: 0; 376 | background: #FFF; 377 | } 378 | 100% { 379 | left: 100%; 380 | transform: translateX(0%) rotate(360deg); 381 | border-radius: 50%; 382 | background: #FFF; 383 | } 384 | } 385 | `, 386 | }, 387 | { 388 | id: "sqrRotTrfCrln", 389 | html: ``, 390 | css: `.loader { 391 | width: 48px; 392 | height: 48px; 393 | background: #fff; 394 | animation: rotate 1s linear infinite; 395 | } 396 | 397 | @keyframes rotate { 398 | 0% { 399 | transform: rotate(0deg) scale(0.2); 400 | border-radius: 10%; 401 | } 402 | 50% { 403 | transform: rotate(180deg) scale(1.5); 404 | border-radius: 50%; 405 | } 406 | 100% { 407 | transform: rotate(360deg) scale(0.2); 408 | border-radius: 10%; 409 | } 410 | } 411 | `, 412 | }, 413 | 414 | { 415 | id: "dstrShfl-scrn", 416 | html: ``, 417 | css: `.loader { 418 | position: relative; 419 | } 420 | .loader:after { 421 | content: ''; 422 | background: #FFF; 423 | position: absolute; 424 | left: 50%; 425 | top: 50%; 426 | width: 32px; 427 | height: 32px; 428 | border-radius:4px; 429 | transform-origin: -16px -32px; 430 | animation: rotate 1s linear infinite; 431 | } 432 | @keyframes rotate { 433 | 0% , 100% { 434 | transform: rotate(-45deg) translate(-50% , -50%) 435 | } 436 | 50% { 437 | transform: rotate(-245deg) translate(-50% , -50%) 438 | } 439 | } 440 | `, 441 | }, 442 | 443 | 444 | 445 | { 446 | id: "gnyax6fzljk", 447 | html: ``, 448 | css: `.loader { 449 | width: 24px; 450 | height: 24px; 451 | display: inline-block; 452 | position: relative; 453 | background: #FFF; 454 | box-sizing: border-box; 455 | animation: animloader 2s linear infinite; 456 | } 457 | 458 | @keyframes animloader { 459 | 0% { 460 | transform: translate(0, 0) rotateX(0) rotateY(0); 461 | } 462 | 25% { 463 | transform: translate(100%, 0) rotateX(0) rotateY(180deg); 464 | } 465 | 50% { 466 | transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); 467 | } 468 | 75% { 469 | transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); 470 | } 471 | 100% { 472 | transform: translate(0, 0) rotateX(0) rotateY(360deg); 473 | } 474 | } 475 | `, 476 | }, { 477 | id: "5i0njgizuv4", 478 | html: ``, 479 | css: `.loader { 480 | width: 48px; 481 | height: 48px; 482 | display: inline-block; 483 | position: relative; 484 | } 485 | .loader::after { 486 | content: ''; 487 | box-sizing: border-box; 488 | width: 24px; 489 | height: 24px; 490 | position: absolute; 491 | left: 0; 492 | top: 0; 493 | background: #FFF; 494 | color: #FFF; 495 | animation: animloader 2s linear infinite alternate; 496 | } 497 | 498 | @keyframes animloader { 499 | 0% { 500 | box-shadow: 0 0, 0 0, 0 0; 501 | } 502 | 33% { 503 | box-shadow: 24px 0px, 24px 0px, 24px 0px; 504 | } 505 | 66% { 506 | box-shadow: 24px 24px, 24px 24px, 24px 0px; 507 | } 508 | 100% { 509 | box-shadow: 0px 24px, 24px 24px, 24px 0px; 510 | } 511 | } 512 | `, 513 | }, { 514 | id: "bcwq451ytzu", 515 | html: ``, 516 | css: `.loader { 517 | width: 48px; 518 | height: 48px; 519 | display: inline-block; 520 | position: relative; 521 | } 522 | .loader::before { 523 | content: ''; 524 | box-sizing: border-box; 525 | width: 24px; 526 | height: 24px; 527 | position: absolute; 528 | left: 0; 529 | top: -24px; 530 | animation: animloader1 2s linear infinite alternate; 531 | } 532 | .loader::after { 533 | content: ''; 534 | position: absolute; 535 | left: 0; 536 | top: 0; 537 | width: 24px; 538 | height: 24px; 539 | background: rgba(255, 255, 255, 0.85); 540 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 541 | box-sizing: border-box; 542 | animation: animloader2 2s linear infinite alternate; 543 | } 544 | 545 | @keyframes animloader1 { 546 | 0%, 32% { 547 | box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0); 548 | } 549 | 33%, 65% { 550 | box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0); 551 | } 552 | 66%, 99% { 553 | box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0); 554 | } 555 | 100% { 556 | box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white; 557 | } 558 | } 559 | 560 | @keyframes animloader2 { 561 | 0% { 562 | transform: translate(0, 0) rotateX(0) rotateY(0); 563 | } 564 | 33% { 565 | transform: translate(100%, 0) rotateX(0) rotateY(180deg); 566 | } 567 | 66% { 568 | transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); 569 | } 570 | 100% { 571 | transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); 572 | } 573 | } 574 | `, 575 | }, 576 | 577 | 578 | { 579 | id: "nyvy2vxxdig", 580 | html: ``, 581 | css: `.loader { 582 | width: 48px; 583 | height: 48px; 584 | display: inline-block; 585 | position: relative; 586 | transform: rotate(45deg); 587 | } 588 | .loader::before { 589 | content: ''; 590 | box-sizing: border-box; 591 | width: 24px; 592 | height: 24px; 593 | position: absolute; 594 | left: 0; 595 | top: -24px; 596 | animation: animloader 4s ease infinite; 597 | } 598 | .loader::after { 599 | content: ''; 600 | box-sizing: border-box; 601 | position: absolute; 602 | left: 0; 603 | top: 0; 604 | width: 24px; 605 | height: 24px; 606 | background: rgba(255, 255, 255, 0.85); 607 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 608 | animation: animloader2 2s ease infinite; 609 | } 610 | 611 | @keyframes animloader { 612 | 0% { 613 | box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0); 614 | } 615 | 12% { 616 | box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0); 617 | } 618 | 25% { 619 | box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0); 620 | } 621 | 37% { 622 | box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0); 623 | } 624 | 50% { 625 | box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white; 626 | } 627 | 62% { 628 | box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white; 629 | } 630 | 75% { 631 | box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white; 632 | } 633 | 87% { 634 | box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white; 635 | } 636 | 100% { 637 | box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0); 638 | } 639 | } 640 | 641 | @keyframes animloader2 { 642 | 0% { 643 | transform: translate(0, 0) rotateX(0) rotateY(0); 644 | } 645 | 25% { 646 | transform: translate(100%, 0) rotateX(0) rotateY(180deg); 647 | } 648 | 50% { 649 | transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); 650 | } 651 | 75% { 652 | transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); 653 | } 654 | 100% { 655 | transform: translate(0, 0) rotateX(0) rotateY(360deg); 656 | } 657 | } 658 | `, 659 | }, 660 | 661 | { 662 | id: "pir-fnd-flw", 663 | html: ``, 664 | css: `.loader { 665 | border: 24px solid #fff; 666 | border-color: #FF3D00 #fff #fff #fff; 667 | animation : rotate 2s steps(4) infinite; 668 | } 669 | @keyframes rotate { 670 | 100% { transform: rotate(360deg); } 671 | } 672 | ` 673 | }, 674 | { 675 | id: "sqr4xmlt2clrRotSpn", 676 | html: ``, 677 | css: `.loader { 678 | width: 64px; 679 | height: 64px; 680 | position: relative; 681 | background-image: 682 | linear-gradient(#FFF 16px, transparent 0) , 683 | linear-gradient(#FF3D00 16px, transparent 0) , 684 | linear-gradient(#FF3D00 16px, transparent 0) , 685 | linear-gradient(#FFF 16px, transparent 0); 686 | background-repeat: no-repeat; 687 | background-size: 16px 16px; 688 | background-position: left top , left bottom , right top , right bottom; 689 | animation: rotate 1s linear infinite; 690 | } 691 | @keyframes rotate { 692 | 0% { 693 | width: 64px; 694 | height: 64px; 695 | transform: rotate(0deg) 696 | } 697 | 50% { 698 | width: 30px; 699 | height: 30px; 700 | transform: rotate(180deg) 701 | } 702 | 100% { 703 | width: 64px; 704 | height: 64px; 705 | transform: rotate(360deg) 706 | } 707 | } 708 | `, 709 | }, 710 | { 711 | id: "sqr$PuncUp", 712 | html: ``, 713 | css: `.loader { 714 | animation: rotate 1s infinite; 715 | height: 50px; 716 | width: 50px; 717 | } 718 | .loader:before, 719 | .loader:after { 720 | content: ""; 721 | display: block; 722 | height: 20px; 723 | width: 20px; 724 | } 725 | .loader:before { 726 | animation: box1 1s infinite; 727 | background-color: #fff; 728 | box-shadow: 30px 0 0 #ff3d00; 729 | margin-bottom: 10px; 730 | } 731 | .loader:after { 732 | animation: box2 1s infinite; 733 | background-color: #ff3d00; 734 | box-shadow: 30px 0 0 #fff; 735 | } 736 | 737 | @keyframes rotate { 738 | 0% { transform: rotate(0deg) scale(0.8) } 739 | 50% { transform: rotate(360deg) scale(1.2) } 740 | 100% { transform: rotate(720deg) scale(0.8) } 741 | } 742 | 743 | @keyframes box1 { 744 | 0% { 745 | box-shadow: 30px 0 0 #ff3d00; 746 | } 747 | 50% { 748 | box-shadow: 0 0 0 #ff3d00; 749 | margin-bottom: 0; 750 | transform: translate(15px, 15px); 751 | } 752 | 100% { 753 | box-shadow: 30px 0 0 #ff3d00; 754 | margin-bottom: 10px; 755 | } 756 | } 757 | 758 | @keyframes box2 { 759 | 0% { 760 | box-shadow: 30px 0 0 #fff; 761 | } 762 | 50% { 763 | box-shadow: 0 0 0 #fff; 764 | margin-top: -20px; 765 | transform: translate(15px, 15px); 766 | } 767 | 100% { 768 | box-shadow: 30px 0 0 #fff; 769 | margin-top: 0; 770 | } 771 | } 772 | `, 773 | }, 774 | 775 | 776 | 777 | 778 | { 779 | id: "sqrFlwupShdw67", 780 | html: ``, 781 | css: `.loader { 782 | height: 5px; 783 | width: 5px; 784 | color: #fff; 785 | box-shadow: -10px -10px 0 5px, 786 | -10px -10px 0 5px, 787 | -10px -10px 0 5px, 788 | -10px -10px 0 5px; 789 | animation: loader-38 6s infinite; 790 | } 791 | 792 | @keyframes loader-38 { 793 | 0% { 794 | box-shadow: -10px -10px 0 5px, 795 | -10px -10px 0 5px, 796 | -10px -10px 0 5px, 797 | -10px -10px 0 5px; 798 | } 799 | 8.33% { 800 | box-shadow: -10px -10px 0 5px, 801 | 10px -10px 0 5px, 802 | 10px -10px 0 5px, 803 | 10px -10px 0 5px; 804 | } 805 | 16.66% { 806 | box-shadow: -10px -10px 0 5px, 807 | 10px -10px 0 5px, 808 | 10px 10px 0 5px, 809 | 10px 10px 0 5px; 810 | } 811 | 24.99% { 812 | box-shadow: -10px -10px 0 5px, 813 | 10px -10px 0 5px, 814 | 10px 10px 0 5px, 815 | -10px 10px 0 5px; 816 | } 817 | 33.32% { 818 | box-shadow: -10px -10px 0 5px, 819 | 10px -10px 0 5px, 820 | 10px 10px 0 5px, 821 | -10px -10px 0 5px; 822 | } 823 | 41.65% { 824 | box-shadow: 10px -10px 0 5px, 825 | 10px -10px 0 5px, 826 | 10px 10px 0 5px, 827 | 10px -10px 0 5px; 828 | } 829 | 49.98% { 830 | box-shadow: 10px 10px 0 5px, 831 | 10px 10px 0 5px, 832 | 10px 10px 0 5px, 833 | 10px 10px 0 5px; 834 | } 835 | 58.31% { 836 | box-shadow: -10px 10px 0 5px, 837 | -10px 10px 0 5px, 838 | 10px 10px 0 5px, 839 | -10px 10px 0 5px; 840 | } 841 | 66.64% { 842 | box-shadow: -10px -10px 0 5px, 843 | -10px -10px 0 5px, 844 | 10px 10px 0 5px, 845 | -10px 10px 0 5px; 846 | } 847 | 74.97% { 848 | box-shadow: -10px -10px 0 5px, 849 | 10px -10px 0 5px, 850 | 10px 10px 0 5px, 851 | -10px 10px 0 5px; 852 | } 853 | 83.3% { 854 | box-shadow: -10px -10px 0 5px, 855 | 10px 10px 0 5px, 856 | 10px 10px 0 5px, 857 | -10px 10px 0 5px; 858 | } 859 | 91.63% { 860 | box-shadow: -10px -10px 0 5px, 861 | -10px 10px 0 5px, 862 | -10px 10px 0 5px, 863 | -10px 10px 0 5px; 864 | } 865 | 100% { 866 | box-shadow: -10px -10px 0 5px, 867 | -10px -10px 0 5px, 868 | -10px -10px 0 5px, 869 | -10px -10px 0 5px; 870 | } 871 | } 872 | 873 | `, 874 | }, 875 | 876 | 877 | 878 | { 879 | id: "rspltt-rects", 880 | html: ``, 881 | css: `.loader { 882 | width: 48px; 883 | height: 48px; 884 | } 885 | .loader:before, 886 | .loader:after { 887 | content:""; 888 | display: block; 889 | height: 24px; 890 | background:#fff; 891 | animation: mvx 0.3s infinite ease-in alternate; 892 | } 893 | .loader:before { 894 | animation-name:mvrx; 895 | } 896 | @keyframes mvx { 897 | 100% {transform: translateY(50%)} 898 | } 899 | @keyframes mvrx { 900 | 100% {transform: translateY(-50%)} 901 | } 902 | 903 | `, 904 | }, 905 | 906 | 907 | { 908 | id: "rot-addig", 909 | html: ``, 910 | css: `.loader { 911 | width: 48px; 912 | height: 48px; 913 | display: flex; 914 | transform-origin:50% 125%; 915 | animation: mov-y 1s infinite linear; 916 | } 917 | .loader:before, 918 | .loader:after { 919 | content:""; 920 | flex:1; 921 | background:#fff; 922 | transform-origin: 0% 100%; 923 | animation: rtr-x 1s infinite linear; 924 | } 925 | .loader:before { 926 | transform-origin: 100% 100%; 927 | animation-name: rtr-rx; 928 | } 929 | 930 | @keyframes mov-y { 931 | 0%,25% {transform:translateY(0) scaleY(1)} 932 | 49% {transform:translateY(-75%) scaleY(1)} 933 | 50% {transform:translateY(-75%) scaleY(-1)} 934 | 75%,100% {transform:translateY(-150%) scaleY(-1)} 935 | } 936 | @keyframes rtr-x { 937 | 25%,75% {transform: rotate(0deg)} 938 | 50% {transform: rotate(90deg)} 939 | } 940 | @keyframes rtr-rx { 941 | 25%,75% {transform: rotate(0deg)} 942 | 50% {transform: rotate(-90deg)} 943 | } 944 | `, 945 | }, 946 | 947 | { 948 | id: "rtbr-clr", 949 | html: ``, 950 | css: `.loader { 951 | width: 48px; 952 | height: 48px; 953 | display: flex; 954 | animation: rotate 1.5s infinite linear; 955 | } 956 | .loader:before, 957 | .loader:after { 958 | content:""; 959 | flex:1; 960 | background:#fff; 961 | animation: mvx 0.5s infinite linear alternate; 962 | } 963 | .loader:before { 964 | background: #FF3D00; 965 | animation-name:mvrx; 966 | } 967 | 968 | @keyframes rotate { 969 | 100% {transform: rotate(360deg)} 970 | } 971 | @keyframes mvx { 972 | 0% {transform: translateX(-15px)} 973 | 100% {transform: translateX(15px)} 974 | } 975 | @keyframes mvrx { 976 | 0% {transform: translateX(15px)} 977 | 100% {transform: translateX(-15px)} 978 | } 979 | `, 980 | }, 981 | 982 | { 983 | id: "brix-shake-clr", 984 | html: ``, 985 | css: `.loader { 986 | width: 48px; 987 | height: 48px; 988 | display: flex; 989 | animation : rotate 2s linear infinite; 990 | } 991 | .loader:before, 992 | .loader:after { 993 | content:""; 994 | flex:1; 995 | background:#fff; 996 | animation: mvx 0.5s infinite linear alternate; 997 | } 998 | .loader:before { 999 | background: #FF3D00; 1000 | animation-name:mvrx; 1001 | } 1002 | 1003 | @keyframes rotate { 1004 | 100% {transform: rotate(360deg)} 1005 | } 1006 | @keyframes mvx { 1007 | 0% , 40% {transform: translateX(0px)} 1008 | 20% , 60% {transform: translateX(8px)} 1009 | 100% {transform: translateX(15px)} 1010 | } 1011 | @keyframes mvrx { 1012 | 0% , 40% {transform: translateX(0px)} 1013 | 20% , 60% {transform: translateX(-8px)} 1014 | 100% {transform: translateX(-15px)} 1015 | } 1016 | 1017 | `, 1018 | }, 1019 | 1020 | 1021 | { 1022 | id: "stackLyrXp", 1023 | html: ``, 1024 | css: `.loader { 1025 | position: relative; 1026 | width: 48px; 1027 | height: 48px; 1028 | background: #de3500; 1029 | transform: rotateX(65deg) rotate(45deg); 1030 | // remove bellows command for perspective change 1031 | //transform: perspective(200px) rotateX(65deg) rotate(45deg); 1032 | color: #fff; 1033 | animation: layers1 1s linear infinite alternate; 1034 | } 1035 | .loader:after { 1036 | content: ''; 1037 | position: absolute; 1038 | inset: 0; 1039 | background: rgba(255, 255, 255, 0.7); 1040 | animation: layerTr 1s linear infinite alternate; 1041 | } 1042 | 1043 | @keyframes layers1 { 1044 | 0% { box-shadow: 0px 0px 0 0px } 1045 | 90% , 100% { box-shadow: 20px 20px 0 -4px } 1046 | } 1047 | @keyframes layerTr { 1048 | 0% { transform: translate(0, 0) scale(1) } 1049 | 100% { transform: translate(-25px, -25px) scale(1) } 1050 | } 1051 | `, 1052 | }, 1053 | { 1054 | id: "sqrBxRol", 1055 | html: ``, 1056 | css: `.loader { 1057 | background: #de3500; 1058 | width: 48px; 1059 | height: 48px; 1060 | position: relative; 1061 | text-align: center; 1062 | animation: 3s rotate linear infinite; 1063 | } 1064 | .loader:before { 1065 | content: ""; 1066 | position: absolute; 1067 | top: 0; 1068 | left: 0; 1069 | height: 100%; 1070 | width: 100%; 1071 | background: #FFFF; 1072 | animation: 1.5s rotate reverse linear infinite ; 1073 | 1074 | } 1075 | @keyframes rotate { 1076 | 0%{ transform: rotate(0deg)} 1077 | 100%{ transform: rotate(360deg)} 1078 | } 1079 | `, 1080 | }, 1081 | 1082 | { 1083 | id: "prima-split-rects", 1084 | html: ``, 1085 | css: `.loader { 1086 | position: relative; 1087 | width: 164px; 1088 | height: 164px; 1089 | } 1090 | .loader::before , .loader::after { 1091 | content: ''; 1092 | position: absolute; 1093 | width: 40px; 1094 | height: 40px; 1095 | background-color: #fff; 1096 | left: 50%; 1097 | top: 50%; 1098 | animation: rotate 1s ease-in infinite; 1099 | } 1100 | .loader::after { 1101 | width: 20px; 1102 | height: 20px; 1103 | background-color: #FF3D00; 1104 | animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite ; 1105 | } 1106 | 1107 | @keyframes moveY { 1108 | 0% , 100% {top: 10%} 1109 | 45% , 55% {top: 59%} 1110 | 60% {top: 40%} 1111 | } 1112 | @keyframes rotate { 1113 | 0% { transform: translate(-50%, -100%) rotate(0deg) scale(1 , 1)} 1114 | 25%{ transform: translate(-50%, 0%) rotate(180deg) scale(1 , 1)} 1115 | 45% , 55%{ transform: translate(-50%, 100%) rotate(180deg) scale(3 , 0.5)} 1116 | 60%{ transform: translate(-50%, 100%) rotate(180deg) scale(1, 1)} 1117 | 75%{ transform: translate(-50%, 0%) rotate(270deg) scale(1 , 1)} 1118 | 100%{ transform: translate(-50%, -100%) rotate(360deg) scale(1 , 1)} 1119 | } 1120 | `, 1121 | }, 1122 | 1123 | 1124 | 1125 | 1126 | { 1127 | id: "prima-split-rects", 1128 | html: ``, 1129 | css: `.loader { 1130 | width: 48px; 1131 | height: 48px; 1132 | position: relative; 1133 | } 1134 | .loader:before, 1135 | .loader:after { 1136 | content:""; 1137 | display: block; 1138 | border: 24px solid transparent; 1139 | border-color: transparent transparent #fff #fff; 1140 | position: absolute; 1141 | left: 0; 1142 | top: 0; 1143 | animation: mvx 1s infinite ease-in; 1144 | } 1145 | .loader:before { 1146 | left: -1px; 1147 | top: 1px; 1148 | border-color:#fff #fff transparent transparent; 1149 | animation-name:mvrx; 1150 | } 1151 | @keyframes mvx { 1152 | 0% , 25% {transform: translate(0 , 0) rotate(0deg)} 1153 | 50% {transform: translate(-50% , 50%) rotate(180deg)} 1154 | 100% {transform: translate(0% , 0%) rotate(180deg)} 1155 | } 1156 | @keyframes mvrx { 1157 | 0% , 25% {transform: translate(0 , 0) rotate(0deg)} 1158 | 50% {transform: translate(50% , -50%) rotate(180deg)} 1159 | 100% {transform: translate(0% , 0%) rotate(180deg)} 1160 | } 1161 | `, 1162 | }, 1163 | 1164 | 1165 | { 1166 | id: "prm-slice-rts", 1167 | html: ``, 1168 | css: `.loader { 1169 | width: 47px; 1170 | height: 47px; 1171 | position: relative; 1172 | } 1173 | .loader:before, 1174 | .loader:after { 1175 | content:""; 1176 | display: block; 1177 | border: 24px solid; 1178 | border-color: transparent transparent #fff #fff; 1179 | position: absolute; 1180 | left: 0; 1181 | top: 0; 1182 | animation: mvx 1.2s infinite ease-in; 1183 | } 1184 | .loader:before { 1185 | border-color:#fff #fff transparent transparent; 1186 | animation-name:mvrx; 1187 | } 1188 | @keyframes mvx { 1189 | 0% , 10% {transform: translate(0 , 0) rotate(0deg)} 1190 | 30% {transform: translate(-50% , -50%) rotate(0deg)} 1191 | 50% {transform: translate(-50% , -50%) rotate(180deg)} 1192 | 75% , 100% {transform: translate(0, 0) rotate(180deg)} 1193 | } 1194 | @keyframes mvrx { 1195 | 0% , 10% {transform: translate(0 , 0) rotate(0deg)} 1196 | 30% {transform: translate(50% , 50%) rotate(0deg)} 1197 | 50% {transform: translate(50% , 50%) rotate(180deg)} 1198 | 75% , 100% {transform: translate(0, 0) rotate(180deg)} 1199 | } 1200 | `, 1201 | }, 1202 | 1203 | 1204 | { 1205 | id: "prm-pus-pop-rts", 1206 | html: ``, 1207 | css: `.loader { 1208 | position: relative; 1209 | border: 24px solid; 1210 | border-color: #fff transparent #fff transparent; 1211 | animation : rotate 2s linear infinite; 1212 | } 1213 | .loader:before, 1214 | .loader:after { 1215 | content:""; 1216 | display: block; 1217 | border: 24px solid transparent; 1218 | border-left-color: #fff; 1219 | position: absolute; 1220 | left: -24px; 1221 | top: -24px; 1222 | animation: mvx 1s infinite linear; 1223 | } 1224 | .loader:before { 1225 | border-color: transparent #fff transparent transparent; 1226 | animation-name:mvrx; 1227 | animation-delay: 0.5s; 1228 | } 1229 | @keyframes rotate { 1230 | 100% {transform: rotate(360deg)} 1231 | } 1232 | @keyframes mvx { 1233 | 20% , 80% {transform: translateX(0)} 1234 | 50% {transform: translateX(-50%)} 1235 | } 1236 | @keyframes mvrx { 1237 | 20% , 80% {transform: translateX(0)} 1238 | 50% {transform: translateX(50%)} 1239 | } 1240 | `, 1241 | }, 1242 | 1243 | { 1244 | id: "prm-kti-pori-rts", 1245 | html: ``, 1246 | css: `.loader { 1247 | position: relative; 1248 | border: 24px solid; 1249 | border-color: #fff transparent #fff transparent; 1250 | animation : rotate 2s linear infinite; 1251 | } 1252 | .loader:before, 1253 | .loader:after { 1254 | content:""; 1255 | display: block; 1256 | border: 24px solid transparent; 1257 | border-left-color: #fff; 1258 | position: absolute; 1259 | left: -24px; 1260 | top: -24px; 1261 | animation: prix 1s infinite ease-in; 1262 | transform-origin: 0% 100%; 1263 | } 1264 | .loader:before { 1265 | border-color: transparent #fff transparent transparent; 1266 | transform-origin: 100% 0%; 1267 | animation-delay: 0.5s; 1268 | } 1269 | @keyframes rotate { 1270 | 100% {transform: rotate(360deg)} 1271 | } 1272 | @keyframes prix { 1273 | 20% , 80% {transform: rotate(0)} 1274 | 50% {transform: rotate(-90deg)} 1275 | } 1276 | `, 1277 | }, 1278 | { 1279 | id: "prm-splt-clr-rots", 1280 | html: ``, 1281 | css: `.loader { 1282 | width: 48px; 1283 | height: 48px; 1284 | position: relative; 1285 | animation : rotate 4s linear infinite; 1286 | } 1287 | .loader:before, 1288 | .loader:after { 1289 | content:""; 1290 | display: block; 1291 | border: 24px solid; 1292 | border-color: transparent transparent #fff #fff; 1293 | position: absolute; 1294 | left: 0; 1295 | top: 0; 1296 | animation: mvx 1s infinite ease-in; 1297 | } 1298 | .loader:before { 1299 | left: -1px; 1300 | top: 1px; 1301 | border-color:#FF3D00 #FF3D00 transparent transparent; 1302 | animation-name:mvrx; 1303 | } 1304 | 1305 | @keyframes rotate { 1306 | 100% {transform: rotate(360deg)} 1307 | } 1308 | @keyframes mvx { 1309 | 0% , 15% {transform: translate(0 , 0) rotate(0deg)} 1310 | 50% {transform: translate(-50% , 50%) rotate(180deg)} 1311 | 100% {transform: translate(0% , 0%) rotate(180deg)} 1312 | } 1313 | @keyframes mvrx { 1314 | 0% , 15% {transform: translate(0 , 0) rotate(0deg)} 1315 | 50% {transform: translate(50% , -50%) rotate(180deg)} 1316 | 100% {transform: translate(0% , 0%) rotate(180deg)} 1317 | } 1318 | `, 1319 | }, 1320 | 1321 | 1322 | { 1323 | id: "pir-weld-flw", 1324 | html: ``, 1325 | css: `.loader { 1326 | position: relative; 1327 | width: 48px; 1328 | height: 48px; 1329 | } 1330 | .loader:before, 1331 | .loader:after { 1332 | content:""; 1333 | display: block; 1334 | border: 32px solid transparent; 1335 | border-top-color: #fff; 1336 | position: absolute; 1337 | left: 0; 1338 | top: 0; 1339 | animation: weld-rotate 2s infinite ease-in; 1340 | } 1341 | .loader:before { 1342 | border-color: transparent transparent transparent #FF3D00; 1343 | animation-delay: 0.5s; 1344 | } 1345 | @keyframes weld-rotate { 1346 | 0% , 25% {transform: rotate(0deg)} 1347 | 50% , 75% {transform: rotate(180deg)} 1348 | 100% {transform: rotate(360deg)} 1349 | } 1350 | ` 1351 | }, 1352 | { 1353 | id: "pir-wottippu-flw", 1354 | html: ``, 1355 | css: `.loader { 1356 | position: relative; 1357 | width: 48px; 1358 | height: 48px; 1359 | } 1360 | .loader:before, 1361 | .loader:after { 1362 | content:""; 1363 | display: block; 1364 | border: 32px solid transparent; 1365 | border-top-color: #fff; 1366 | position: absolute; 1367 | left: 0; 1368 | top: 0; 1369 | animation: weld-rotate 2s infinite ease-in; 1370 | } 1371 | .loader:before { 1372 | border-color: transparent transparent transparent #FF3D00; 1373 | animation-delay: 0.5s; 1374 | animation-direction: reverse; 1375 | } 1376 | @keyframes weld-rotate { 1377 | 0% , 25% {transform: rotate(0deg)} 1378 | 50% , 75% {transform: rotate(180deg)} 1379 | 100% {transform: rotate(360deg)} 1380 | } 1381 | ` 1382 | }, 1383 | { 1384 | id: "brik-splt-mv", 1385 | html: ``, 1386 | css: `.loader { 1387 | position: relative; 1388 | width: 48px; 1389 | height: 48px; 1390 | } 1391 | .loader:before{ 1392 | content: ""; 1393 | border-left: 24px solid #fff; 1394 | border-right: 24px solid #fff; 1395 | position: absolute; 1396 | height: 24px; 1397 | width: 0; 1398 | left: 50%; 1399 | transform: translateX(-50%); 1400 | top: 0px; 1401 | animation: splitX 1s linear infinite alternate; 1402 | } 1403 | .loader:after{ 1404 | content: ''; 1405 | width: 48px; 1406 | height: 24px; 1407 | background: #fff; 1408 | position: absolute; 1409 | left: 0; 1410 | bottom:0; 1411 | animation:moveY 1s linear infinite alternate; 1412 | } 1413 | @keyframes splitX { 1414 | 0% {width: 0; transform: translate(-50% , 0)} 1415 | 33% {width: 100%; transform: translate(-50% , 0)} 1416 | 66% {width: 100%; transform: translate(-50% , 24px)} 1417 | 100% {width: 0; transform: translate(-50% , 24px)} 1418 | } 1419 | 1420 | @keyframes moveY { 1421 | 0% , 33% {transform: translateY(0)} 1422 | 66% , 100% {transform: translateY(-24px)} 1423 | } 1424 | `, 1425 | }, 1426 | 1427 | { 1428 | id: "spinFloatSqr", 1429 | html: ``, 1430 | css: `.loader { 1431 | width: 48px; 1432 | height: 48px; 1433 | margin: auto; 1434 | position: relative; 1435 | } 1436 | .loader:before { 1437 | content: ''; 1438 | width: 48px; 1439 | height: 5px; 1440 | background: #000; 1441 | opacity: 0.25; 1442 | position: absolute; 1443 | top: 60px; 1444 | left: 0; 1445 | border-radius: 50%; 1446 | animation: shadow 0.5s linear infinite; 1447 | } 1448 | .loader:after { 1449 | content: ''; 1450 | width: 100%; 1451 | height: 100%; 1452 | background: #fff; 1453 | animation: bxSpin 0.5s linear infinite; 1454 | position: absolute; 1455 | top: 0; 1456 | left: 0; 1457 | border-radius: 4px; 1458 | } 1459 | @keyframes bxSpin { 1460 | 17% { 1461 | border-bottom-right-radius: 3px; 1462 | } 1463 | 25% { 1464 | transform: translateY(9px) rotate(22.5deg); 1465 | } 1466 | 50% { 1467 | transform: translateY(18px) scale(1, .9) rotate(45deg); 1468 | border-bottom-right-radius: 40px; 1469 | } 1470 | 75% { 1471 | transform: translateY(9px) rotate(67.5deg); 1472 | } 1473 | 100% { 1474 | transform: translateY(0) rotate(90deg); 1475 | } 1476 | } 1477 | 1478 | @keyframes shadow { 1479 | 0%, 100% { 1480 | transform: scale(1, 1); 1481 | } 1482 | 50% { 1483 | transform: scale(1.2, 1); 1484 | } 1485 | } 1486 | ` 1487 | }, 1488 | { 1489 | id: "sqrWalkBrk2x", 1490 | html: ``, 1491 | css: `.loader { 1492 | position: relative; 1493 | width: 48px; 1494 | height: 48px; 1495 | background: #fff; 1496 | border-radius: 50%; 1497 | animation:ellipseAnimation 2s linear infinite; 1498 | } 1499 | 1500 | @keyframes ellipseAnimation { 1501 | 0% { 1502 | border-radius: 50%; 1503 | } 1504 | 1505 | 12.5% { 1506 | border-radius: 0 50% 50% 50%; 1507 | transform: rotate(45deg); 1508 | } 1509 | 1510 | 25% { 1511 | border-radius: 0 0 50% 50%; 1512 | transform: rotate(90deg); 1513 | } 1514 | 1515 | 37.5% { 1516 | border-radius: 0 0 0 50%; 1517 | transform: rotate(135deg); 1518 | } 1519 | 1520 | 50% { 1521 | border-radius: 0; 1522 | transform: rotate(180deg); 1523 | } 1524 | 1525 | 62.5% { 1526 | border-radius: 50% 0 0 0; 1527 | transform: rotate(225deg); 1528 | } 1529 | 1530 | 75% { 1531 | border-radius: 50% 50% 0 0; 1532 | transform: rotate(270deg); 1533 | } 1534 | 1535 | 87.5% { 1536 | border-radius: 50% 50% 50% 0; 1537 | transform: rotate(315deg); 1538 | } 1539 | 1540 | 100% { 1541 | border-radius: 50%; 1542 | transform: rotate(360deg); 1543 | } 1544 | } 1545 | ` 1546 | }, 1547 | 1548 | { 1549 | id: "sqrWalkBrk2x", 1550 | html: ``, 1551 | css: `.loader { 1552 | position: relative; 1553 | width: 62px; 1554 | height: 62px; 1555 | background: linear-gradient(to right, #FFF 20%, #0000 21%); 1556 | background-repeat: repeat-x; 1557 | background-size: 36px 8px; 1558 | background-position: 9px bottom; 1559 | animation: moveX 0.5s linear infinite; 1560 | } 1561 | .loader::before { 1562 | content: ''; 1563 | position: absolute; 1564 | width: 40px; 1565 | height: 40px; 1566 | border-radius: 2px; 1567 | background-color: #fff; 1568 | left: 50%; 1569 | top: 50%; 1570 | transform: translate(-50% , -50% ); 1571 | animation: rotate 0.5s linear infinite; 1572 | } 1573 | 1574 | @keyframes moveX { 1575 | 0%, 25%{ background-position: 10px bottom } 1576 | 75% , 100% {background-position: -30px bottom;} 1577 | } 1578 | @keyframes rotate { 1579 | 0%, 25% { transform:translate(-50% , -50% ) rotate(0deg)} 1580 | 75%, 100% { transform:translate(-55% , -55% ) rotate(90deg)} 1581 | } 1582 | ` 1583 | }, 1584 | 1585 | { 1586 | id: "sqr-bblBounceFlp", 1587 | html: ``, 1588 | css: `.loader { 1589 | width: 50px; 1590 | height: 165px; 1591 | position: relative; 1592 | } 1593 | .loader::before { 1594 | content: ''; 1595 | position: absolute; 1596 | left: 50%; 1597 | top: 0; 1598 | transform: translate(-50% , 0); 1599 | width: 16px; 1600 | height: 16px; 1601 | background: #FF3D00; 1602 | border-radius: 50%; 1603 | animation: bounce 2s linear infinite; 1604 | } 1605 | .loader::after { 1606 | content: ''; 1607 | position: absolute; 1608 | left: 0; 1609 | right: 0; 1610 | bottom: 0; 1611 | margin: auto; 1612 | height: 48px; 1613 | width: 48px; 1614 | background: #fff; 1615 | border-radius: 4px; 1616 | animation: rotate 2s linear infinite; 1617 | } 1618 | 1619 | @keyframes bounce { 1620 | 0% , 50% , 100%{ 1621 | transform: translate(-50%, 0px); 1622 | height: 20px; 1623 | } 1624 | 20% { 1625 | transform: translate(-25%, 85px); 1626 | height: 28px; 1627 | } 1628 | 25% { 1629 | transform: translate(-25%, 110px); 1630 | height: 12px; 1631 | } 1632 | 70% { 1633 | transform: translate(-75%, 85px); 1634 | height: 28px; 1635 | } 1636 | 75% { 1637 | transform: translate(-75%, 108px); 1638 | height: 12px; 1639 | } 1640 | } 1641 | @keyframes rotate { 1642 | 0% , 50% , 100%{ transform: rotate(0deg)} 1643 | 25% { transform: rotate(90deg)} 1644 | 75%{ transform: rotate(-90deg)} 1645 | } 1646 | ` 1647 | }, 1648 | 1649 | { 1650 | id: "sqr-bbl-flpFlw", 1651 | html: ``, 1652 | css: `.loader { 1653 | width: 56px; 1654 | height: 56px; 1655 | position: relative; 1656 | background: #fff; 1657 | border-radius: 4px; 1658 | perspective: 500px; 1659 | } 1660 | .loader:before { 1661 | content: ""; 1662 | position: absolute; 1663 | left: 2px; 1664 | top: 2px; 1665 | width: 24px; 1666 | height: 24px; 1667 | background: #FF3D00; 1668 | border-radius: 50%; 1669 | transform-origin: 100% 100%; 1670 | animation: flip 2s linear infinite; 1671 | } 1672 | @keyframes flip { 1673 | 0% , 100%{ transform: rotateX(0deg) rotateY(0deg)} 1674 | 25%{ transform: rotateX(0deg) rotateY(-180deg)} 1675 | 50%{ transform: rotateX(-180deg) rotateY(-180deg)} 1676 | 75%{ transform: rotateX(-180deg) rotateY(0deg)} 1677 | } 1678 | ` 1679 | }, 1680 | 1681 | { 1682 | id: "cubBblflowwt", 1683 | html: ``, 1684 | css: `.loader { 1685 | width: 54px; 1686 | height: 54px; 1687 | position: relative; 1688 | background: #fff; 1689 | border-radius: 4px; 1690 | } 1691 | .loader:before { 1692 | content: ""; 1693 | position: absolute; 1694 | left: 3px; 1695 | top: 3px; 1696 | width: 24px; 1697 | height: 24px; 1698 | background: #FF3D00; 1699 | border-radius: 50%; 1700 | transform-origin: 100% 100%; 1701 | animation: move 1s linear infinite; 1702 | } 1703 | @keyframes move { 1704 | 0% , 100%{ transform: translate(0 ,0)} 1705 | 25%{ transform: translate(100% ,0)} 1706 | 50%{ transform: translate(100% ,100%)} 1707 | 75%{ transform: translate(0 ,100%)} 1708 | } 1709 | ` 1710 | }, 1711 | 1712 | { 1713 | id: "cubeRotDial", 1714 | html: ``, 1715 | css: `.loader { 1716 | width: 54px; 1717 | height: 54px; 1718 | position: relative; 1719 | border-radius: 4px; 1720 | background-color: #fff; 1721 | background-image: 1722 | radial-gradient(circle 5px , #FF3D00 100%, transparent 0), 1723 | radial-gradient(circle 5px , #FF3D00 100%, transparent 0), 1724 | radial-gradient(circle 5px , #FF3D00 100%, transparent 0), 1725 | radial-gradient(circle 5px , #FF3D00 100%, transparent 0), 1726 | radial-gradient(circle 5px , #FF3D00 100%, transparent 0), 1727 | radial-gradient(circle 5px , #FF3D00 100%, transparent 0); 1728 | background-repeat: no-repeat; 1729 | animation: move 4s linear infinite , rotate 2s linear infinite; 1730 | } 1731 | 1732 | @keyframes rotate { 1733 | 0% , 20%{ transform: rotate(0deg)} 1734 | 30% , 40% { transform: rotate(90deg)} 1735 | 50% , 60% { transform: rotate(180deg)} 1736 | 70% , 80% { transform: rotate(270deg)} 1737 | 90%, 100% { transform: rotate(360deg)} 1738 | } 1739 | @keyframes move { 1740 | 0% , 9%{ 1741 | background-position: 1742 | -12px -15px, -12px 0px, -12px 15px, 1743 | 12px -15px, 12px 0px, 12px 15px; 1744 | } 1745 | 10% , 25%{ 1746 | background-position: 1747 | 0px -15px, -12px 0px, -12px 15px, 1748 | 34px -15px, 12px 0px, 12px 15px; 1749 | } 1750 | 30% , 45%{ 1751 | background-position: 1752 | 0px -34px, -12px -10px, -12px 12px, 1753 | 34px -15px, 12px -10px, 12px 12px; 1754 | } 1755 | 50% , 65% { 1756 | background-position: 1757 | 0px -34px, -12px -34px, -12px 12px, 1758 | 34px -12px, 0px -10px, 12px 12px; 1759 | } 1760 | 70% , 85% { 1761 | background-position: 1762 | 0px -34px, -12px -34px, 0px 12px, 1763 | 34px -12px, 0px -10px, 34px 12px; 1764 | } 1765 | 90% , 100% { 1766 | background-position: 1767 | 0px -34px, -12px -34px, 0px 0px, 1768 | 34px -12px, 0px 0px, 34px 12px; 1769 | } 1770 | } 1771 | ` 1772 | }, 1773 | 1774 | { 1775 | id: "gsupn3q1npb", 1776 | html: ``, 1777 | css: `.loader { 1778 | width: 16px; 1779 | height: 16px; 1780 | box-shadow: 0 30px, 0 -30px; 1781 | border-radius: 4px; 1782 | background: currentColor; 1783 | display: block; 1784 | margin: -50px auto 0; 1785 | position: relative; 1786 | color: #FFF; 1787 | transform: translateY(30px); 1788 | box-sizing: border-box; 1789 | animation: animloader 2s ease infinite; 1790 | } 1791 | .loader::after, 1792 | .loader::before { 1793 | content: ''; 1794 | box-sizing: border-box; 1795 | width: 16px; 1796 | height: 16px; 1797 | box-shadow: 0 30px, 0 -30px; 1798 | border-radius: 4px; 1799 | background: currentColor; 1800 | color: #FFF; 1801 | position: absolute; 1802 | left: 30px; 1803 | top: 0; 1804 | animation: animloader 2s 0.2s ease infinite; 1805 | } 1806 | .loader::before { 1807 | animation-delay: 0.4s; 1808 | left: 60px; 1809 | } 1810 | 1811 | @keyframes animloader { 1812 | 0% { 1813 | top: 0; 1814 | color: white; 1815 | } 1816 | 50% { 1817 | top: 30px; 1818 | color: rgba(255, 255, 255, 0.2); 1819 | } 1820 | 100% { 1821 | top: 0; 1822 | color: white; 1823 | } 1824 | } 1825 | `, 1826 | } 1827 | ] -------------------------------------------------------------------------------- /js/loaders/skeleton.js: -------------------------------------------------------------------------------- 1 | export const SKELETON = [ 2 | { 3 | id: "1k4fd7cixrr", 4 | html: ``, 5 | css: `.loader { 6 | width: 360px; 7 | height: 100px; 8 | display: block; 9 | background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), radial-gradient(circle 50px at 50px 50px, #FFF 99%, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); 10 | background-repeat: no-repeat; 11 | background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px; 12 | background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px; 13 | box-sizing: border-box; 14 | animation: animloader 1s linear infinite; 15 | } 16 | 17 | @keyframes animloader { 18 | 0% { 19 | background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px; 20 | } 21 | 100% { 22 | background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px; 23 | } 24 | } 25 | `, 26 | }, { 27 | id: "qaml5b4yau", 28 | html: ``, 29 | css: `.loader { 30 | width: 360px; 31 | height: 100px; 32 | display: block; 33 | background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 100px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); 34 | background-repeat: no-repeat; 35 | background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px; 36 | background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px; 37 | box-sizing: border-box; 38 | animation: animloader 1s linear infinite; 39 | } 40 | 41 | @keyframes animloader { 42 | 0% { 43 | background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px; 44 | } 45 | 100% { 46 | background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px; 47 | } 48 | } 49 | `, 50 | }, { 51 | id: "mfws6k6awb", 52 | html: ``, 53 | css: `.loader { 54 | width: 360px; 55 | height: 100px; 56 | display: block; 57 | position: relative; 58 | background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); 59 | background-repeat: no-repeat; 60 | background-size: 75px 100px, 125px 20px, 260px 20px, 260px 20px; 61 | background-position: 0% 0, 120px 0, 120px 40px, 120px 80px; 62 | box-sizing: border-box; 63 | animation: animloader 1s linear infinite; 64 | } 65 | .loader::after { 66 | content: ''; 67 | box-sizing: border-box; 68 | width: 100px; 69 | height: 100px; 70 | border-radius: 8px; 71 | background: #FFF; 72 | position: absolute; 73 | top: 0; 74 | left: 0; 75 | } 76 | 77 | @keyframes animloader { 78 | 0% { 79 | background-position: 0% 0, 120px 0, 120px 40px, 120px 80px; 80 | } 81 | 100% { 82 | background-position: 100% 0, 120px 0, 120px 40px, 120px 80px; 83 | } 84 | } 85 | `, 86 | }, { 87 | id: "r9ql0hh65i", 88 | html: ``, 89 | css: `.loader { 90 | width: 320px; 91 | height: 150px; 92 | margin: auto; 93 | display: block; 94 | position: relative; 95 | background: #FFF; 96 | box-sizing: border-box; 97 | } 98 | .loader::after { 99 | content: ''; 100 | width: calc(100% - 30px); 101 | height: calc(100% - 30px); 102 | top: 15px; 103 | left: 15px; 104 | position: absolute; 105 | background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), linear-gradient(#DDD 56px, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0); 106 | background-repeat: no-repeat; 107 | background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px; 108 | background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; 109 | box-sizing: border-box; 110 | animation: animloader 1s linear infinite; 111 | } 112 | 113 | @keyframes animloader { 114 | 0% { 115 | background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; 116 | } 117 | 100% { 118 | background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; 119 | } 120 | } 121 | `, 122 | }, { 123 | id: "clfvm3ka8b8", 124 | html: ``, 125 | css: `.loader { 126 | width: 320px; 127 | height: 150px; 128 | display: block; 129 | margin: auto; 130 | position: relative; 131 | background: #FFF; 132 | box-sizing: border-box; 133 | } 134 | .loader::after { 135 | content: ''; 136 | width: calc(100% - 30px); 137 | height: calc(100% - 30px); 138 | top: 15px; 139 | left: 15px; 140 | position: absolute; 141 | background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0); 142 | background-repeat: no-repeat; 143 | background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px; 144 | background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; 145 | box-sizing: border-box; 146 | animation: animloader 1s linear infinite; 147 | } 148 | 149 | @keyframes animloader { 150 | 0% { 151 | background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; 152 | } 153 | 100% { 154 | background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px; 155 | } 156 | } 157 | `, 158 | }, 159 | { 160 | id: "povx9GSkelw7f6a", 161 | html: ``, 162 | css: `.loader{ 163 | width: 315px; 164 | height: 200px; 165 | background: 166 | linear-gradient(0.25turn, transparent, #FFF, transparent), 167 | linear-gradient(#DDD, #DDD), 168 | radial-gradient(38px circle at 19px 19px, #DDD 50%, transparent 51%), 169 | linear-gradient(#DDD, #DDD); 170 | background-color: #fff; 171 | background-repeat: no-repeat; 172 | background-size: 315px 200px, 315px 130px, 100px 100px, 225px 30px; 173 | background-position: -315px 0, 0 0, 15px 140px, 65px 145px; 174 | animation: loading 1.5s infinite; 175 | } 176 | 177 | @keyframes loading { 178 | to { 179 | background-position: 315px 0, 0 0, 15px 140px, 65px 145px; 180 | } 181 | } 182 | ` 183 | }, 184 | 185 | { 186 | id: "sklCrdCrl2xTl", 187 | html: ``, 188 | css: `.loader { 189 | width: 215px; 190 | height: 215px; 191 | display: block; 192 | margin: auto; 193 | position: relative; 194 | background: #FFF; 195 | box-sizing: border-box; 196 | } 197 | .loader::after { 198 | content: ''; 199 | width: calc(100% - 30px); 200 | height: calc(100% - 30px); 201 | top: 15px; 202 | left: 15px; 203 | position: absolute; 204 | background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%), 205 | radial-gradient(circle 50px , #DDD 100%, transparent 0), 206 | linear-gradient(#DDD 16px, transparent 0), 207 | linear-gradient(#DDD 24px, transparent 0); 208 | background-repeat: no-repeat; 209 | background-size: 75px 175px, 100% 100px, 80% 16px, 80% 16px; 210 | background-position: -185px 0, center 10px, center 125px, center 155px; 211 | box-sizing: border-box; 212 | animation: animloader 1s linear infinite; 213 | } 214 | 215 | @keyframes animloader { 216 | to { 217 | background-position: 185px 0, center 10px, center 125px, center 155px; 218 | } 219 | } 220 | ` 221 | }, 222 | 223 | 224 | { 225 | id: "a31hn504vze", 226 | html: ``, 227 | css: `.loader { 228 | width: 215px; 229 | height: 215px; 230 | display: block; 231 | margin: auto; 232 | position: relative; 233 | background: #FFF; 234 | box-sizing: border-box; 235 | } 236 | .loader::after { 237 | content: ''; 238 | width: calc(100% - 30px); 239 | height: calc(100% - 15px); 240 | top: 15px; 241 | left: 15px; 242 | position: absolute; 243 | background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%), 244 | linear-gradient(#DDD 100px, transparent 0), 245 | linear-gradient(#DDD 16px, transparent 0), 246 | linear-gradient(#DDD 50px, transparent 0); 247 | background-repeat: no-repeat; 248 | background-size: 75px 175px, 100% 100px, 100% 16px, 100% 30px; 249 | background-position: -185px 0, center 0, center 115px, center 142px; 250 | box-sizing: border-box; 251 | animation: animloader 1s linear infinite; 252 | } 253 | 254 | @keyframes animloader { 255 | to { 256 | background-position: 185px 0, center 0, center 115px, center 142px; 257 | } 258 | } 259 | 260 | `, 261 | }, 262 | 263 | { 264 | id: "sklCrdSqr2xtxt", 265 | html: ``, 266 | css: `.loader { 267 | width: 215px; 268 | height: 220px; 269 | background: 270 | linear-gradient(0.25turn, transparent, #FFF, transparent), 271 | linear-gradient(#DDD, #DDD), 272 | linear-gradient(#DDD, #DDD), 273 | linear-gradient(#DDD, #DDD); 274 | background-color: #fff; 275 | background-repeat: no-repeat; 276 | background-size: 215px 220px, 215px 130px, 100px 15px, 150px 15px; 277 | background-position: -215px 0, 0 0, 15px 150px, 15px 180px; 278 | animation: loading 1.5s infinite; 279 | } 280 | 281 | @keyframes loading { 282 | to { 283 | background-position: 215px 0, 0 0, 15px 150px, 15px 180px; 284 | } 285 | } 286 | `, 287 | }, 288 | 289 | 290 | 291 | ] -------------------------------------------------------------------------------- /js/loaders/text.js: -------------------------------------------------------------------------------- 1 | export const TEXT = [ 2 | { 3 | id: "n8abp6kko7", 4 | content: 'Loading', 5 | html: `Loading`, 6 | css: `.loader { 7 | font-size: 48px; 8 | font-family: Arial, Helvetica, sans-serif; 9 | font-weight: bold; 10 | display: inline-block; 11 | color: #FF3D00; 12 | letter-spacing: 2px; 13 | position: relative; 14 | box-sizing: border-box; 15 | } 16 | .loader::after { 17 | content: 'Loading'; 18 | position: absolute; 19 | left: 0; 20 | top: 0; 21 | color: #FFF; 22 | width: 100%; 23 | height: 100%; 24 | overflow: hidden; 25 | box-sizing: border-box; 26 | animation: animloader 6s linear infinite; 27 | } 28 | 29 | @keyframes animloader { 30 | 0% { 31 | height: 100%; 32 | } 33 | 100% { 34 | height: 0%; 35 | } 36 | } 37 | `, 38 | }, { 39 | id: "xkjlk7q886r", 40 | content: 'Loading', 41 | html: `Loading`, 42 | css: `.loader { 43 | font-size: 48px; 44 | display: inline-block; 45 | font-family: Arial, Helvetica, sans-serif; 46 | font-weight: bold; 47 | color: #FFF; 48 | letter-spacing: 2px; 49 | position: relative; 50 | box-sizing: border-box; 51 | } 52 | .loader::after { 53 | content: 'Loading'; 54 | position: absolute; 55 | left: 0; 56 | top: 0; 57 | color: #263238; 58 | text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF; 59 | width: 100%; 60 | height: 100%; 61 | overflow: hidden; 62 | box-sizing: border-box; 63 | animation: animloader 6s linear infinite; 64 | } 65 | 66 | @keyframes animloader { 67 | 0% { 68 | height: 100%; 69 | } 70 | 100% { 71 | height: 0%; 72 | } 73 | } 74 | `, 75 | }, { 76 | id: "x5uh05vpzo", 77 | content: 'Loading', 78 | html: `Loading`, 79 | css: `.loader { 80 | font-size: 48px; 81 | display: inline-block; 82 | font-family: Arial, Helvetica, sans-serif; 83 | font-weight: bold; 84 | color: #263238; 85 | box-sizing: border-box; 86 | text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF; 87 | letter-spacing: 2px; 88 | position: relative; 89 | } 90 | .loader::after { 91 | content: 'Loading'; 92 | position: absolute; 93 | left: 0; 94 | top: 0; 95 | color: #FFF; 96 | width: 100%; 97 | height: 100%; 98 | overflow: hidden; 99 | box-sizing: border-box; 100 | animation: animloader 6s linear infinite; 101 | } 102 | 103 | @keyframes animloader { 104 | 0% { 105 | width: 0%; 106 | } 107 | 100% { 108 | width: 100%; 109 | } 110 | } 111 | `, 112 | }, { 113 | id: "b8snykspq3", 114 | content: 'L   ading', 115 | html: `L   ading`, 116 | css: `.loader { 117 | display: inline-block; 118 | font-size: 48px; 119 | font-family: Arial, Helvetica, sans-serif; 120 | font-weight: bold; 121 | color: #FFF; 122 | position: relative; 123 | } 124 | .loader::before { 125 | content: ''; 126 | position: absolute; 127 | left: 34px; 128 | bottom: 8px; 129 | width: 30px; 130 | height: 30px; 131 | border-radius: 50%; 132 | border: 5px solid #FFF; 133 | border-bottom-color: #FF3D00; 134 | box-sizing: border-box; 135 | animation: rotation 0.6s linear infinite; 136 | } 137 | 138 | @keyframes rotation { 139 | 0% { 140 | transform: rotate(0deg); 141 | } 142 | 100% { 143 | transform: rotate(360deg); 144 | } 145 | } `, 146 | }, { 147 | id: "96huvhm2ehv", 148 | content: 'Load ng', 149 | html: `Load ng`, 150 | css: `.loader { 151 | color: #FFF; 152 | position: relative; 153 | display: inline-block; 154 | margin-top: 40px; 155 | font-family: Arial, Helvetica, sans-serif; 156 | font-size: 48px; 157 | letter-spacing: 4px; 158 | box-sizing: border-box; 159 | } 160 | .loader::before { 161 | content: ''; 162 | position: absolute; 163 | right: 70px; 164 | bottom: 10px; 165 | height: 28px; 166 | width: 5.15px; 167 | background: currentColor; 168 | box-sizing: border-box; 169 | animation: animloader1 1s linear infinite alternate; 170 | } 171 | .loader::after { 172 | content: ''; 173 | width: 10px; 174 | height: 10px; 175 | position: absolute; 176 | left: 125px; 177 | top: 2px; 178 | border-radius: 50%; 179 | background: red; 180 | box-sizing: border-box; 181 | animation: animloader 1s linear infinite alternate; 182 | } 183 | 184 | @keyframes animloader { 185 | 0% { 186 | transform: translate(0px, 0px) scaleX(1); 187 | } 188 | 14% { 189 | transform: translate(-12px, -16px) scaleX(1.05); 190 | } 191 | 28% { 192 | transform: translate(-27px, -28px) scaleX(1.07); 193 | } 194 | 42% { 195 | transform: translate(-46px, -35px) scaleX(1.1); 196 | } 197 | 57% { 198 | transform: translate(-70px, -37px) scaleX(1.1); 199 | } 200 | 71% { 201 | transform: translate(-94px, -32px) scaleX(1.07); 202 | } 203 | 85% { 204 | transform: translate(-111px, -22px) scaleX(1.05); 205 | } 206 | 100% { 207 | transform: translate(-125px, -9px) scaleX(1); 208 | } 209 | } 210 | 211 | @keyframes animloader1 { 212 | 0% { 213 | box-shadow: 0 -6px, -122.9px -8px; 214 | } 215 | 25%, 75% { 216 | box-shadow: 0 0px, -122.9px -8px; 217 | } 218 | 100% { 219 | box-shadow: 0 0px, -122.9px -16px; 220 | } 221 | } 222 | `, 223 | }, 224 | 225 | { 226 | id: "oq8vTeX8tt5n9", 227 | html: `Load ng`, 228 | css: `.loader{ 229 | font-size: 48px; 230 | color: transparent; 231 | overflow:hidden; 232 | display: inline-block; 233 | font-family: Arial, Helvetica, sans-serif; 234 | text-shadow:0 0 #FFF, 5em 0 #FFF; 235 | animation:marquee 2s infinite ease; 236 | } 237 | .loader:before { 238 | content:"Loading..."; 239 | } 240 | 241 | @keyframes marquee {to{text-shadow:-5em 0 #FFF, 0 0 #FFF}} 242 | ` 243 | }, 244 | 245 | 246 | { 247 | id: "oq8v82tt5n9", 248 | content: 'Load ng', 249 | html: `Load ng`, 250 | css: `.loader { 251 | color: #FFF; 252 | position: relative; 253 | display: inline-block; 254 | margin-top: 20px; 255 | font-family: Arial, Helvetica, sans-serif; 256 | font-size: 48px; 257 | letter-spacing: 4px; 258 | box-sizing: border-box; 259 | } 260 | .loader::before { 261 | content: ''; 262 | box-sizing: border-box; 263 | position: absolute; 264 | right: 70px; 265 | bottom: 10px; 266 | height: 24px; 267 | width: 5.15px; 268 | background: currentColor; 269 | } 270 | .loader::after { 271 | content: ''; 272 | width: 8px; 273 | height: 8px; 274 | position: absolute; 275 | left: 125px; 276 | top: 2px; 277 | border-radius: 50%; 278 | background: red; 279 | box-sizing: border-box; 280 | animation: animloader 1s ease-in infinite; 281 | } 282 | 283 | @keyframes animloader { 284 | 0% { 285 | transform: translateY(8px) scaleY(1) scaleX(1.25); 286 | } 287 | 25%, 75% { 288 | transform: translateY(-5px) scaleY(1.2) scaleX(1); 289 | } 290 | 50% { 291 | transform: translateY(-10px) scaleY(1) scaleX(1); 292 | } 293 | 100% { 294 | transform: translateY(8px) scaleY(0.8) scaleX(0.8); 295 | } 296 | } 297 | `, 298 | }, { 299 | id: "x6aic1riy0h", 300 | content: 'Loading', 301 | html: `Loading`, 302 | css: `.loader { 303 | color: #FFF; 304 | display: inline-block; 305 | position: relative; 306 | font-size: 48px; 307 | font-family: Arial, Helvetica, sans-serif; 308 | box-sizing: border-box; 309 | } 310 | .loader::after { 311 | content: ''; 312 | width: 5px; 313 | height: 5px; 314 | background: currentColor; 315 | position: absolute; 316 | bottom: 10px; 317 | right: -5px; 318 | box-sizing: border-box; 319 | animation: animloader 1s linear infinite; 320 | } 321 | 322 | @keyframes animloader { 323 | 0% { 324 | box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0); 325 | } 326 | 50% { 327 | box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0); 328 | } 329 | 100% { 330 | box-shadow: 10px 0 white, 20px 0 white; 331 | } 332 | } 333 | `, 334 | }, 335 | { 336 | id: "text-spotlight-elate", 337 | content: 'Loading', 338 | html: `Loading`, 339 | css: `.loader { 340 | font-size: 48px; 341 | font-weight: 600; 342 | display: inline-block; 343 | letter-spacing: 2px; 344 | font-family: Arial, Helvetica, sans-serif; 345 | color: #FFF; 346 | box-sizing: border-box; 347 | animation: spotlight 2s linear infinite alternate; 348 | } 349 | 350 | @keyframes spotlight { 351 | 0% , 20% { 352 | opacity: 1; 353 | letter-spacing: 2px; 354 | } 355 | 80% , 100% { 356 | opacity: 0; 357 | letter-spacing: 32px; 358 | } 359 | } 360 | ` 361 | }, 362 | 363 | { 364 | id: "i9vseffpc6r", 365 | content: 'Load ng', 366 | html: `Load ng`, 367 | css: `.loader { 368 | color: #FFF; 369 | display: inline-block; 370 | position: relative; 371 | font-family: Arial, Helvetica, sans-serif; 372 | font-size: 48px; 373 | letter-spacing: 4px; 374 | box-sizing: border-box; 375 | } 376 | .loader::before { 377 | content: ''; 378 | position: absolute; 379 | right: 70px; 380 | bottom: 10px; 381 | height: 24px; 382 | width: 5px; 383 | background: currentColor; 384 | box-sizing: border-box; 385 | } 386 | .loader::after { 387 | content: ''; 388 | width: 4px; 389 | height: 4px; 390 | background: currentColor; 391 | position: absolute; 392 | right: 70px; 393 | top: 8px; 394 | box-sizing: border-box; 395 | animation: animloader 0.6s ease-out infinite alternate; 396 | } 397 | 398 | @keyframes animloader { 399 | 0% { 400 | top: 8px; 401 | transform: rotate(0deg) scale(1); 402 | } 403 | 100% { 404 | top: 0px; 405 | transform: rotate(180deg) scale(1.5); 406 | } 407 | } 408 | `, 409 | }, { 410 | id: "3bdczi78s17", 411 | content: 'Load ng', 412 | html: `Load ng`, 413 | css: `.loader { 414 | color: #FFF; 415 | display: inline-block; 416 | position: relative; 417 | font-family: Arial, Helvetica, sans-serif; 418 | font-size: 48px; 419 | letter-spacing: 4px; 420 | box-sizing: border-box; 421 | } 422 | .loader::before { 423 | content: ''; 424 | position: absolute; 425 | right: 68px; 426 | bottom: 10px; 427 | height: 24px; 428 | width: 7px; 429 | outline: 1px solid #FFF; 430 | color: #FF3D00; 431 | box-sizing: border-box; 432 | animation: animloader1 1s linear infinite alternate; 433 | } 434 | .loader::after { 435 | content: ''; 436 | width: 4px; 437 | height: 4px; 438 | background: #FF3D00; 439 | position: absolute; 440 | right: 70px; 441 | top: 8px; 442 | box-sizing: border-box; 443 | animation: animloader 1s ease-out infinite alternate; 444 | } 445 | 446 | @keyframes animloader { 447 | 0% { 448 | top: 8px; 449 | transform: rotate(0deg) scale(1); 450 | } 451 | 100% { 452 | top: 0px; 453 | transform: rotate(180deg) scale(1.5); 454 | } 455 | } 456 | 457 | @keyframes animloader1 { 458 | 0% { 459 | box-shadow: 0 0 inset; 460 | } 461 | 100% { 462 | box-shadow: 0 -28px inset; 463 | } 464 | } 465 | `, 466 | }, { 467 | id: "p8ibtm0n4y", 468 | html: ``, 469 | css: `.loader { 470 | position: relative; 471 | display: inline-block; 472 | } 473 | .loader::before { 474 | 475 | content: 'Loading'; 476 | color: #FFF; 477 | font-family: Arial, Helvetica, sans-serif; 478 | font-size: 48px; 479 | letter-spacing: 2px; 480 | display: inline-block; 481 | box-sizing: border-box; 482 | animation: floating 1s ease-out infinite alternate; 483 | } 484 | .loader::after { 485 | content: ''; 486 | width: 100%; 487 | height: 10px; 488 | background: rgba(0, 0, 0, 0.15); 489 | position: absolute; 490 | left: 0; 491 | top: 100%; 492 | filter: blur(4px); 493 | border-radius: 50%; 494 | box-sizing: border-box; 495 | animation: animloader 1s ease-out infinite alternate; 496 | } 497 | 498 | @keyframes floating { 499 | 0% { 500 | transform: translateY(0); 501 | } 502 | 100% { 503 | transform: translateY(-25px); 504 | } 505 | } 506 | 507 | @keyframes animloader { 508 | 0% { 509 | transform: scale(0.8); 510 | } 511 | 100% { 512 | transform: scale(1.2); 513 | } 514 | } 515 | `, 516 | }, { 517 | id: "6y36vminasy", 518 | content: 'Loading', 519 | html: `Loading`, 520 | css: `.loader { 521 | font-size: 48px; 522 | display: inline-block; 523 | letter-spacing: 2px; 524 | font-family: Arial, Helvetica, sans-serif; 525 | color: #FFF; 526 | box-sizing: border-box; 527 | animation: animloader 1s ease-in infinite alternate; 528 | } 529 | 530 | @keyframes animloader { 531 | 0% { 532 | filter: blur(0px); 533 | transform: skew(0deg); 534 | } 535 | 100% { 536 | filter: blur(3px); 537 | transform: skew(-4deg); 538 | } 539 | } 540 | `, 541 | }, { 542 | id: "m1ofkeibm7", 543 | content: 'Loading', 544 | html: `Loading`, 545 | css: `.loader { 546 | font-size: 48px; 547 | display: inline-block; 548 | font-family: Arial, Helvetica, sans-serif; 549 | font-weight: bold; 550 | color: #FF3D00; 551 | letter-spacing: 2px; 552 | position: relative; 553 | } 554 | .loader::after { 555 | content: 'Loading'; 556 | position: absolute; 557 | left: 0; 558 | top: 0; 559 | color: #FFF; 560 | width: 100%; 561 | height: 100%; 562 | overflow: hidden; 563 | box-sizing: border-box; 564 | animation: animloader 10s ease-in infinite; 565 | } 566 | 567 | @keyframes animloader { 568 | 0% { 569 | width: 0%; 570 | } 571 | 100% { 572 | width: 100%; 573 | } 574 | } 575 | `, 576 | }, 577 | { 578 | id: "text-fkeibm", 579 | content: 'Loading', 580 | html: `Loading`, 581 | css: `.loader{ 582 | font-size: 48px; 583 | color: #FFF; 584 | display: inline-block; 585 | font-family: Arial, Helvetica, sans-serif; 586 | font-weight: 400; 587 | position: relative; 588 | } 589 | .loader:after{ 590 | content: ''; 591 | height: 4px; 592 | width:0%; 593 | display: block; 594 | background: #FF3D00; 595 | animation: 5s lineGrow linear infinite; 596 | } 597 | 598 | @keyframes lineGrow {to{width: 100%;}} 599 | `, 600 | }, 601 | 602 | 603 | { 604 | id: "textFlowBrkbxb78im", 605 | content: 'Loading', 606 | html: `Loading`, 607 | css: `.loader{ 608 | display: inline-block; 609 | text-align: center; 610 | line-height: 86px; 611 | text-align: center; 612 | position: relative; 613 | padding: 0 48px; 614 | font-size: 48px; 615 | font-family: Arial, Helvetica, sans-serif; 616 | color: #fff; 617 | } 618 | .loader:before, .loader:after { 619 | content: ""; 620 | display: block; 621 | width: 15px; 622 | height: 15px; 623 | background: currentColor; 624 | position: absolute; 625 | animation: load .7s infinite alternate ease-in-out; 626 | top: 0; 627 | } 628 | .loader:after { 629 | top: auto; 630 | bottom: 0; 631 | } 632 | @keyframes load { 633 | 0% { 634 | left: 0; 635 | height: 43px; 636 | width: 15px; 637 | transform: translateX(0) 638 | } 639 | 50% { 640 | height: 10px; 641 | width: 40px 642 | } 643 | 100% { 644 | left: 100%; 645 | height: 43px; 646 | width: 15px; 647 | transform: translateX(-100%) 648 | } 649 | } 650 | `, 651 | }, 652 | 653 | { 654 | id: "text-ub-prog-im", 655 | html: ``, 656 | css: `.loader{ 657 | font-size: 48px; 658 | color: #FFF; 659 | display: inline-block; 660 | font-family: Arial, Helvetica, sans-serif; 661 | font-weight: 400; 662 | position: relative; 663 | } 664 | .loader:after{ 665 | content: 'Loading'; 666 | position: relative; 667 | z-index: 5; 668 | } 669 | .loader:before{ 670 | content: ''; 671 | height: 6px; 672 | border: 1px solid; 673 | border-radius: 10px; 674 | width: 100%; 675 | position: absolute; 676 | bottom: 0px; 677 | background: linear-gradient(#FF3D00 100%, transparent 0) no-repeat; 678 | background-size: 0% auto; 679 | animation: 10s lineGrow linear infinite; 680 | } 681 | 682 | @keyframes lineGrow {to { background-size: 100% auto}} 683 | `, 684 | }, 685 | 686 | { 687 | id: "text-typ-an", 688 | html: ``, 689 | css: `.loader{ 690 | font-size: 48px; 691 | color: #FFF; 692 | display: inline-block; 693 | font-family: Arial, Helvetica, sans-serif; 694 | font-weight: 400; 695 | position: relative; 696 | } 697 | .loader:before{ 698 | content: ''; 699 | animation: 5s print linear alternate infinite; 700 | } 701 | .loader:after{ 702 | content: ''; 703 | position: absolute; 704 | right: -4px; 705 | top: 50%; 706 | transform: translatey(-45%); 707 | width: 2px; 708 | height: 1.3em; 709 | background: currentColor; 710 | opacity: 0.8; 711 | animation: 1s blink steps(2) infinite; 712 | } 713 | 714 | @keyframes blink { 715 | 0% { visibility: hidden;} 716 | 100% { visibility: visible;} 717 | } 718 | @keyframes print { 719 | 0% { content: 'L'} 720 | 10% { content: 'Lo'} 721 | 20% { content: 'Loa'} 722 | 30% { content: 'Load'} 723 | 40% { content: 'Loadi'} 724 | 50% { content: 'Loadin'} 725 | 60% { content: 'Loading'} 726 | 70% { content: 'Loading.'} 727 | 80% { content: 'Loading..'} 728 | 90% , 100% { content: 'Loading...'} 729 | } 730 | `, 731 | }, 732 | 733 | { 734 | id: "text-ball-spn-ar", 735 | html: ``, 736 | css: `.loader{ 737 | position: relative; 738 | font-size: 48px; 739 | letter-spacing: 2px; 740 | } 741 | .loader:before { 742 | content: "Loading"; 743 | color: #fff; 744 | } 745 | .loader:after { 746 | content: ""; 747 | width: 20px; 748 | height: 20px; 749 | background-color: #ff3d00; 750 | border-radius: 50%; 751 | position: absolute; 752 | inset: 0; 753 | margin: auto; 754 | top: -70px; 755 | animation: motion 3s ease-in-out infinite; 756 | } 757 | 758 | @keyframes motion { 759 | 0%, 50%, 100% { 760 | transform: translateX(0) scale(1); 761 | } 762 | 25% { 763 | transform: translateX(-100px) scale(0.3); 764 | } 765 | 75% { 766 | transform: translateX(100px) scale(0.3); 767 | } 768 | } 769 | `, 770 | }, 771 | { 772 | id: "text-balloon", 773 | html: ``, 774 | css: `.loader{ 775 | position: relative; 776 | font-size: 48px; 777 | letter-spacing: 6px; 778 | } 779 | .loader:before { 780 | content: "Loading"; 781 | color: #fff; 782 | } 783 | .loader:after { 784 | content: ""; 785 | width: 20px; 786 | height: 20px; 787 | background-color: #ff3d00; 788 | background-image: radial-gradient(circle 2px, #fff4 100%, transparent 0), 789 | radial-gradient(circle 1px, #fff3 100%, transparent 0); 790 | background-position: 14px -4px, 12px -1px; 791 | border-radius: 50%; 792 | position: absolute; 793 | margin: auto; 794 | top: -5px; 795 | right: 66px; 796 | transform-origin: center bottom; 797 | animation: fillBaloon 1s ease-in-out infinite alternate; 798 | } 799 | 800 | @keyframes fillBaloon { 801 | 0% { transform: scale(1)} 802 | 100% { transform: scale(3)} 803 | } 804 | `, 805 | }, 806 | { 807 | id: "text-smoky", 808 | html: ``, 809 | css: `.loader{ 810 | font-size: 48px; 811 | font-weight: bold; 812 | letter-spacing: 2px; 813 | font-family: Arial, Helvetica, sans-serif; 814 | color: #fff; 815 | animation: smokeOut 1s ease-in-out infinite alternate; 816 | text-shadow: 0 0 1px white; 817 | } 818 | .loader:before { 819 | content: "Loading"; 820 | } 821 | 822 | @keyframes smokeOut { 823 | 100% { 824 | opacity: 0.08; 825 | filter: blur(5px); 826 | letter-spacing: 4px; 827 | } 828 | } 829 | `, 830 | }, 831 | 832 | 833 | ] 834 | 835 | 836 | -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | //out: ../css/styles.css, compress: true, 2 | 3 | 4 | $base: #263038; 5 | $lite: #FFF; 6 | $brand: #FF3D00; //FF3D00 7 | $size: 48px; 8 | 9 | 10 | *, *:after, *:before { 11 | box-sizing: border-box; 12 | } 13 | ::-webkit-scrollbar { 14 | width: 10px; 15 | height: 10px; 16 | } 17 | ::-webkit-scrollbar:hover { 18 | width: 18px; 19 | background: #0004; 20 | } 21 | ::-webkit-scrollbar-track:hover { 22 | background: #0001; 23 | } 24 | 25 | /* Track */ 26 | ::-webkit-scrollbar-track { 27 | background: $base; 28 | } 29 | 30 | /* Handle */ 31 | ::-webkit-scrollbar-thumb { 32 | background: $brand; 33 | } 34 | 35 | /* Handle on hover */ 36 | ::-webkit-scrollbar-thumb:hover { 37 | background: #fff; 38 | } 39 | body { 40 | margin: 0; 41 | background: $base; 42 | font-family: Arial, Helvetica, sans-serif; 43 | > img { 44 | display: none; 45 | } 46 | &.pop { 47 | overflow: hidden; 48 | } 49 | } 50 | 51 | 52 | header { 53 | background : #0d161b; 54 | padding:10px 20px; 55 | min-height: 50px; 56 | width: 100%; 57 | display: flex; 58 | align-items: center; 59 | justify-content: space-between; 60 | position: sticky; 61 | top: 0px; 62 | z-index: 10; 63 | nav { 64 | display: flex; 65 | align-items: center; 66 | justify-content: center; 67 | 68 | .nav-btn { 69 | display: inline-block; 70 | width: 32px; 71 | height: 32px; 72 | background-color: #fff; 73 | background-repeat: no-repeat; 74 | background-size: 110% auto; 75 | background-position: center; 76 | border-radius: 50%; 77 | &.git { 78 | background-image: url('../images/git.png'); 79 | } 80 | &.codepen { 81 | background-image: url('../images/codepen.png'); 82 | } 83 | 84 | & + .nav-btn { 85 | margin-left: 10px; 86 | } 87 | } 88 | } 89 | } 90 | 91 | .brand { 92 | color: #fff; 93 | font-size: 32px; 94 | display: inline-block; 95 | position: relative; 96 | &::after{ 97 | content: ''; 98 | position: absolute; 99 | left: 20px; 100 | bottom: 7px; 101 | border: 3px solid $lite; 102 | border-bottom-color: $brand; 103 | width: 20px; 104 | height: 20px; 105 | border-radius: 50%; 106 | animation: brandRotation 0.6s linear infinite; 107 | } 108 | } 109 | 110 | @keyframes brandRotation{ 111 | 0% { transform: rotate(0deg)} 112 | 100% { transform: rotate(360deg)} 113 | } 114 | 115 | 116 | #main { 117 | min-height: 100vh; 118 | width: 100%; 119 | display: flex; 120 | align-items: center; 121 | flex-wrap: wrap; 122 | justify-content: space-between; 123 | .section { 124 | min-width: 200px; 125 | width: 33.33%; 126 | height: 360px; 127 | padding: 10px; 128 | position: relative; 129 | display: flex; 130 | align-items: center; 131 | justify-content: center; 132 | color: #ccc; 133 | cursor: pointer; 134 | transition: 0.2s linear; 135 | &:nth-child(2n + 1){ 136 | background: rgba(#000,0.1); 137 | } 138 | &:hover { 139 | background: rgba(#000,0.3) ; 140 | } 141 | 142 | @media (max-width: 768px ) { 143 | width: 50%; 144 | } 145 | @media (max-width: 480px) { 146 | width: 100%; 147 | } 148 | 149 | } 150 | } 151 | 152 | 153 | 154 | footer { 155 | background : #0d161b; 156 | padding:15px; 157 | text-align: center; 158 | color: #ccc; 159 | width: 100%; 160 | font-size: 12px; 161 | a { 162 | font-size: 16px; 163 | color: #fff; 164 | transition: 0.2s ease; 165 | text-decoration: none; 166 | display: inline-block; 167 | position: relative; 168 | &:hover , &:active { 169 | color: #fff; 170 | transform: scale(1.15); 171 | } 172 | } 173 | } 174 | 175 | .overlay { 176 | position: fixed; 177 | left: 0; 178 | top: 0; 179 | width: 100%; 180 | height: 100%; 181 | background: rgba(#000,0.7); 182 | z-index: 2000; 183 | visibility: hidden; 184 | opacity: 0; 185 | overflow-y: auto; 186 | &.in { 187 | visibility: visible; 188 | opacity: 1; 189 | } 190 | } 191 | .btn-close { 192 | position: absolute; 193 | top: 0px; 194 | right: 0px; 195 | z-index: 5; 196 | line-height: 20px; 197 | height: 20px; 198 | width: 20px; 199 | font-size: 26px; 200 | font-weight: 400; 201 | padding: 0; 202 | background: #eee; 203 | border: none; 204 | outline: none; 205 | cursor: pointer; 206 | } 207 | 208 | .popup { 209 | position: relative; 210 | transform: translateY(-20px); 211 | background: #fff; 212 | padding: 20px 15px; 213 | max-width: 600px; 214 | min-height: 400px; 215 | margin: 20px auto; 216 | width: 100%; 217 | transition: 0.2s ease-in; 218 | .in & { 219 | transform: translateY(10px); 220 | } 221 | 222 | } 223 | 224 | .showcase { 225 | background: $base; 226 | margin-bottom: 15px; 227 | .section { 228 | width: 100%; 229 | height: 300px; 230 | padding: 10px; 231 | position: relative; 232 | display: flex; 233 | align-items: center; 234 | justify-content: center; 235 | } 236 | } 237 | 238 | .code-area { 239 | .code-header{ 240 | padding: 5px 10px; 241 | background: #222; 242 | color: #fff; 243 | font-size: 14px; 244 | position: relative; 245 | } 246 | 247 | & + & { 248 | margin-top: 10px; 249 | } 250 | } 251 | .copy { 252 | outline: none; 253 | border: none; 254 | background: #000; 255 | position: absolute; 256 | right: 5px; 257 | top: 50%; 258 | transform: translateY(-50%); 259 | color: #fff; 260 | padding: 3px 8px; 261 | cursor: pointer; 262 | user-select: none; 263 | &::before { 264 | content: ''; 265 | display: inline-block; 266 | width: 10px; 267 | height: 12px; 268 | border: 1px solid #fff; 269 | box-shadow: 2px -2px #000, 3px -3px; 270 | margin-right: 8px; 271 | position: relative; 272 | top: 3px; 273 | } 274 | } 275 | 276 | code { 277 | background: #000; 278 | padding: 5px 10px; 279 | display: block; 280 | white-space: pre; 281 | color: #03a9f4; 282 | min-height: 30px; 283 | font-size: 14px; 284 | line-height: 18px; 285 | } 286 | 287 | #markup{ 288 | color: #f4a003; 289 | } 290 | #css{ 291 | max-height: 200px; 292 | overflow: auto; 293 | } 294 | 295 | 296 | 297 | // overwrite 298 | div[data-id="prog-crak-erh"]{ 299 | justify-content: flex-start !important; 300 | } 301 | 302 | -------------------------------------------------------------------------------- /site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "images/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "images/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | --------------------------------------------------------------------------------