Layer 1

{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"c01bda","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":231,"cssLen":1686,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* The loader container */\n.loader {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 200px;\n height: 200px;\n margin-top: -100px;\n margin-left: -100px;\n perspective: 1000px;\n transform-type: preserve-3d;\n}\n\n\n/* The cube */\n.cube {\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 50%;\n transform-style: preserve-3d;\n transform: translateZ(-50px);\n animation: cube 4s cubic-bezier(.18,.56,.64,1) infinite;\n}\n\n@keyframes cube {\n 0% {\n top: 0%;\n left: 0%;\n transform: translateZ(-50px);\n }\n\n 25% {\n top: 50%;\n left: 50%;\n transform: translateZ(-50px) rotateX(-90deg) rotateZ(90deg);\n }\n\n 50% {\n top: 0%;\n left: 50%;\n transform: translateZ(-50px) rotateX(0deg) rotateZ(180deg);\n }\n\n 75% {\n top: 50%;\n left: 0%;\n transform: translateZ(-50px) rotateX(-90deg) rotateZ(-90deg);\n }\n}\n\n\n/* The side */\n.side {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n backface-visibility: hidden;\n}\n\n/* back */\n.side:nth-child(1) {\n transform: rotateX(-180deg) translateZ(50px);\n background-color: #1e3f57;\n}\n\n/* left side */\n.side:nth-child(2) {\n transform: rotateY(-90deg) translateZ(50px);\n background-color: #6bb2cd;\n}\n\n/* right side */\n.side:nth-child(3) {\n transform: rotateY(90deg) translateZ(50px);\n background-color: #6bb2cd;\n}\n\n/* top side */\n.side:nth-child(4) {\n transform: rotateX(90deg) translateZ(50px);\n background-color: #3c617d;\n}\n\n/* bottom side */\n.side:nth-child(5) {\n transform: rotateX(-90deg) translateZ(50px);\n background-color: #3c617d;\n}\n\n/* top */\n.side:nth-child(6) {\n transform: translateZ(50px);\n background-color: #1e3f57;\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"e1fd0c","snapshot":null,"tags":null,"title":"loader by SteveBloX","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":159,"cssLen":556,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 200px;\n}\n\n.ball {\n --size: 16px;\n width: var(--size);\n height: var(--size);\n border-radius: 11px;\n margin: 0 10px;\n\n animation: 2s bounce ease infinite;\n}\n\n.blue {\n background-color: #4285f5;\n}\n\n.red {\n background-color: #ea4436;\n animation-delay: 0.25s;\n}\n\n.yellow {\n background-color: #fbbd06;\n animation-delay: 0.5s;\n}\n\n.green {\n background-color: #34a952;\n animation-delay: 0.75s;\n}\n\n@keyframes bounce {\n 50% {\n transform: translateY(25px);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"5031b4","snapshot":null,"tags":null,"title":"loader by AHMED-MIT","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":209,"cssLen":1496,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n","css":".spinner {\n position: absolute;\n width: 9px;\n height: 9px;\n}\n\n.spinner div {\n position: absolute;\n width: 50%;\n height: 150%;\n background: #474bff;\n transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));\n animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;\n}\n\n.spinner div:nth-child(1) {\n --delay: 0.1;\n --rotation: 36;\n --translation: 150;\n}\n\n.spinner div:nth-child(2) {\n --delay: 0.2;\n --rotation: 72;\n --translation: 150;\n}\n\n.spinner div:nth-child(3) {\n --delay: 0.3;\n --rotation: 108;\n --translation: 150;\n}\n\n.spinner div:nth-child(4) {\n --delay: 0.4;\n --rotation: 144;\n --translation: 150;\n}\n\n.spinner div:nth-child(5) {\n --delay: 0.5;\n --rotation: 180;\n --translation: 150;\n}\n\n.spinner div:nth-child(6) {\n --delay: 0.6;\n --rotation: 216;\n --translation: 150;\n}\n\n.spinner div:nth-child(7) {\n --delay: 0.7;\n --rotation: 252;\n --translation: 150;\n}\n\n.spinner div:nth-child(8) {\n --delay: 0.8;\n --rotation: 288;\n --translation: 150;\n}\n\n.spinner div:nth-child(9) {\n --delay: 0.9;\n --rotation: 324;\n --translation: 150;\n}\n\n.spinner div:nth-child(10) {\n --delay: 1;\n --rotation: 360;\n --translation: 150;\n}\n\n@keyframes spinner-fzua35 {\n 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {\n transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));\n }\n\n 50% {\n transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));\n }\n}\n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"b283bf","snapshot":null,"tags":null,"title":"loader by bociKond","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98,"cssLen":1190,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n position: relative;\n width: 24.6px;\n height: 24.6px;\n animation-name: rotateSpin;\n animation-duration: 2s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-direction: normal;\n --clr: #3E885B;\n}\n\n@keyframes rotateSpin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.spinner div {\n width: 100%;\n height: 100%;\n background-color: var(--clr);\n border-radius: 50%;\n animation: spinnerAni 1s infinite backwards;\n}\n\n.spinner div:nth-child(1) {\n animation-delay: 0.12s;\n background-color: var(--clr);\n opacity: .9;\n}\n\n.spinner div:nth-child(2) {\n animation-delay: 0.24s;\n background-color: var(--clr);\n opacity: .8;\n}\n\n.spinner div:nth-child(3) {\n animation-delay: 0.36s;\n background-color: var(--clr);\n opacity: .7;\n}\n\n.spinner div:nth-child(4) {\n animation-delay: 0.48s;\n background-color: var(--clr);\n opacity: .6;\n}\n\n.spinner div:nth-child(5) {\n animation-delay: 0.60s;\n background-color: var(--clr);\n opacity: .5;\n}\n\n@keyframes spinnerAni {\n 0% {\n transform: rotate(0deg) translateY(-200%);\n }\n\n 60%, 100% {\n transform: rotate(360deg) translateY(-200%);\n }\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"4118b2","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":413,"cssLen":2077,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\nL\no\na\nd\ni\nn\ng\n.\n.\n

","css":".loading {\n transform: translate(0%, -50%);\n}\n\n.l {\n color: black;\n opacity: 0;\n animation: op 2s ease-in-out infinite;\n animation-delay: 0.2s;\n}\n\n.o {\n color: black;\n opacity: 0;\n animation: op 2s ease-in-out infinite;\n animation-delay: 0.4s;\n}\n\n.a {\n color: black;\n opacity: 0;\n animation: op 2s ease-in-out infinite;\n animation-delay: 0.6s;\n}\n\n.d {\n color: black;\n opacity: 0;\n animation: op 2s ease-in-out infinite;\n animation-delay: 0.8s;\n}\n\n.i {\n color: black;\n opacity: 0;\n animation: op 2s ease-in-out infinite;\n animation-delay: 1s;\n}\n\n.n {\n color: black;\n opacity: 0;\n animation: op 2s ease-in-out infinite;\n animation-delay: 1.2s;\n}\n\n.g {\n color: black;\n opacity: 0;\n animation: op 2s ease-in-out infinite;\n animation-delay: 1.4s;\n}\n\n.d1 {\n color: black;\n opacity: 0;\n animation: op1 2s ease-in-out infinite;\n animation-delay: 1.6s;\n}\n\n.d2 {\n color: black;\n opacity: 0;\n animation: op1 2s ease-in-out infinite;\n animation-delay: 2s;\n}\n\n.load {\n position: relative;\n width: 1.2em;\n height: 1.2em;\n border-radius: 50%;\n}\n\n.progress {\n top: 50%;\n left: -80%;\n position: absolute;\n margin-top: 2.2em;\n transform: translate(10%, -50%);\n content: '';\n width: 3.1em;\n height: 3.1em;\n background: transparent;\n border-radius: 50%;\n animation: load_37100 2s ease-in-out infinite;\n animation-delay: 1s;\n}\n\n@keyframes load_37100 {\n 0% {\n background-color: #DB4437;\n }\n\n 25% {\n background-color: #F4B400;\n }\n\n 75% {\n background-color: #0F9D58;\n }\n\n 100% {\n background-color: #4285F4;\n }\n}\n\n.progress:nth-child(2) {\n left: 50%;\n animation-delay: 1.3s;\n}\n\n.progress:nth-child(3) {\n left: 180%;\n animation-delay: 1.7s;\n}\n\n.progress:nth-child(4) {\n left: 300%;\n animation-delay: 2s;\n}\n\n@keyframes op {\n 0% {\n color: black;\n opacity: 1;\n }\n\n 50% {\n color: green;\n opacity: 1;\n }\n\n 100% {\n color: black;\n opacity: 1;\n }\n}\n\n@keyframes op1 {\n 0% {\n color: black;\n opacity: 1;\n }\n\n 50% {\n color: green;\n opacity: 0;\n }\n\n 100% {\n color: black;\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"df08a4","snapshot":null,"tags":null,"title":"loader by arshshaikh06","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1154,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n position: relative;\n width: 160px;\n height: 160px;\n border: 4px solid #282828;\n overflow: hidden;\n border-radius: 50%;\n box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),\n 10px 10px 10px rgba(0, 0, 0, 0.4),\n inset -5px -5px 5px rgba(255, 255, 255, 0.2),\n inset 10px 10px 10px rgba(0, 0, 0, 0.4);\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n top: 25px;\n left: 25px;\n right: 25px;\n bottom: 25px;\n z-index: 10;\n background: #212121;\n border-radius: 50%;\n border: 2px solid #292929;\n box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2),\n inset 3px 3px 5px rgba(0, 0, 0, 0.5);\n}\n\n.loader span {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-image: linear-gradient(\n -225deg,\n #ff7402 0%,\n #ffe700 50%,\n #fff55e 100%\n );\n filter: blur(20px);\n z-index: -1;\n animation: animate 0.5s linear infinite, hue 3s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes hue {\n 0% {\n filter: hue-rotate(0deg);\n }\n\n 100% {\n filter: hue-rotate(360deg);\n }\n}\n\n \n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"c96e16","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n margin: auto;\n width: 100px;\n height: 30px;\n overflow: hidden;\n position: relative;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 5px;\n box-shadow: 0px 35px 0 -5px #aaa, 0 -5px 0 0px #ddd, 0 -25px 0 -5px #fff,\n -25px -30px 0 0px #ddd, -25px 30px 0 0px #ddd, 25px -30px 0 0px #ddd,\n 25px 30px 0 0px #ddd, 20px 10px 0 5px #ddd, 20px -10px 0 5px #ddd,\n -20px -10px 0 5px #ddd, -20px 10px 0 5px #ddd;\n}\n\n.loader:after,\n.loader:before {\n content: \"\";\n border-radius: 100%;\n width: 35px;\n height: 35px;\n display: block;\n position: absolute;\n border: 4px dashed #fff;\n bottom: -4px;\n transform: rotate(0deg);\n box-sizing: border-box;\n animation: tape 4s linear infinite;\n}\n\n.loader:before {\n right: 0;\n box-shadow: 0 0 0 4px #fff, 0 0 0 34px #000;\n}\n\n.loader:after {\n left: 0;\n box-shadow: 0 0 0 4px #fff, 0 0 0 65px #000;\n}\n\n@keyframes tape {\n 0% {\n transform: rotate(0deg) scale(0.4);\n }\n\n 100% {\n transform: rotate(-360deg) scale(0.4);\n }\n}\n "},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"202550","snapshot":null,"tags":null,"title":"loader by Userluckytian","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":377,"cssLen":643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n stroke: #ff4d5033;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #00ffff;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 2s linear infinite;\n animation-delay: 0s;\n}\n\n.loading svg polyline#front2 {\n fill: none;\n stroke: #00ffff;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 2s linear infinite;\n animation-delay: 1s;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"6f1c59","snapshot":null,"tags":null,"title":"loader by Lanicet","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":53,"cssLen":710,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"#myProgress {\n width: 100px;\n max-width: 200px;\n background: #F4F4F4;\n box-shadow: inset -1px 1px 2px rgba(200, 200, 200, 0.2), inset 1px -1px 2px rgba(200, 200, 200, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.9), inset 1px 1px 3px rgba(200, 200, 200, 0.9);\n border-radius: 28px;\n overflow: hidden;\n}\n\n#myBar {\n width: 10%;\n height: 30px;\n background: rgba(0, 209, 0, 0.35);\n border-radius: 28px;\n text-align: center;\n line-height: 30px;\n color: white;\n transition: 0.5s;\n animation: loading82341 10s ease infinite;\n}\n\n@keyframes loading82341 {\n 0% {\n width: 0%;\n }\n\n 10% {\n width: 10%;\n }\n\n 50% {\n width: 40%;\n }\n\n 60% {\n width: 60%;\n }\n\n 100% {\n width: 100%;\n }\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"a1d876","snapshot":null,"tags":null,"title":"loader by eslam-hany","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":275,"cssLen":426,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n stroke: gray;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: red;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 1.4s linear infinite;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"0da9f1","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3237,"cssLen":7628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n MacBook Air\n

\n Layer 1\n

\n","css":".macbook {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -85px 0 0 -78px;\n perspective: 500px;\n}\n\n.shadow {\n position: absolute;\n width: 60px;\n height: 0px;\n left: 40px;\n top: 160px;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n animation: shadow infinite 7s ease;\n}\n\n.inner {\n z-index: 20;\n position: absolute;\n width: 150px;\n height: 96px;\n left: 0;\n top: 0;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n animation: rotate infinite 7s ease;\n}\n\n.screen {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #ddd;\n transform-style: preserve-3d;\n transform-origin: 50% 93px;\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n animation: lid-screen infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);\n background-position: left bottom;\n background-size: 300px 300px;\n box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);\n}\n\n.screen .logo {\n position: absolute;\n width: 20px;\n height: 24px;\n left: 50%;\n top: 50%;\n margin: -12px 0 0 -10px;\n transform: rotateY(180deg) translateZ(0.1px);\n}\n\n.screen .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #d3d3d3;\n transform: translateZ(2px);\n background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.screen .face-one .camera {\n width: 3px;\n height: 3px;\n border-radius: 100%;\n background: #000;\n position: absolute;\n left: 50%;\n top: 4px;\n margin-left: -1.5px;\n}\n\n.screen .face-one .display {\n width: 130px;\n height: 74px;\n margin: 10px;\n background-color: #000;\n background-size: 100% 100%;\n border-radius: 1px;\n position: relative;\n box-shadow: inset 0 0 2px rgba(0,0,0,1);\n}\n\n.screen .face-one .display .shade {\n position: absolute;\n left: 0;\n top: 0;\n width: 130px;\n height: 74px;\n background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);\n animation: screen-shade infinite 7s ease;\n background-size: 300px 200px;\n background-position: 0px 0px;\n}\n\n.screen .face-one span {\n position: absolute;\n top: 85px;\n left: 57px;\n font-size: 6px;\n color: #666\n}\n\n.macbody {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #cbcbcb;\n transform-style: preserve-3d;\n transform-origin: 50% bottom;\n transform: rotateX(-90deg);\n animation: lid-macbody infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n transform-style: preserve-3d;\n background: #dfdfdf;\n animation: lid-keyboard-area infinite 7s ease;\n transform: translateZ(-2px);\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .touchpad {\n width: 40px;\n height: 31px;\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 4px;\n margin: -44px 0 0 -18px;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #888;\n}\n\n.macbody .keyboard {\n width: 130px;\n height: 45px;\n position: absolute;\n left: 7px;\n top: 41px;\n border-radius: 4px;\n transform-style: preserve-3d;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #777;\n padding: 0 0 0 2px;\n}\n\n.keyboard .key {\n width: 6px;\n height: 6px;\n background: #444;\n float: left;\n margin: 1px;\n transform: translateZ(-2px);\n border-radius: 2px;\n box-shadow: 0 -2px 0 #222;\n animation: keys infinite 7s ease;\n}\n\n.key.space {\n width: 45px;\n}\n\n.key.f {\n height: 3px;\n}\n\n.macbody .pad {\n width: 5px;\n height: 5px;\n background: #333;\n border-radius: 100%;\n position: absolute;\n}\n\n.pad.one {\n left: 20px;\n top: 20px;\n}\n\n.pad.two {\n right: 20px;\n top: 20px;\n}\n\n.pad.three {\n right: 20px;\n bottom: 20px;\n}\n\n.pad.four {\n left: 20px;\n bottom: 20px;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n }\n\n 5% {\n transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);\n }\n\n 25% {\n transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);\n }\n\n 60% {\n transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);\n }\n\n 65% {\n transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);\n }\n\n 80% {\n transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);\n }\n\n 85% {\n transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);\n }\n\n 87% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n\n 100% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n}\n\n@keyframes lid-screen {\n 0% {\n transform: rotateX(0deg);\n background-position: left bottom;\n }\n\n 5% {\n transform: rotateX(50deg);\n background-position: left bottom;\n }\n\n 20% {\n transform: rotateX(-90deg);\n background-position: -150px top;\n }\n\n 25% {\n transform: rotateX(15deg);\n background-position: left bottom;\n }\n\n 30% {\n transform: rotateX(-5deg);\n background-position: right top;\n }\n\n 38% {\n transform: rotateX(5deg);\n background-position: right top;\n }\n\n 48% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 90% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 100% {\n transform: rotateX(0deg);\n background-position: right center;\n }\n}\n\n@keyframes lid-macbody {\n 0% {\n transform: rotateX(-90deg);\n }\n\n 50% {\n transform: rotateX(-90deg);\n }\n\n 100% {\n transform: rotateX(-90deg);\n }\n}\n\n@keyframes lid-keyboard-area {\n 0% {\n background-color: #dfdfdf;\n }\n\n 50% {\n background-color: #bbb;\n }\n\n 100% {\n background-color: #dfdfdf;\n }\n}\n\n@keyframes screen-shade {\n 0% {\n background-position: -20px 0px;\n }\n\n 5% {\n background-position: -40px 0px;\n }\n\n 20% {\n background-position: 200px 0;\n }\n\n 50% {\n background-position: -200px 0;\n }\n\n 80% {\n background-position: 0px 0px;\n }\n\n 85% {\n background-position: -30px 0;\n }\n\n 90% {\n background-position: -20px 0;\n }\n\n 100% {\n background-position: -20px 0px;\n }\n}\n\n@keyframes keys {\n 0% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 5% {\n box-shadow: 1 -1px 0 #222;\n }\n\n 20% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 25% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 60% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 80% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 85% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 87% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 100% {\n box-shadow: 0 -2px 0 #222;\n }\n}\n\n@keyframes shadow {\n 0% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 5% {\n transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);\n box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);\n }\n\n 25% {\n transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);\n box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);\n }\n\n 60% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 100% {\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n}\n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"f4ca85","snapshot":null,"tags":null,"title":"loader by EddyBel","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":212,"cssLen":994,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: relative;\n display: flex;\n gap: 0.3em;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 2em;\n filter: blur(45px);\n background-color: #e299ff;\n background-image: radial-gradient(at 52% 57%, hsla(11,83%,72%,1) 0px, transparent 50%),\n radial-gradient(at 37% 57%, hsla(175,78%,66%,1) 0px, transparent 50%);\n}\n\n.loader__circle {\n --size__loader: 0.6em;\n width: var(--size__loader);\n height: var(--size__loader);\n border-radius: 50%;\n animation: loader__circle__jumping 2s infinite;\n background-color: #b499ff;\n}\n\n.loader__circle:nth-child(2n) {\n animation-delay: 300ms;\n background-color: #e499ff;\n}\n\n.loader__circle:nth-child(3n) {\n animation-delay: 600ms;\n}\n\n@keyframes loader__circle__jumping {\n 0%, 100% {\n transform: translateY(0px);\n }\n\n 25% {\n transform: translateY(-15px) scale(0.5);\n }\n\n 50% {\n transform: translateY(0px);\n }\n\n 75% {\n transform: translateY(5px) scale(0.9);\n }\n}"}]}},"actionData":null,"errors":null}