{"loaderData":{"0":null,"0-3":{"total":8146,"projects":[{"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"},{"created":"2024-01-22T16:54:42.000Z","isPrivate":0,"projectId":"0ab1d0","snapshot":null,"tags":null,"title":"loader by aliaypov1","updated":"2024-01-22T16:54:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":285,"cssLen":1841,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --uib-size: 2.8rem;\n --uib-speed: .9s;\n --uib-color: #183153;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.loaders {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n height: 100%;\n width: 100%;\n}\n\n.loaders::before {\n content: '';\n height: 20%;\n width: 20%;\n border-radius: 50%;\n background-color: var(--uib-color);\n transform: scale(0);\n opacity: 0.5;\n animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;\n box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);\n padding-bottom: 222px;\n}\n\n.loaders:nth-child(2) {\n transform: rotate(45deg);\n}\n\n.loaders:nth-child(2)::before {\n animation-delay: calc(var(--uib-speed) * -0.875);\n}\n\n.loaders:nth-child(3) {\n transform: rotate(90deg);\n}\n\n.loaders:nth-child(3)::before {\n animation-delay: calc(var(--uib-speed) * -0.75);\n}\n\n.loaders:nth-child(4) {\n transform: rotate(135deg);\n}\n\n.loaders:nth-child(4)::before {\n animation-delay: calc(var(--uib-speed) * -0.625);\n}\n\n.loaders:nth-child(5) {\n transform: rotate(180deg);\n}\n\n.loaders:nth-child(5)::before {\n animation-delay: calc(var(--uib-speed) * -0.5);\n}\n\n.loaders:nth-child(6) {\n transform: rotate(225deg);\n}\n\n.loaders:nth-child(6)::before {\n animation-delay: calc(var(--uib-speed) * -0.375);\n}\n\n.dot-spinner__dot:nth-child(7) {\n transform: rotate(270deg);\n}\n\n.loaders:nth-child(7)::before {\n animation-delay: calc(var(--uib-speed) * -0.25);\n}\n\n.loaders:nth-child(8) {\n transform: rotate(315deg);\n}\n\n.loaders:nth-child(8)::before {\n animation-delay: calc(var(--uib-speed) * -0.125);\n}\n\n@keyframes pulse0112 {\n 0%,\n 100% {\n transform: scale(0);\n opacity: 0.5;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:42.000Z","isPrivate":0,"projectId":"16f352","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":439,"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 width: 300px;\n height: 3px;\n background: linear-gradient(to right, transparent, #28AE60, transparent);\n overflow: hidden;\n}\n\n.loader::after {\n content: '';\n position: absolute;\n translate: -200px 0;\n width: 150px;\n height: 100%;\n background: linear-gradient(to right, transparent, #212121, transparent);\n animation: slide 1s infinite;\n}\n\n@keyframes slide {\n 100% {\n translate: 300px 0;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"94d242","snapshot":null,"tags":null,"title":"loader by catraco","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":659,"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 --color: #a5a5b0;\n --size: 30px;\n width: var(--size);\n height: var(--size);\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 5px;\n}\n\n.loader span {\n width: var(--size);\n height: var(--size);\n border: 1px solid var(--color);\n border-radius: 5px;\n animation: keyframes-rotate 2s alternate infinite ease-in-out;\n}\n\n.loader span:nth-child(1) {\n animation-delay: 0ms;\n}\n\n.loader span:nth-child(2) {\n animation-delay: 50ms;\n}\n\n.loader span:nth-child(3) {\n animation-delay: 100ms;\n}\n\n.loader span:nth-child(4) {\n animation-delay: 150ms;\n}\n\n@keyframes keyframes-rotate {\n 50% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"758254","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":298,"cssLen":756,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".semicircle,\n.semicircle div {\n /* Adjust the size of the entire animation here.\n (Remove max size below to go above 300px.) */\n width: 170px;\n height: 170px;\n /* Adjust the speed or timing function of the animation here. */\n animation: 6s rotate141 infinite linear;\n background-repeat: no-repeat;\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.semicircle div {\n position: absolute;\n top: 5%;\n left: 5%;\n width: 90%;\n height: 90%;\n}\n\n.semicircle:before,\n.semicircle div:before {\n content: '';\n width: 100%;\n height: 50%;\n display: block;\n background: radial-gradient(transparent, transparent 65%, #000 65%, #000);\n background-size: 100% 200%;\n}\n\n@keyframes rotate141 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"173d2a","snapshot":null,"tags":null,"title":"loader by zanina-yassine","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2014,"cssLen":9251,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\nLoading Page.. Please Wait!\n

","css":".master-container {\n margin: 0;\n padding: 20px 40px;\n background-color: #131516;\n display: grid;\n border-radius: 13px;\n border: 1px solid #2c2d2e;\n transform: scale(0.7);\n}\n\n.container {\n width: 300px;\n height: 300px;\n position: relative;\n margin: auto;\n border-radius: 50%;\n border: 2px solid white;\n overflow: hidden;\n}\n\n.crescent {\n position: relative;\n height: 50px;\n width: 50px;\n border-radius: 50%;\n left: calc(50% - 25px);\n top: 12px;\n overflow: hidden;\n animation: rotate 3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.crescent span:nth-child(2) {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n}\n\n.crescent span:nth-child(1) {\n background-color: #131516;\n position: absolute;\n left: 40%;\n display: block;\n width: calc(70% - 6px);\n height: calc(70% - 6px);\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n z-index: 9;\n}\n\n.star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 20px;\n width: 20px;\n}\n\n.star span:nth-child(1)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(1)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.small-star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 12px;\n width: 12px;\n}\n\n.small-star span:nth-child(1)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(1)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.s1 {\n left: 60px;\n top: 50px;\n animation: glow 1.1s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s2 {\n right: 35px;\n bottom: 155px;\n animation: glow 1.3s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s3 {\n left: calc(50% - 10px);\n top: 75px;\n animation: glow 1.5s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s4 {\n left: 35px;\n bottom: 155px;\n animation: glow 3s 0.7s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s5 {\n right: 60px;\n top: 50px;\n animation: glow 2s 1.2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss1 {\n right: 15px;\n bottom: 130px;\n animation: glow 2s 1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss2 {\n left: 15px;\n bottom: 130px;\n animation: glow 1s 0s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss3 {\n left: 35px;\n bottom: 195px;\n animation: glow 1.9s 0.1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss4 {\n right: 35px;\n bottom: 195px;\n animation: glow 1.6s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss5 {\n left: 100px;\n bottom: 180px;\n animation: glow 1s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss6 {\n right: 100px;\n bottom: 180px;\n animation: glow 1.7s 0.6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss7 {\n right: 90px;\n top: 30px;\n animation: glow 0.8s 0.8s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss8 {\n left: 90px;\n top: 30px;\n animation: glow 1.8s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.hill {\n display: block;\n width: 140%;\n height: 100%;\n border: 2px solid white;\n border-radius: 50%;\n bottom: -40%;\n position: relative;\n left: -20%;\n background-size: 3%;\n background-repeat: repeat;\n opacity: 0.7;\n}\n\n.fire-pit {\n width: 18px;\n height: 30px;\n position: absolute;\n left: calc(50% - 9px);\n bottom: 25px;\n z-index: 99;\n}\n\n.fire {\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-bottom: 18px solid #ffffff;\n position: relative;\n top: -9px;\n}\n\n.fire:after {\n content: \"\";\n position: absolute;\n left: -9px;\n top: 18px;\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-top: 9px solid #ffffff;\n}\n\n.inner-fire {\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-bottom: 9px solid #131516;\n top: 4.5px;\n position: absolute;\n z-index: 9;\n left: -4.5px;\n}\n\n.inner-fire:after {\n content: \"\";\n position: absolute;\n left: -4.5px;\n top: 9px;\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-top: 6px solid #131516;\n}\n\n.log1 {\n background-color: white;\n height: 2px;\n transform: rotate(35deg);\n transform-origin: center;\n position: relative;\n left: -3px;\n bottom: -1.5px;\n}\n\n.log2 {\n background-color: white;\n height: 2px;\n transform: rotate(-35deg);\n transform-origin: center;\n left: 3px;\n position: relative;\n bottom: -0px;\n}\n\n.hut {\n width: 0;\n height: 0;\n border-left: 38px solid transparent;\n border-right: 38px solid transparent;\n border-bottom: 75px solid #131516;\n position: absolute;\n left: calc(50% - 37.6px);\n z-index: 11;\n bottom: 80px;\n transform: scale(1.3);\n}\n\n.hut hr:nth-child(1) {\n height: 0px;\n position: absolute;\n width: 75px;\n bottom: -75px;\n left: calc(50% - 37.6px);\n}\n\n.hut hr:nth-child(2) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n left: -32px;\n transform: rotate(63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(3) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n right: -32px;\n transform: rotate(-63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(4) {\n height: 0px;\n position: absolute;\n width: 60px;\n bottom: -60px;\n left: -30px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(5) {\n height: 0px;\n position: absolute;\n width: 55px;\n bottom: -55px;\n left: -27.5px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(6) {\n height: 0px;\n position: absolute;\n width: 50px;\n bottom: -50px;\n left: -25px;\n border: 0.5px solid white;\n}\n\n.doorway {\n width: 0;\n height: 0;\n border-left: 22px solid transparent;\n border-right: 22px solid transparent;\n border-bottom: 42px solid #131516;\n position: relative;\n left: -22px;\n bottom: -32px;\n}\n\n.doorway::before {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(-27deg);\n left: 11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway::after {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(27deg);\n left: -11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway > hr.split {\n height: 44px;\n width: 1px;\n position: absolute;\n left: 0px;\n top: 0;\n display: inline-block;\n background-color: white;\n border: 0;\n}\n\n/* Trees */\n.tree {\n position: absolute;\n width: 25px;\n height: 48px;\n z-index: 21;\n transform: scale(1.3);\n}\n\n.tree .trunc {\n height: 48px;\n width: 1px;\n background-color: white;\n left: 12.5px;\n position: absolute;\n margin-top: 1.5px;\n}\n\n.tree .leaves {\n height: 18px;\n width: 18px;\n transform: rotate(45deg);\n border-left: 1.5px solid white;\n border-top: 1.5px solid white;\n border-bottom: 0;\n border-right: 0;\n margin-bottom: -15px;\n margin-top: 5px;\n left: 4px;\n position: relative;\n}\n\n.one {\n left: 30px;\n bottom: 90px;\n}\n\n.two {\n right: 30px;\n bottom: 90px;\n}\n\n.three {\n left: 80px;\n bottom: 115px;\n}\n\n.four {\n right: 80px;\n bottom: 115px;\n}\n\n.loading-text {\n color: white;\n font-family: 'Inter', sans-serif;\n display: block;\n text-align: center;\n padding: 20px 0 0 0;\n opacity: 0.8;\n}\n\n@keyframes glow {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 50% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rota(0);\n }\n}"}]}},"actionData":null,"errors":null}