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

\n \n\n\n

Creator Points

\n","css":".svglogo {\n color: #fff;\n animation: rotate 7s linear infinite;\n background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);\n border-radius: 50%;\n padding: 1.2em;\n width: 95px;\n margin: 0 auto;\n display: block;\n}\n\n.text {\n font-size: 1.4em;\n color: rgb(129, 120, 120);\n text-align: center;\n margin-top: 1em;\n font-weight: 500;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"9f81d3","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":310,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".container {\n width: 50px;\n height: 50px;\n}\n\n.container .boxes {\n width: 50px;\n height: 50px;\n fill: none;\n stroke-width: 50px;\n stroke: #9b59b6;\n stroke-dasharray: 50;\n stroke-dashoffset: 50%;\n animation: animate 2s linear infinite;\n}\n\n@keyframes animate {\n to {\n stroke-dashoffset: 250%;\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"a52c1e","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":1140,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n flex-direction: row;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.circle {\n width: 20px;\n height: 20px;\n background-color: #8BC6EC;\n background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);\n border-radius: 50%;\n margin-right: 1rem;\n animation: pulse 1.2s ease-in-out infinite;\n}\n\n.circle:nth-child(2) {\n animation-delay: 0.2s;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n}\n\n.circle:nth-child(3) {\n animation-delay: 0.4s;\n background-color: #0093E9;\n background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);\n}\n\n.circle:nth-child(4) {\n animation-delay: 0.6s;\n background-color: #8EC5FC;\n background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);\n}\n\n.circle:nth-child(5) {\n animation-delay: 0.8s;\n background-color: #00DBDE;\n background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.8);\n opacity: 0.7;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n\n 100% {\n transform: scale(0.8);\n opacity: 0.7;\n }\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"29c838","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":478,"cssLen":672,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 80px;\n height: 100px;\n}\n\n.block {\n position: relative;\n box-sizing: border-box;\n float: left;\n margin: 0 10px 10px 0;\n width: 12px;\n height: 12px;\n border-radius: 3px;\n background: #FFF;\n}\n\n.block:nth-child(4n+1) {\n animation: wave_61 2s ease .0s infinite;\n}\n\n.block:nth-child(4n+2) {\n animation: wave_61 2s ease .2s infinite;\n}\n\n.block:nth-child(4n+3) {\n animation: wave_61 2s ease .4s infinite;\n}\n\n.block:nth-child(4n+4) {\n animation: wave_61 2s ease .6s infinite;\n margin-right: 0;\n}\n\n@keyframes wave_61 {\n 0% {\n top: 0;\n opacity: 1;\n }\n\n 50% {\n top: 30px;\n opacity: .2;\n }\n\n 100% {\n top: 0;\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"393fe8","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":1215,"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","css":".loader {\n width: 220px;\n height: 220px;\n border-radius: 50%;\n position: relative;\n border: solid 5px transparent;\n box-shadow: 5px 5px 5px rgb(88, 87, 87), inset 5px 5px 5px rgb(85, 80, 80),\n inset -1px -1px 10px rgba(0, 0, 0, 0.432),\n -1px -1px 10px rgba(0, 0, 0, 0.281);\n}\n\n.loader::before {\n content: \"\";\n display: inline-block;\n position: absolute;\n width: 180px;\n height: 180px;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 5px 5px 20px black, -2px -2px 40px black;\n background: repeating-conic-gradient(\n rgb(61, 59, 59) 0%,\n rgb(248, 248, 246) 15%,\n rgb(54, 52, 52) 33.33%\n );\n}\n\n.ball {\n width: 15px;\n height: 15px;\n display: inline-block;\n background: radial-gradient(\n circle at 8px 5px,\n white 5%,\n rgba(54, 53, 53, 0.685)\n );\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) translateX(97.5px);\n animation: rotate 5s calc(var(--delay) * 0.2s) infinite linear;\n}\n\n@keyframes rotate {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg) translateX(97.5px);\n }\n\n 100% {\n transform: translate(-50%, -50%) rotate(360deg) translateX(97.5px);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"2feb0a","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":816,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".loader {\n width: 48px;\n height: 48px;\n border: 3px dotted #fff;\n border-style: solid solid dotted dotted;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n animation: rotation 2s linear infinite;\n}\n.loader::after {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border: 3px dotted #ff3d00;\n border-style: solid solid dotted;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n animation: rotationBack 1s linear infinite;\n transform-origin: center center;\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes rotationBack {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"d1d4f6","snapshot":null,"tags":null,"title":"loader by realrobertlogan","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":35,"cssLen":636,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".traffic-loader {\n width: 50px;\n height: 50px;\n --c: radial-gradient(farthest-side, #fff 92%, #0000);\n background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%,\n var(--c) 0 50%;\n background-size: 10px 10px;\n background-repeat: no-repeat;\n animation: s8 1s infinite;\n position: relative;\n}\n\n.traffic-loader::before {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: 3px;\n background: repeating-conic-gradient(#0000 0 35deg, #fff 0 90deg);\n -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);\n border-radius: 50%;\n}\n\n@keyframes s8 {\n 100% {\n transform: rotate(0.5turn);\n }\n}\n"},{"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}"}]}},"actionData":null,"errors":null}