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

\n","css":".loading {\n width: 100px;\n height: 100px;\n perspective: 1000px;\n margin: 50px auto;\n}\n\n.cube {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n animation: rotate 2s infinite linear;\n}\n\n.side {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid rgb(255, 255, 255);\n}\n\n.front {\n background: linear-gradient(45deg, #f00, #0ff);\n transform: translateZ(50px);\n}\n\n.back {\n background: linear-gradient(45deg, #0ff, #f00);\n transform: translateZ(-50px) rotateY(180deg);\n}\n\n.top {\n background: linear-gradient(45deg, #f0f, #ff0);\n transform: rotateX(90deg) translateZ(50px);\n}\n\n.bottom {\n background: linear-gradient(45deg, #ff0, #f0f);\n transform: rotateX(-90deg) translateZ(50px);\n}\n\n.left {\n background: linear-gradient(45deg, #0f0, #00f);\n transform: rotateY(-90deg) translateZ(50px);\n}\n\n.right {\n background: linear-gradient(45deg, #00f, #0f0);\n transform: rotateY(90deg) translateZ(50px);\n}\n\n@keyframes rotate {\n from {\n transform: rotateY(0deg) rotateX(0deg);\n }\n\n to {\n transform: rotateY(360deg) rotateX(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"a6a794","snapshot":null,"tags":null,"title":"loader by Lmickk2","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":123,"cssLen":533,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n transition: all 0.4s;\n}\n\n.loader div {\n margin-left: 0.8rem;\n background-color: rgb(34, 34, 34);\n box-shadow: inset 2px 2px 10px black;\n border-radius: 100%;\n height: 1rem;\n width: 1rem;\n}\n\n.box-load1 {\n animation: brighten 1.2s infinite;\n}\n\n.box-load2 {\n animation: brighten 1.2s infinite;\n animation-delay: .2s;\n}\n\n.box-load3 {\n animation: brighten 1.2s infinite;\n animation-delay: .4s;\n}\n\n@keyframes brighten {\n 100% {\n background-color: rgb(165, 165, 165);\n box-shadow: none;\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"907b6a","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":539,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 44.8px;\n height: 44.8px;\n position: relative;\n transform: rotate(45deg);\n}\n\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50% 50% 0 50%;\n background: #0000;\n background-image: radial-gradient(circle 11.2px at 50% 50%,#0000 94%, #ff4747);\n}\n\n.loader:after {\n animation: pulse-ytk0dhmd 1s infinite;\n transform: perspective(336px) translateZ(0px);\n}\n\n@keyframes pulse-ytk0dhmd {\n to {\n transform: perspective(336px) translateZ(168px);\n opacity: 0;\n }\n}\n \n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"cb62ee","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":552,"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: 60px;\n height: 60px;\n border-radius: 50%;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n position: absolute;\n border-radius: inherit;\n}\n\n.spinner::before {\n width: 100%;\n height: 100%;\n background-image: linear-gradient(0deg, #ff00cc 0%, #212121 50%);\n animation: spin .5s infinite linear;\n}\n\n.spinner::after {\n width: 85%;\n height: 85%;\n background-color: #212121;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"b7cd4a","snapshot":null,"tags":null,"title":"loader by zeynabashouri","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 45px;\n height: 40px;\n background: linear-gradient(\n #0000 calc(1 * 100% / 6),\n #fff 0 calc(3 * 100% / 6),\n #0000 0\n ),\n linear-gradient(\n #0000 calc(2 * 100% / 6),\n #fff 0 calc(4 * 100% / 6),\n #0000 0\n ),\n linear-gradient(\n #0000 calc(3 * 100% / 6),\n #fff 0 calc(5 * 100% / 6),\n #0000 0\n );\n background-size: 10px 400%;\n background-repeat: no-repeat;\n animation: matrix 1s infinite linear;\n}\n\n@keyframes matrix {\n 0% {\n background-position: 0% 100%, 50% 100%, 100% 100%;\n }\n\n 100% {\n background-position: 0% 0%, 50% 0%, 100% 0%;\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"c85001","snapshot":null,"tags":null,"title":"loader by gagan-gv","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":293,"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 span {\n font-size: 22px;\n font-family: 'Courier New', Courier, monospace;\n font-weight: 600;\n animation: blur 3s linear infinite;\n line-height: 20px;\n transition: all 0.5s;\n letter-spacing: 0.2em;\n}\n\n@keyframes blur {\n 0%, 90% {\n filter: blur(0);\n }\n\n 50% {\n filter: blur(10px);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"0a74e0","snapshot":null,"tags":null,"title":"loader by FWDJc","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1332,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 150px;\n height: 40px;\n border-radius: 50%;\n position: relative;\n animation: bounce 5s infinite;\n}\n\n.loader::before {\n content: 'DVD';\n position: absolute;\n display: block;\n left: 5%;\n bottom: 55%;\n color: green;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 4em;\n font-weight: 900;\n font-style: italic;\n animation: div-color-change 5s infinite;\n}\n\n.loader::after {\n content: 'FWDJC';\n position: absolute;\n top: 30%;\n left: 21%;\n color: #212121;\n font-size: .5em;\n font-weight: 800;\n letter-spacing: 10px;\n z-index: 1;\n}\n\n@keyframes bounce {\n 0% {\n background-color: red;\n transform: translateX(0) translateY(60px);\n }\n\n 25% {\n background-color: blue;\n transform: translateX(60px) translateY(0);\n }\n\n 55% {\n background-color: green;\n transform: translateX(0) translateY(-60px);\n }\n\n 75% {\n background-color: yellow;\n transform: translateX(-60px) translateY(0);\n }\n\n 100% {\n background-color: purple;\n transform: translateX(0) translateY(60px);\n }\n}\n\n@keyframes div-color-change {\n 0% {\n color: red;\n }\n\n 25% {\n color: blue;\n }\n\n 55% {\n color: green;\n }\n\n 75% {\n color: yellow;\n }\n\n 100% {\n color: purple;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"0fc258","snapshot":null,"tags":null,"title":"loader by YarikZhukovDesigner","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":1026,"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":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n height: 96px;\n width: 96px;\n animation: rotate_3922 1.2s linear infinite;\n background-color: #CB0000;\n background-image: linear-gradient(#CB0000, #FFC700, #c79c00);\n}\n\n.container span {\n position: absolute;\n border-radius: 50%;\n height: 100%;\n width: 100%;\n background-color: #cb0000;\n background-image: linear-gradient(#ff0000, #ffc800, #ffc800);\n}\n\n.container span:nth-of-type(1) {\n filter: blur(5px);\n}\n\n.container span:nth-of-type(2) {\n filter: blur(10px);\n}\n\n.container span:nth-of-type(3) {\n filter: blur(25px);\n}\n\n.container span:nth-of-type(4) {\n filter: blur(50px);\n}\n\n.container::after {\n content: \"\";\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n bottom: 10px;\n background-color: #fff;\n border: solid 5px #ffffff;\n border-radius: 50%;\n}\n\n@keyframes rotate_3922 {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"1401c1","snapshot":null,"tags":null,"title":"loader by Abrar-Hussain1","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1203,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\n.loader {\n width: 70px;\n height: 70px;\n position: relative;\n}\n\n.loader:before {\n content: \"\";\n width: 70px;\n height: 70px;\n border-radius: 50%;\n border: 6px solid #007bff;\n position: absolute;\n top: 0;\n left: 0;\n animation: pulse 1s ease-in-out infinite;\n}\n\n.loader:after {\n content: \"\";\n width: 70px;\n height: 70px;\n border-radius: 50%;\n border: 6px solid transparent;\n border-top-color: #007bff;\n position: absolute;\n top: 0;\n left: 0;\n animation: spin 2s linear infinite;\n}\n\n.loader-text {\n font-size: 24px;\n margin-top: 20px;\n color: #007bff;\n font-family: Arial, sans-serif;\n text-align: center;\n text-transform: uppercase;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.6);\n opacity: 1;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0;\n }\n 100% {\n transform: scale(0.6);\n opacity: 1;\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.content {\n display: none;\n}\n\n.loaded .loader-container {\n display: none;\n}\n\n.loaded .content {\n display: block;\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"f9a58b","snapshot":null,"tags":null,"title":"loader by faxriddin20","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":363,"cssLen":2386,"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\n

\n \n

\n","css":".loader {\n --path: #2f3545;\n --dot: rgb(191, 64, 191);\n --duration: 3s;\n width: 44px;\n height: 44px;\n position: relative;\n}\n\n.loader:before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n display: block;\n background: var(--dot);\n top: 37px;\n left: 19px;\n transform: translate(-18px, -18px);\n animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.loader svg rect,\n.loader svg polygon,\n.loader svg circle {\n fill: none;\n stroke: var(--path);\n stroke-width: 10px;\n stroke-linejoin: round;\n stroke-linecap: round;\n}\n\n.loader svg polygon {\n stroke-dasharray: 145 76 145 76;\n stroke-dashoffset: 0;\n animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader svg rect {\n stroke-dasharray: 192 64 192 64;\n stroke-dashoffset: 0;\n animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg circle {\n stroke-dasharray: 150 50 150 50;\n stroke-dashoffset: 75;\n animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader.triangle {\n width: 48px;\n}\n\n.loader.triangle:before {\n left: 21px;\n transform: translate(-10px, -18px);\n animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n@keyframes pathTriangle {\n 33% {\n stroke-dashoffset: 74;\n }\n\n 66% {\n stroke-dashoffset: 147;\n }\n\n 100% {\n stroke-dashoffset: 221;\n }\n}\n\n@keyframes dotTriangle {\n 33% {\n transform: translate(0, 0);\n }\n\n 66% {\n transform: translate(10px, -18px);\n }\n\n 100% {\n transform: translate(-10px, -18px);\n }\n}\n\n@keyframes pathRect {\n 25% {\n stroke-dashoffset: 64;\n }\n\n 50% {\n stroke-dashoffset: 128;\n }\n\n 75% {\n stroke-dashoffset: 192;\n }\n\n 100% {\n stroke-dashoffset: 256;\n }\n}\n\n@keyframes dotRect {\n 25% {\n transform: translate(0, 0);\n }\n\n 50% {\n transform: translate(18px, -18px);\n }\n\n 75% {\n transform: translate(0, -36px);\n }\n\n 100% {\n transform: translate(-18px, -18px);\n }\n}\n\n@keyframes pathCircle {\n 25% {\n stroke-dashoffset: 125;\n }\n\n 50% {\n stroke-dashoffset: 175;\n }\n\n 75% {\n stroke-dashoffset: 225;\n }\n\n 100% {\n stroke-dashoffset: 275;\n }\n}\n\n.loader {\n display: inline-block;\n margin: 0 16px;\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"05e013","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":293,"cssLen":1555,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".sun {\n position: relative;\n animation: rotate 4s linear infinite;\n --color: yellow;\n --scale: 0.4;\n}\n\n.center {\n height: calc(var(--scale) * 10em);\n width: calc(var(--scale) * 10em);\n background-color: var(--color);\n border-radius: 50%;\n box-shadow: 0 0 calc(var(--scale) * 3em) var(--color);\n}\n\n.ray {\n position: absolute;\n height: calc(var(--scale) * 3em);\n width: calc(var(--scale) * 0.5em);\n box-shadow: 0 0 calc(var(--scale) * 1em) var(--color);\n background-color: var(--color);\n}\n\n.r-1 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * 1em);\n}\n\n.r-2 {\n margin-left: calc(var(--scale) * 12.25em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-3 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * -14em);\n}\n\n.r-4 {\n margin-left: calc(var(--scale) * -2.75em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-5 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(45deg);\n}\n\n.r-6 {\n margin-left: calc(var(--scale) * 9.75em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(-45deg);\n}\n\n.r-7 {\n margin-left: calc(var(--scale) * 10.25em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(45deg);\n}\n\n.r-8 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(-45deg);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"2d423c","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":144,"cssLen":829,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n --dim: 3rem;\n width: var(--dim);\n height: var(--dim);\n position: relative;\n animation: spin988 2s linear infinite;\n}\n\n.loader .circle {\n --color: #333;\n --dim: 1.2rem;\n width: var(--dim);\n height: var(--dim);\n background-color: var(--color);\n position: absolute;\n}\n\n.loader .circle:nth-child(1) {\n top: 0;\n left: 0;\n}\n\n.loader .circle:nth-child(2) {\n top: 0;\n right: 0;\n}\n\n.loader .circle:nth-child(3) {\n bottom: 0;\n left: 0;\n}\n\n.loader .circle:nth-child(4) {\n bottom: 0;\n right: 0;\n}\n\n@keyframes spin988 {\n 0% {\n transform: scale(1) rotate(0);\n }\n\n 20%,\n 25% {\n transform: scale(1.3) rotate(90deg);\n }\n\n 45%,\n 50% {\n transform: scale(1) rotate(180deg);\n }\n\n 70%,\n 75% {\n transform: scale(1.3) rotate(270deg);\n }\n\n 95%,\n 100% {\n transform: scale(1) rotate(360deg);\n }\n}\n"}]}},"actionData":null,"errors":null}