{"loaderData":{"0":null,"0-3":{"total":7311,"projects":[{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"689218","snapshot":null,"tags":null,"title":"loader by KSAplay","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":553,"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 align-items: center;\n justify-content: center;\n}\n\n.loader::before,\n.loader::after {\n position: absolute;\n content: \"\";\n height: 8em;\n width: 8em;\n border: 1em solid #0060fa;\n border-radius: 50%;\n animation: loader_79178 2s linear infinite;\n}\n\n.loader::after {\n opacity: 0;\n animation-delay: 1s;\n}\n\n@keyframes loader_79178 {\n 0% {\n border: 1em solid #0060fa;\n transform: scale(0);\n opacity: 1;\n }\n\n 100% {\n border: 0 solid #0060fa;\n transform: scale(1);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"05c20e","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":99,"cssLen":849,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":".loader {\n position: relative;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: linear-gradient(#ee280e, #15a0f7, #6ed15a);\n animation: animate7712 1.2s linear infinite;\n}\n\n@keyframes animate7712 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loader span {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: linear-gradient(#ee280e, #15a0f7, #5ad15a);\n}\n\n.loader:after {\n content: '';\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n bottom: 10px;\n background: #333;\n border: solid #333 10px;\n border-radius: 50%;\n}\n\n.loader span:nth-child(1) {\n filter: blur(5px);\n}\n\n.loader span:nth-child(2) {\n filter: blur(10px);\n}\n\n.loader span:nth-child(3) {\n filter: blur(25px);\n}\n\n.loader span:nth-child(4) {\n filter: blur(50px);\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"80f698","snapshot":null,"tags":null,"title":"loader by FWDJc","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":1075,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".eye-lid {\n background-color: rgb(0, 0, 0);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0 9px 0 2px rgba(0, 0, 0, 0.2);\n width: 150px;\n height: 150px;\n}\n\n.eye {\n background-color: #fffcf4;\n border-radius: 50%;\n transform: translate3d(0, 0, 0) rotate(90deg);\n width: 120px;\n height: 120px;\n animation: eye 5s infinite;\n}\n\n@keyframes eye {\n 12%,\n 25% {\n width: 100px;\n height: 110px;\n }\n\n 37%, \n 50% {\n width: 60px;\n height: 130px;\n }\n\n 63%, \n 75% {\n width: 100px;\n height: 103px;\n }\n\n 87% {\n width: 100px;\n height: 100px;\n }\n}\n\n.cornea {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(0, 0, 0);\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: eye-color 5s infinite;\n}\n\n@keyframes eye-color {\n 63%, 75% {\n background-color: rgb(137, 1, 1);\n }\n}\n\n.white-pupil {\n position: absolute;\n top: 70%;\n left: 10%;\n border-radius: 50%;\n background-color: #fffcf4;\n width: 20px;\n height: 20px;\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"c0553f","snapshot":null,"tags":null,"title":"loader by krlozCJ","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":267,"cssLen":724,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --size-loader: 50px;\n --size-orbe: 10px;\n width: var(--size-loader);\n height: var(--size-loader);\n position: relative;\n transform: rotate(45deg);\n}\n\n.orbe {\n position: absolute;\n width: 100%;\n height: 100%;\n --delay: calc(var(--index) * 0.1s);\n animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;\n opacity: calc(1 - calc(0.2 * var(--index)));\n}\n\n.orbe::after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: var(--size-orbe);\n height: var(--size-orbe);\n background-color: #3ae374;\n box-shadow: 0px 0px 20px 2px #3ae374;\n border-radius: 50%;\n}\n\n@keyframes orbit7456 {\n 0% {\n }\n\n 80% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"06f922","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":244,"cssLen":1683,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n width: 200px;\n max-height: 900px;\n transform-origin: 50% 50%;\n overflow: visible;\n}\n\n.ci1 {\n fill: var(--higru);\n animation: toBig 3s infinite -1.5s;\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n.ciw {\n transform-box: fill-box;\n transform-origin: 50% 50%;\n animation: breath 3s infinite;\n}\n\n.ci2 {\n fill: var(--higru);\n animation: toBig2 3s infinite;\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n.points {\n animation: rot 3s infinite;\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n@keyframes rot {\n 0% {\n transform: rotate(0deg);\n }\n\n 30% {\n transform: rotate(360deg);\n }\n\n 50% {\n transform: rotate(360deg);\n }\n\n 80% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes toBig {\n 0% {\n transform: scale(1) translateX(0px);\n }\n\n 30% {\n transform: scale(1) translateX(0px);\n }\n\n 50% {\n transform: scale(10) translateX(-4.5px);\n }\n\n 80% {\n transform: scale(10) translateX(-4.5px);\n }\n\n 100% {\n transform: scale(1) translateX(0px);\n }\n}\n\n@keyframes toBig2 {\n 0% {\n transform: scale(1) translateX(0px);\n }\n\n 30% {\n transform: scale(1) translateX(0px);\n }\n\n 50% {\n transform: scale(10) translateX(4.5px);\n }\n\n 80% {\n transform: scale(10) translateX(4.5px);\n }\n\n 100% {\n transform: scale(1) translateX(0px);\n }\n}\n\n@keyframes breath {\n 15% {\n transform: scale(1);\n }\n\n 40% {\n transform: scale(1.1);\n }\n\n 65% {\n transform: scale(1);\n }\n\n 90% {\n transform: scale(1.1);\n }\n}\n\n.dwf, .share {\n position: fixed;\n bottom: 4px;\n right: 10px;\n background-color: #0003;\n padding: 3px;\n border-radius: 3px;\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"79b71c","snapshot":null,"tags":null,"title":"loader by funkyjuice213","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":980,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.loader-bar {\n height: 25px;\n width: 6px;\n margin: 0 3px;\n border-radius: 20px;\n animation: loader 2s ease-in-out infinite;\n}\n\n.bar-1 {\n background: linear-gradient(to right, #00e6e6, #00ccff, #0099ff, #0066ff);\n animation-delay: 0s;\n box-shadow: 0px 0px 15px 3px #00e6e6;\n}\n\n.bar-2 {\n background: linear-gradient(to right, #00ccff, #0099ff, #0066ff, #00e6e6);\n animation-delay: 0.1s;\n box-shadow: 0px 0px 15px 3px #00ccff;\n}\n\n.bar-3 {\n background: linear-gradient(to right, #0099ff, #0066ff, #00e6e6, #00ccff);\n animation-delay: 0.2s;\n box-shadow: 0px 0px 15px 3px #0099ff;\n}\n\n.bar-4 {\n background: linear-gradient(to right, #0066ff, #00e6e6, #00ccff, #0099ff);\n animation-delay: 0.3s;\n box-shadow: 0px 0px 15px 3px #0066ff;\n}\n\n@keyframes loader {\n 0% {\n transform: scaleY(1);\n }\n\n 50% {\n transform: scaleY(2);\n }\n\n 100% {\n transform: scaleY(1);\n }\n}\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"c4a2ba","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":837,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n --book-color: #f1775b;\n --book-cover-color: #506c86;\n}\n.book {\n width: 150px;\n height: 13px;\n background-color: var(--book-color);\n border-bottom: 2px solid var(--book-cover-color);\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n position: relative;\n}\n.page {\n width: 50%;\n height: 2px;\n background-color: var(--book-color);\n animation: paging 0.7s ease-out infinite;\n transform-origin: left;\n}\n.page2 {\n width: 50%;\n height: 2px;\n background-color: var(--book-color);\n animation: paging 0.8s ease-out infinite;\n transform-origin: left;\n position: absolute;\n}\n@keyframes paging {\n 10% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(-180deg);\n }\n}\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"967a94","snapshot":null,"tags":null,"title":"loader by TechByElijah","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":694,"cssLen":3356,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".center {\n position: absolute;\n transform: translateX(-50%);\n left: 50%;\n}\n\n.container {\n height: 31.25em;\n width: 21.87em;\n margin-top: -325px;\n}\n\n.rope {\n height: 13.62em;\n width: 0.15em;\n background-color: #ffffff;\n animation: swing 2s infinite;\n}\n\n@keyframes swing {\n 50% {\n transform: translateY(-4em);\n }\n}\n\n.legs {\n height: 1.12em;\n width: 7.5em;\n background-color: transparent;\n box-shadow: 0 0 0 0.12em #140243, 0 0 0 1.06em #1b1676, 0 0 0 1.18em #140243;\n top: 12.5em;\n border-radius: 3.12em;\n}\n\n.boot-l,\n.boot-r {\n height: 1.25em;\n width: 2.5em;\n background-color: #e32832;\n position: absolute;\n border: 0.12em solid #140243;\n bottom: 1.12em;\n}\n\n.boot-l {\n left: 1em;\n}\n\n.boot-r {\n transform: rotateY(180deg);\n left: 3.81em;\n}\n\n.boot-l:before,\n.boot-r:before {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-bottom: 1.12em solid #140243;\n border-left: 1.18em solid transparent;\n bottom: 1.31em;\n left: 1.46em;\n}\n\n.boot-l:after,\n.boot-r:after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-bottom: 1.12em solid #e32832;\n border-left: 1em solid transparent;\n right: 0;\n top: -0.93em;\n}\n\n.costume {\n height: 6.25em;\n width: 5.62em;\n background: linear-gradient(\n to right,\n #1b1676 20%,\n #e32832 20%,\n #e32832 80%,\n #1b1676 80%\n );\n border: 0.12em solid #140243;\n top: 14.68em;\n}\n\n.spider {\n height: 1.87em;\n width: 0.93em;\n background-color: #140243;\n border-radius: 45%;\n position: absolute;\n transform: translate(-50%, -50%);\n top: calc(50% + 0.93em);\n left: 50%;\n}\n\n.s1,\n.s3 {\n height: 7.5em;\n width: 2.5em;\n border-radius: 0 0 1.37em 1.37em;\n border-bottom: 0.12em solid #140243;\n position: absolute;\n}\n\n.s2,\n.s4 {\n height: 7.5em;\n width: 3.12em;\n border-radius: 0 0 1.56em 1.56em;\n border-bottom: 0.12em solid #140243;\n position: absolute;\n}\n\n.s1,\n.s2,\n.s3,\n.s4 {\n left: 50%;\n}\n\n.s1 {\n bottom: 1.43em;\n}\n\n.s2 {\n bottom: 0.93em;\n}\n\n.s3,\n.s4 {\n transform: translateX(-50%) rotateX(180deg);\n}\n\n.s3 {\n top: 1.43em;\n}\n\n.s4 {\n top: 0.93em;\n}\n\n.belt {\n height: 0.43em;\n width: 5.87em;\n background-color: #e32832;\n border: 0.12em solid #140243;\n top: -0.12em;\n}\n\n.hand-r,\n.hand-l {\n height: 8.12em;\n background: linear-gradient(\n #e32832 4.6em,\n #140243 4.6em,\n #140243 4.75em,\n #1b1676 4.75em,\n #1b1676 8.12em\n );\n width: 1.12em;\n border: 0.12em solid #140243;\n border-radius: 1.25em;\n position: absolute;\n transform-origin: bottom;\n bottom: -0.12em;\n}\n\n.hand-r {\n right: -0.75em;\n transform: rotate(-22deg);\n}\n\n.hand-l {\n left: -0.75em;\n transform: rotate(22deg);\n}\n\n.neck {\n height: 0.37em;\n width: 1.25em;\n background-color: #e32832;\n bottom: -0.62em;\n border: 0.12em solid #140243;\n}\n\n.mask {\n height: 4.65em;\n width: 4.06em;\n background-color: #e32832;\n border-radius: 50% 50% 50% 50% / 54% 54% 46% 46%;\n border: 0.12em solid #140243;\n top: 6.56em;\n}\n\n.eye-l,\n.eye-r {\n height: 0.68em;\n width: 1.37em;\n background-color: #ffffff;\n border-radius: 1.37em 1.37em 0 0;\n border: 0.12em solid #140243;\n position: absolute;\n top: 2.1em;\n}\n\n.eye-l {\n left: 0.3em;\n}\n\n.eye-r {\n right: 0.3em;\n}\n\n.cover {\n height: 3.12em;\n width: 0.15em;\n background-color: #ffffff;\n bottom: 8.12em;\n}\n\n@media screen and (min-width: 600px) {\n .container {\n font-size: 20px;\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"1ed50b","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":211,"cssLen":852,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n L\n O\n A\n D\n I\n N\n G\n

","css":".loader {\n -webkit-perspective: 700px;\n perspective: 700px;\n background: red;\n padding: 10px 20px;\n}\n\n.loader>span {\n font-size: 60px;\n font-family: \"franklin gothic medium\",sans-serif;\n display: inline-block;\n animation: flip 2.6s infinite linear;\n transform-origin: 0 70%;\n transform-style: preserve-3d;\n -webkit-transform-style: preserve-3d;\n}\n\n@keyframes flip {\n 35% {\n transform: rotatey(360deg);\n }\n\n 100% {\n transform: rotatey(360deg);\n }\n}\n\n.loader>span:nth-child(even) {\n color: white;\n}\n\n.loader>span:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.loader>span:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.loader>span:nth-child(4) {\n animation-delay: 0.9s;\n}\n\n.loader>span:nth-child(5) {\n animation-delay: 1.2s;\n}\n\n.loader>span:nth-child(6) {\n animation-delay: 1.5s\n}\n\n.loader>span:nth-child(7) {\n animation-delay: 1.8s\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"12959c","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":3001,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 200px;\n height: 200px;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n position: absolute;\n}\n\n.container div {\n width: 100px;\n height: 100px;\n top: 50px;\n left: 50px;\n display: block;\n position: absolute;\n}\n\n.top-left {\n animation: tl 7.5s ease infinite\n}\n\n.top-right {\n animation: tr 7.5s ease infinite\n}\n\n.bottom-left {\n animation: bl 7.5s ease infinite\n}\n\n.bottom-right {\n animation: br 7.5s ease infinite\n}\n\n.container div:before,\n.container div:after {\n display: block;\n position: absolute;\n content: \"\"\n}\n\n.container div:before {\n width: 50px;\n height: 50px\n}\n\n.top-left:before {\n background: rgb(251, 189, 4);\n top: 0;\n left: 0;\n border-radius: 100% 0 0 0\n}\n\n.top-right:before {\n background: rgb(234, 67, 52);\n top: 0;\n right: 0;\n border-radius: 0 100% 0 0\n}\n\n.bottom-left:before {\n background: rgb(52, 168, 83);\n bottom: 0;\n left: 0;\n border-radius: 0 0 0 100%\n}\n\n.bottom-right:before {\n background: rgb(67, 135, 244);\n bottom: 0;\n right: 0;\n border-radius: 0 0 100% 0\n}\n\n.container div:after {\n background: rgb(33, 33, 33);\n width: 25px;\n height: 25px;\n z-index: 1\n}\n\n.top-left:after {\n top: 25px;\n left: 25px;\n border-radius: 100% 0 0 0\n}\n\n.top-right:after {\n top: 25px;\n right: 25px;\n border-radius: 0 100% 0 0\n}\n\n.bottom-left:after {\n bottom: 25px;\n left: 25px;\n border-radius: 0 0 0 100%\n}\n\n.bottom-right:after {\n bottom: 25px;\n right: 25px;\n border-radius: 0 0 100% 0\n}\n\n@keyframes tl {\n 0%,96%,100% {\n transform: rotate(0deg)\n }\n\n 12% {\n transform: rotate(-45deg)\n }\n\n 24% {\n transform: rotate(-90deg)\n }\n\n 36% {\n transform: rotate(-135deg)\n }\n\n 48% {\n left: 50px;\n transform: rotate(-180deg)\n }\n\n 60% {\n left: 125px;\n opacity: 1;\n transform: rotate(-135deg)\n }\n\n 61%,95% {\n opacity: 0\n }\n}\n\n@keyframes tr {\n 0% {\n transform: rotate(0deg)\n }\n\n 12% {\n transform: rotate(-45deg)\n }\n\n 24% {\n transform: rotate(-90deg)\n }\n\n 36% {\n transform: rotate(-135deg)\n }\n\n 48% {\n transform: rotate(-180deg)\n }\n\n 60% {\n transform: rotate(-225deg)\n }\n\n 72% {\n transform: rotate(-270deg)\n }\n\n 84% {\n transform: rotate(-315deg)\n }\n\n 96%,100% {\n transform: rotate(-360deg)\n }\n}\n\n@keyframes bl {\n 0%,100% {\n transform: rotate(0deg)\n }\n\n 12% {\n transform: rotate(-45deg)\n }\n\n 24% {\n left: 50px;\n transform: rotate(-90deg)\n }\n\n 36% {\n left: 125px;\n opacity: 1;\n transform: rotate(-45deg)\n }\n\n 37%,83% {\n opacity: 0\n }\n\n 84% {\n left: -25px;\n opacity: 1;\n transform: rotate(-45deg)\n }\n\n 96% {\n left: 50px;\n transform: rotate(0deg)\n }\n}\n\n@keyframes br {\n 0%,96%,100% {\n transform: rotate(0deg)\n }\n\n 12% {\n left: 125px;\n opacity: 1;\n transform: rotate(45deg)\n }\n\n 13%,59% {\n opacity: 0\n }\n\n 60% {\n left: -25px;\n opacity: 1;\n transform: rotate(45deg)\n }\n\n 72% {\n left: 50px;\n transform: rotate(90deg)\n }\n\n 84% {\n transform: rotate(45deg)\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"34fa88","snapshot":null,"tags":null,"title":"loader by alexmaracinaru","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":250,"cssLen":1461,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n

\n","css":".pyramid-loader {\n position: relative;\n width: 300px;\n height: 150px;\n display: block;\n transform-style: preserve-3d;\n transform: rotateX(-20deg);\n}\n\n.wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: spin 4s linear infinite;\n}\n\n@keyframes spin {\n 100% {\n transform: rotateY(360deg);\n }\n}\n\n.pyramid-loader .wrapper .side {\n width: 70px;\n height: 70px;\n background: linear-gradient(to bottom right, #FFA500, #FF4500);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n transform-origin: center top;\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n}\n\n.pyramid-loader .wrapper .side1 {\n transform: rotateZ(-30deg) rotateY(90deg);\n background: linear-gradient(to bottom right, #FF4500, #FFA500);\n}\n\n.pyramid-loader .wrapper .side2 {\n transform: rotateZ(30deg) rotateY(90deg);\n background: linear-gradient(to bottom right, #FFA500, #FF4500);\n}\n\n.pyramid-loader .wrapper .side3 {\n transform: rotateX(30deg);\n background: linear-gradient(to bottom right, #FFA500, #FF4500);\n}\n\n.pyramid-loader .wrapper .side4 {\n transform: rotateX(-30deg);\n background: linear-gradient(to bottom right, #FF4500, #FFA500);\n}\n\n.pyramid-loader .wrapper .shadow {\n width: 60px;\n height: 60px;\n background: #FF8C00;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n transform: rotateX(90deg) translateZ(-40px);\n filter: blur(12px);\n}"},{"created":"2024-01-22T16:54:42.000Z","isPrivate":0,"projectId":"9c560f","snapshot":null,"tags":null,"title":"loader by edwardytb","updated":"2024-01-22T16:54:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":916,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n\n","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.box {\n width: 50px;\n height: 50px;\n border: 4px solid #3498db;\n animation: box-expand 1s ease-in-out infinite alternate;\n}\n\n.circle {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n border: 4px solid transparent;\n border-top-color: #f1c40f;\n animation: circle-rotate 1s linear infinite;\n}\n\n.triangle {\n width: 0;\n height: 0;\n border-left: 15px solid transparent;\n border-right: 15px solid transparent;\n border-bottom: 30px solid #e74c3c;\n animation: triangle-expand 1s ease-in-out infinite alternate;\n}\n\n@keyframes box-expand {\n 0% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1.2);\n }\n}\n\n@keyframes circle-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes triangle-expand {\n 0% {\n width: 0;\n height: 0;\n }\n\n 100% {\n width: 30px;\n height: 60px;\n }\n}\n"}]}},"actionData":null,"errors":null}