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

","css":".loader-3 {\n width: 10em;\n display: flex;\n justify-content: space-evenly;\n}\n\n.circle {\n width: 1em;\n height: 1em;\n border-radius: 50%;\n position: relative;\n}\n\n.circle:nth-child(1) {\n background-color: #90be6d;\n}\n\n.circle:nth-child(2) {\n background-color: #f9c74f;\n}\n\n.circle:nth-child(3) {\n background-color: #f8961e;\n}\n\n.circle:nth-child(4) {\n background-color: #f3722c;\n}\n\n.circle:nth-child(5) {\n background-color: #f94346;\n}\n\n.circle::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n border-radius: 50%;\n opacity: 0.5;\n animation: animateLoader38 2s ease-out infinite;\n}\n\n.circle:nth-child(1)::before {\n background-color: #90be6d;\n}\n\n.circle:nth-child(2)::before {\n background-color: #f9c74f;\n animation-delay: 0.2s;\n}\n\n.circle:nth-child(3)::before {\n background-color: #f8961e;\n animation-delay: 0.4s;\n}\n\n.circle:nth-child(4)::before {\n background-color: #f3722c;\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(5)::before {\n background-color: #f94346;\n animation-delay: 0.8s;\n}\n\n@keyframes animateLoader38 {\n 0% {\n transform: scale(1);\n }\n\n 50%,\n 75% {\n transform: scale(2.5);\n }\n\n 80%,\n 100% {\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"b415ab","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":673,"cssLen":219,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".circle {\n animation: move571 4s linear infinite;\n}\n\n.circle.right {\n animation-direction: reverse;\n}\n\n@keyframes move571 {\n 25% {\n transform: translateX(-32px);\n }\n\n 75% {\n transform: translateX(32px);\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"7c6c96","snapshot":null,"tags":null,"title":"loader by SteveBloX","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":495,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".progress-loader {\n top: 50%;\n left: 50%;\n position: absolute;\n transform: translate(-50%, -50%);\n width: 150px;\n background: rgba(236, 236, 238, 0.253);\n height: 10px;\n border-radius: 7px;\n}\n\n.progress {\n width: 1px;\n height: 10px;\n border-radius: 7px;\n background: rgb(255, 255, 255);\n transition: 0.5s;\n animation: loading_44 5s cubic-bezier(.4,1.01,1,1) infinite;\n}\n\n@keyframes loading_44 {\n 0% {\n width: 0%;\n }\n\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0%;\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"d27dcb","snapshot":null,"tags":null,"title":"loader by shadowmurphy","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":234,"cssLen":385,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cola {\n --pathlength: 1384;\n width: 45px;\n fill: transparent;\n stroke: black;\n stroke-linecap: round;\n stroke-width: 15px;\n stroke-dashoffset: var(--pathlength);\n stroke-dasharray: 0 var(--pathlength);\n animation: loader 8s cubic-bezier(.5,.1,.5,1) infinite both;\n}\n\n@keyframes loader {\n 90%, 100% {\n stroke-dashoffset: 0;\n stroke-dasharray: var(--pathlength) 0;\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"a6c724","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":235,"cssLen":1238,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* The loader */\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: 600px;\n transform-style: perserve-3d;\n}\n\n/* The dot */\n.dot {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100px;\n height: 100px;\n margin-top: -50px;\n margin-left: -50px;\n border-radius: 100px;\n border: 20px solid #1e3f57;\n transform-style: perserve-3d;\n transform: scale(0) rotateX(60deg);\n animation: dot 3s cubic-bezier(.67,.08,.46,1.5) infinite;\n}\n\n.dot:nth-child(2) {\n animation-delay: 200ms;\n}\n\n.dot:nth-child(3) {\n animation-delay: 400ms;\n}\n\n.dot:nth-child(4) {\n animation-delay: 600ms;\n}\n\n.dot:nth-child(5) {\n animation-delay: 800ms;\n}\n\n.dot:nth-child(6) {\n animation-delay: 1000ms;\n}\n\n.dot:nth-child(7) {\n animation-delay: 1200ms;\n}\n\n.dot:nth-child(8) {\n animation-delay: 1400ms;\n}\n\n@keyframes dot {\n 0% {\n opacity: 0;\n border-color: #6bb2cd;\n transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1);\n }\n\n 40% {\n opacity: 1;\n transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1);\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"8164e8","snapshot":null,"tags":null,"title":"loader by TheAbieza","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":369,"cssLen":1480,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".container {\n width: 175px;\n height: 175px;\n background-color: #ABC4AA;\n border-radius: 10px;\n position: relative;\n box-shadow: 5px 5px 0 0 #675D50;\n}\n\n.plate {\n width: fit-content;\n}\n\n.plate .black,\n.plate .white,\n.plate .center,\n.plate .border {\n border-radius: 100%;\n}\n\n.container,\n.plate .black,\n.plate .white,\n.plate .border {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.plate .black {\n width: 150px;\n height: 150px;\n background-color: #675D50;\n animation: rotation 2s infinite linear;\n}\n\n@keyframes rotation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(359deg);\n }\n}\n\n.plate .white {\n width: 70px;\n height: 70px;\n background-color: #F3DEBA;\n}\n\n.plate .center {\n width: 20px;\n height: 20px;\n background-color: #675D50;\n}\n\n.plate .border {\n width: 111px;\n height: 111px;\n border-top: 3px solid #F3DEBA;\n border-bottom: 3px solid #F3DEBA;\n border-left: 3px solid #675D50;\n border-right: 3px solid #675D50;\n}\n\n.player {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: fit-content;\n position: absolute;\n bottom: 0;\n right: 0;\n margin-bottom: 8px;\n margin-right: 8px;\n rotate: -45deg;\n}\n\n.player .circ {\n width: 25px;\n height: 25px;\n background-color: #F3DEBA;\n border-radius: 100%;\n z-index: 1;\n}\n\n.player .rect {\n width: 10px;\n height: 55px;\n background-color: #F3DEBA;\n position: absolute;\n bottom: 0;\n margin-bottom: 5px;\n}\n"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"8ed52a","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":650,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".custom-loader {\n width: 50px;\n height: 50px;\n --c: radial-gradient(farthest-side,#000000 92%,#0000);\n background: var(--c) 50% 0, \n var(--c) 50% 100%, \n 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.custom-loader::before {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: 3px;\n background: repeating-conic-gradient(#0000 0 35deg,#000000 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 \n 100% {\n transform: rotate(.5turn)\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"f1a1b3","snapshot":null,"tags":null,"title":"loader by kennyotsu","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":309,"cssLen":1617,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n buttons\n forms\n switches\n cards\n buttons\n

\n","css":".card {\n /* color used to softly clip top and bottom of the .words container */\n --bg-color: #212121;\n background-color: var(--bg-color);\n padding: 1rem 2rem;\n border-radius: 1.25rem;\n}\n.loader {\n color: rgb(124, 124, 124);\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 25px;\n -webkit-box-sizing: content-box;\n box-sizing: content-box;\n height: 40px;\n padding: 10px 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n border-radius: 8px;\n}\n\n.words {\n overflow: hidden;\n position: relative;\n}\n.words::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(\n var(--bg-color) 10%,\n transparent 30%,\n transparent 70%,\n var(--bg-color) 90%\n );\n z-index: 20;\n}\n\n.word {\n display: block;\n height: 100%;\n padding-left: 6px;\n color: #956afa;\n animation: spin_4991 4s infinite;\n}\n\n@keyframes spin_4991 {\n 10% {\n -webkit-transform: translateY(-102%);\n transform: translateY(-102%);\n }\n\n 25% {\n -webkit-transform: translateY(-100%);\n transform: translateY(-100%);\n }\n\n 35% {\n -webkit-transform: translateY(-202%);\n transform: translateY(-202%);\n }\n\n 50% {\n -webkit-transform: translateY(-200%);\n transform: translateY(-200%);\n }\n\n 60% {\n -webkit-transform: translateY(-302%);\n transform: translateY(-302%);\n }\n\n 75% {\n -webkit-transform: translateY(-300%);\n transform: translateY(-300%);\n }\n\n 85% {\n -webkit-transform: translateY(-402%);\n transform: translateY(-402%);\n }\n\n 100% {\n -webkit-transform: translateY(-400%);\n transform: translateY(-400%);\n }\n}\n"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"d08f59","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":493,"cssLen":149,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".spinner .path {\n animation: infinity-load 1.5s infinite cubic-bezier(.65,.05,.36,1)\n}\n\n@keyframes infinity-load {\n to {\n stroke-dashoffset: 10\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"4e4cfa","snapshot":null,"tags":null,"title":"loader by arshshaikh06","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":661,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n background-image: linear-gradient(rgb(186, 66, 255) 35%,rgb(0, 225, 255));\n width: 100px;\n height: 100px;\n animation: spinning82341 1.7s linear infinite, hue 1s ease-in-out infinite;\n text-align: center;\n border-radius: 50px;\n filter: blur(1px);\n box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);\n}\n\n.spinner1 {\n background-color: rgb(36, 36, 36);\n width: 100px;\n height: 100px;\n border-radius: 50px;\n filter: blur(10px);\n}\n\n@keyframes spinning82341 {\n to {\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}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"3b1535","snapshot":null,"tags":null,"title":"loader by muqaddasjamal","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":47,"cssLen":859,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n height: 150px;\n width: 150px;\n border: 1px solid black;\n animation: rotate_3922 1.2s linear infinite;\n background-color: #9b59b6;\n background-image: linear-gradient(red, yellow, blue);\n}\n\n.container span {\n position: absolute;\n border-radius: 50%;\n height: 100%;\n width: 100%;\n background-color: #9b59b6;\n background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);\n}\n\n.container span {\n filter: blur(20px);\n}\n.container::after {\n content: \"\";\n position: absolute;\n top: 50px;\n left: 50px;\n right: 50px;\n bottom: 50px;\n background-color: black;\n border: solid 1px yellow;\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}\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"c31bf7","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":2995,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n animation: spin 1.5s linear alternate infinite;\n background: #B73F41;\n border-radius: 50%;\n height: 120px;\n width: 120px;\n}\n\n.loader:before {\n background: #B73F41;\n border-radius: 50%;\n content: '';\n display: block;\n height: 0.5em;\n width: 0.5em;\n z-index: 2;\n}\n\n.loader:after {\n background: #262E2A;\n border-radius: 50%;\n box-shadow: 0em -2.60em #262E2A,\n 2.25em -4.02em #e5e7eb,\n 2.25em -1.25em #262E2A,\n 4.60em 0em #e5e7eb,\n 2.25em 1.25em #262E2A,\n 2.25em 4.02em #e5e7eb,\n 0em 2.60em #262E2A,\n -2.25em 4.02em #e5e7eb,\n -2.25em 1.25em #262E2A,\n -4.60em 0em #e5e7eb,\n -2.25em -1.25em #262E2A,\n -2.25em -4.02em #e5e7eb;\n content: '';\n display: block;\n height: 2em;\n width: 2em;\n}\n\n.inner {\n animation: load 1.5s linear alternate infinite;\n border: solid 1px #B73F41;\n border-radius: 50%;\n height: 1.75em;\n width: 1.75em;\n z-index: 1;\n}\n\n.loader, .loader:before, .loader:after, .inner {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n@keyframes load {\n 0% {\n box-shadow: 0em -2.60em #262E2A,\n 2.25em -1.25em #262E2A,\n 2.25em 1.25em #262E2A,\n 0em 2.60em #262E2A,\n -2.25em 1.25em #262E2A,\n -2.25em -1.25em #262E2A;\n }\n\n 15% {\n box-shadow: 0em -2.60em #262E2A,\n 2.25em -1.25em #262E2A,\n 2.25em 1.25em #262E2A,\n 0em 2.60em #262E2A,\n -2.25em 1.25em #262E2A,\n -2.25em -1.25em #B73F41;\n }\n\n 30% {\n box-shadow: 0em -2.60em #262E2A,\n 2.25em -1.25em #262E2A,\n 2.25em 1.25em #262E2A,\n 0em 2.60em #262E2A,\n -2.25em 1.25em #B73F41,\n -2.25em -1.25em #B73F41;\n }\n\n 45% {\n box-shadow: 0em -2.60em #262E2A,\n 2.25em -1.25em #262E2A,\n 2.25em 1.25em #262E2A,\n 0em 2.60em #B73F41,\n -2.25em 1.25em #B73F41,\n -2.25em -1.25em #B73F41;\n }\n\n 60% {\n box-shadow: 0em -2.60em #262E2A,\n 2.25em -1.25em #262E2A,\n 2.25em 1.25em #B73F41,\n 0em 2.60em #B73F41,\n -2.25em 1.25em #B73F41,\n -2.25em -1.25em #B73F41;\n }\n\n 75% {\n box-shadow: 0em -2.60em #262E2A,\n 2.25em -1.25em #B73F41,\n 2.25em 1.25em #B73F41,\n 0em 2.60em #B73F41,\n -2.25em 1.25em #B73F41,\n -2.25em -1.25em #B73F41;\n }\n\n 90% {\n box-shadow: 0em -2.60em #B73F41,\n 2.25em -1.25em #B73F41,\n 2.25em 1.25em #B73F41,\n 0em 2.60em #B73F41,\n -2.25em 1.25em #B73F41,\n -2.25em -1.25em #B73F41;\n }\n\n 100% {\n box-shadow: 0em -2.60em #B73F41,\n 2.25em -1.25em #B73F41,\n 2.25em 1.25em #B73F41,\n 0em 2.60em #B73F41,\n -2.25em 1.25em #B73F41,\n -2.25em -1.25em #B73F41;\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 15% {\n transform: rotate(60deg);\n }\n\n 30% {\n transform: rotate(120deg);\n }\n\n 45% {\n transform: rotate(180deg);\n }\n\n 60% {\n transform: rotate(240deg);\n }\n\n 75% {\n transform: rotate(300deg);\n }\n\n 90% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}"}]}},"actionData":null,"errors":null}