{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"171f3b","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":955,"cssLen":2229,"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 width: 80px;\n height: 80px;\n position: relative;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n top: -10px;\n left: -10px;\n right: -10px;\n bottom: -10px;\n border-radius: 50%;\n}\n\n.loader-inner {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.loader-block {\n display: inline-block;\n width: 8px;\n height: 10px;\n margin: 2px;\n background-color: rgb(53, 143, 246);\n box-shadow: 0 0 30px rgb(53, 143, 246);\n animation: loader 5s infinite;\n}\n\n.loader-block:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.loader-block:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.loader-block:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.loader-block:nth-child(4) {\n animation-delay: 0.8s;\n}\n\n.loader-block:nth-child(5) {\n animation-delay: 1s;\n}\n\n.loader-block:nth-child(6) {\n animation-delay: 1.2s;\n}\n\n.loader-block:nth-child(7) {\n animation-delay: 1.4s;\n}\n\n.loader-block:nth-child(8) {\n animation-delay: 1.6s;\n}\n\n.loader-block:nth-child(9) {\n animation-delay: 1.8s;\n}\n\n.loader-block:nth-child(10) {\n animation-delay: 2s;\n}\n\n.loader-block:nth-child(11) {\n animation-delay: 2.2s;\n}\n\n.loader-block:nth-child(12) {\n animation-delay: 2.4s;\n}\n\n.loader-block:nth-child(13) {\n animation-delay: 2.6s;\n}\n\n.loader-block:nth-child(14) {\n animation-delay: 2.8s;\n}\n\n.loader-block:nth-child(15) {\n animation-delay: 3s;\n}\n\n.loader-block:nth-child(16) {\n animation-delay: 3.2s;\n}\n\n.loader-block:nth-child(17) {\n animation-delay: 3.4s;\n}\n\n.loader-block:nth-child(18) {\n animation-delay: 3.6s;\n}\n\n.loader-block:nth-child(19) {\n animation-delay: 3.8s;\n}\n\n.loader-block:nth-child(20) {\n animation-delay: 4s;\n}\n\n.loader-block:nth-child(21) {\n animation-delay: 4.2s;\n}\n\n.loader-block:nth-child(22) {\n animation-delay: 4.4s;\n}\n\n.loader-block:nth-child(23) {\n animation-delay: 4.6s;\n}\n\n.loader-block:nth-child(24) {\n animation-delay: 4.8s;\n}\n\n@keyframes loader {\n 0% {\n transform: scale(1);\n box-shadow: 0 0 40px rgb(53, 143, 246);\n }\n\n 13% {\n transform: scale(1, 4);\n box-shadow: 0 0 60px rgb(53, 143, 246);\n }\n\n 26% {\n transform: scale(1);\n box-shadow: 0 0 40px rgb(53, 143, 246);\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"116d5c","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":646,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader ,.loader::before,.loader::after {\n border-width: 2px;\n border-style: solid;\n border-radius: 10px;\n animation: rotate 5s linear infinite;\n}\n\n.loader {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 40px;\n height: 40px;\n border-color: #5a4ff3;\n}\n\n.loader::before,.loader::after {\n position: absolute;\n content: \"\";\n}\n\n.loader::before {\n border-color: #35a2d2;\n width: 110%;\n height: 110%;\n animation-delay: .5s\n}\n\n.loader::after {\n border-color: #9c40fc;\n width: 120%;\n height: 120%;\n animation-delay: .10s;\n}\n\n@keyframes rotate {\n to {\n transform: rotate(360deg)\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"a58ea4","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":634,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n padding: 7px;\n background: conic-gradient(from 135deg at top,#004dff 90deg, #0000 0) 0 calc(50% - 4px)/19px 9.5px,\n radial-gradient(farthest-side at bottom left,#0000 calc(100% - 7px),#004dff calc(100% - 6px) 99%,#0000) top right/50% 50% content-box content-box,\n radial-gradient(farthest-side at top,#0000 calc(100% - 7px),#004dff calc(100% - 6px) 99%,#0000) bottom /100% 50% content-box content-box;\n background-repeat: no-repeat;\n animation: spinner-v8og74 1s infinite linear;\n}\n\n@keyframes spinner-v8og74 {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"1bd010","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":335,"cssLen":929,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 5px;\n width: 1px;\n position: absolute;\n animation: rotate0234 3.5s linear infinite;\n}\n\n.loader .dot {\n top: 30px;\n height: 7px;\n width: 7px;\n background: #268fe4;\n border-radius: 50%;\n position: relative;\n}\n\n.text {\n position: absolute;\n bottom: -85px;\n font-size: 25px;\n font-weight: 400;\n color: #26aee4;\n}\n\n@keyframes rotate0234 {\n 30% {\n transform: rotate(220deg);\n }\n\n 40% {\n transform: rotate(450deg);\n opacity: 1;\n }\n\n 75% {\n transform: rotate(720deg);\n opacity: 1;\n }\n\n 76% {\n opacity: 0;\n }\n\n 100% {\n opacity: 0;\n transform: rotate(0deg);\n }\n}\n\n.loader:nth-child(1) {\n animation-delay: 0.15s;\n}\n\n.loader:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.loader:nth-child(3) {\n animation-delay: 0.45s;\n}\n\n.loader:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.loader:nth-child(5) {\n animation-delay: 0.75s;\n}\n\n.loader:nth-child(6) {\n animation-delay: 0.9s;\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"ec44cf","snapshot":null,"tags":null,"title":"loader by csozidev","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":686,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* Discord loader made by: csozi | Website: www.csozi.hu*/\n\n.loader {\n position: relative;\n height: 60px;\n width: 60px;\n box-sizing: content-box;\n padding: 10px;\n}\n\n.square {\n background-color: #7289DA;\n height: 20px;\n width: 20px;\n position: absolute;\n}\n\n.square-1 {\n animation: load 2s infinite;\n}\n\n.square-2 {\n animation: load 2s infinite;\n animation-delay: 1s;\n}\n\n@keyframes load {\n 0% {\n translate: 0px 0px;\n scale: 1;\n rotate: 0deg;\n }\n\n 25% {\n translate: 40px 0px;\n scale: 0.5;\n rotate: -90deg;\n }\n\n 50% {\n translate: 40px 40px;\n scale: 1;\n rotate: 180deg;\n }\n\n 75% {\n translate: 0px 40px;\n scale: 0.5;\n rotate: 90deg;\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"0faff8","snapshot":null,"tags":null,"title":"loader by RoninLJY","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":143,"cssLen":1285,"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 width: 85px;\n height: 85px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-content: space-between;\n animation: loading-rotate 3s linear infinite;\n}\n\n.item {\n width: 40px;\n height: 40px;\n display: block;\n box-sizing: border-box;\n}\n\n.item:nth-of-type(1) {\n background-color: #50DE68;\n border-radius: 20px 20px 0 20px;\n border-left: #ffffff 4px solid;\n border-top: #f7f7f7 4px solid;\n}\n\n.item:nth-of-type(2) {\n background-color: rgb(32, 80, 46);\n border-radius: 20px 20px 20px 0;\n border-right: #ffffff 4px solid;\n border-top: #f7f7f7 4px solid;\n}\n\n.item:nth-of-type(3) {\n background-color: rgb(0, 255, 55);\n border-radius: 20px 0 20px 20px;\n border-left: #ffffff 4px solid;\n border-bottom: #f7f7f7 4px solid;\n}\n\n.item:nth-of-type(4) {\n background-color: rgb(32, 182, 32);\n border-radius: 0 20px 20px 20px;\n border-right: #ffffff 4px solid;\n border-bottom: #f7f7f7 4px solid;\n}\n\n@keyframes loading-rotate {\n 0% {\n transform: scale(1) rotate(0);\n }\n\n 20% {\n transform: scale(1) rotate(72deg);\n }\n\n 40% {\n transform: scale(0.5) rotate(144deg);\n }\n\n 60% {\n transform: scale(0.5) rotate(216deg);\n }\n\n 80% {\n transform: scale(1) rotate(288deg);\n }\n\n 100% {\n transform: scale(1) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"36a0f6","snapshot":null,"tags":null,"title":"loader by successfulfadwa","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":674,"cssLen":3042,"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

🌮

\n \n

\n","css":".cube-loader {\n position: relative;\n/* u can choose any size */\n width: 75px;\n height: 75px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animate 4s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg);\n }\n}\n\n.cube-loader .cube-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n transform-style: preserve-3d;\n}\n\n.cube-loader .cube-wrapper .cube-span {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n /* width 75px / 2 = 37.5px */\n transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);\n background: hsla(0, 100%, 95%, 1);\n background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=\"#ffe3e3\", endColorstr=\"#ffd5b2\", GradientType=1 );\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsla(0, 100%, 95%, 1);\n background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=\"#ffe3e3\", endColorstr=\"#ffd5b2\", GradientType=1 );\n /* width 75px / 2 = 37.5px */\n transform: rotateX(90deg) translateZ(37.5px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n/* u can choose any size */\n width: 75px;\n height: 75px;\n background: hsla(0, 100%, 95%, 1);\n background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=\"#ffe3e3\", endColorstr=\"#ffd5b2\", GradientType=1 );\n background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=\"#ffe3e3\", endColorstr=\"#ffd5b2\", GradientType=1 );\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"6d888c","snapshot":null,"tags":null,"title":"loader by Admin12121","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":420,"cssLen":3388,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes scaleUpDown {\n 0%, 100% {\n transform: scaleY(1) scaleX(1);\n }\n\n 50%, 90% {\n transform: scaleY(1.1);\n }\n\n 75% {\n transform: scaleY(0.95);\n }\n\n 80% {\n transform: scaleX(0.95);\n }\n}\n\n@keyframes shake {\n 0%, 100% {\n transform: skewX(0) scale(1);\n }\n\n 50% {\n transform: skewX(5deg) scale(0.9);\n }\n}\n\n@keyframes particleUp {\n 0% {\n opacity: 0;\n }\n\n 20% {\n opacity: 1;\n }\n\n 80% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n top: -100%;\n transform: scale(0.5);\n }\n}\n\n@keyframes glow {\n 0%, 100% {\n background-color: #ef5a00;\n }\n\n 50% {\n background-color: #ff7800;\n }\n}\n\n.fire {\n position: absolute;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n width: 100px;\n height: 100px;\n background-color: transparent;\n margin-left: auto;\n margin-right: auto;\n}\n\n.fire-center {\n position: absolute;\n height: 100%;\n width: 100%;\n animation: scaleUpDown 3s ease-out;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-center .main-fire {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 60% 40%;\n filter: drop-shadow(0 0 10px #d43322);\n}\n\n.fire-center .particle-fire {\n position: absolute;\n top: 60%;\n left: 45%;\n width: 10px;\n height: 10px;\n background-color: #ef5a00;\n border-radius: 50%;\n filter: drop-shadow(0 0 10px #d43322);\n animation: particleUp 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-right {\n height: 100%;\n width: 100%;\n position: absolute;\n animation: shake 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-right .main-fire {\n position: absolute;\n top: 15%;\n right: -25%;\n width: 80%;\n height: 80%;\n background-color: #ef5a00;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 60% 40%;\n filter: drop-shadow(0 0 10px #d43322);\n}\n\n.fire-right .particle-fire {\n position: absolute;\n top: 45%;\n left: 50%;\n width: 15px;\n height: 15px;\n background-color: #ef5a00;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 50%;\n filter: drop-shadow(0 0 10px #d43322);\n animation: particleUp 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-left {\n position: absolute;\n height: 100%;\n width: 100%;\n animation: shake 3s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-left .main-fire {\n position: absolute;\n top: 15%;\n left: -20%;\n width: 80%;\n height: 80%;\n background-color: #ef5a00;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 60% 40%;\n filter: drop-shadow(0 0 10px #d43322);\n}\n\n.fire-left .particle-fire {\n position: absolute;\n top: 10%;\n left: 20%;\n width: 10%;\n height: 10%;\n background-color: #ef5a00;\n border-radius: 50%;\n filter: drop-shadow(0 0 10px #d43322);\n animation: particleUp 3s infinite ease-out 0;\n animation-fill-mode: both;\n}\n\n.fire-bottom .main-fire {\n position: absolute;\n top: 30%;\n left: 20%;\n width: 75%;\n height: 75%;\n background-color: #ff7800;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 100% 40%;\n filter: blur(10px);\n animation: glow 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"709843","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":694,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n background: transparent;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.circle {\n width: 80px;\n height: 80px;\n border: 2px solid #ccc;\n position: absolute;\n border-radius: 50%;\n animation: circle14512 2s linear infinite;\n}\n\n.circle::before {\n content: '';\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #9ae932;\n box-shadow: 0 0 20px #9ae932, 0 0 60px #9ae932;\n}\n\n@keyframes circle14512 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"d447ca","snapshot":null,"tags":null,"title":"loader by isfan4ik","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":620,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".body {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.svg {\n position: absolute;\n width: 400px;\n fill: none;\n}\n\n.svg:nth-child(2) {\n filter: blur(40px);\n}\n\n.svg path {\n d: path(\"M0,25 C150,110 150, -60 300,25\");\n stroke: #ff0092;\n stroke-width: 50;\n stroke-linecap: round;\n transform: translate(50px,50%);\n animation: animate 2s ease-in-out infinite;\n}\n\n@keyframes animate {\n 0% {\n stroke: greenyellow;\n stroke: #ff0092;\n d: path(\"M0,25 C150,110 150, -60 300,25\");\n }\n\n 50% {\n stroke: dodgerblue;\n stroke: #00ff00;\n d: path(\"M0,25 C160,-50 140, 110 300,25\");\n }\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"7ab5f4","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":1788,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n animation: animate 8s linear infinite;\n}\n\n.pencil {\n width: 150px;\n background: #ffc334;\n border-top: 10px solid #ffd268;\n border-bottom: 10px solid #e3af38;\n overflow: hidden;\n transform-origin: top;\n}\n\n.pencil p {\n margin: 0;\n padding: 0;\n text-align: center;\n font-size: 12px;\n line-height: 15px;\n text-transform: uppercase;\n font-weight: bold;\n color: #d09200;\n}\n\n.pencil:before {\n content: '';\n position: absolute;\n left: -80px;\n top: 0;\n border-style: solid;\n border-color: transparent #e29663 transparent transparent;\n border-width: 17px 40px 18px;\n}\n\n.pencil:after {\n content: '';\n position: absolute;\n left: -80px;\n top: 0;\n border-style: solid;\n border-color: transparent #262626 transparent transparent;\n border-width: 17px 40px 18px;\n transform: scale(.3);\n}\n\n.top {\n position: absolute;\n top: 0;\n right: 0;\n height: 35px;\n width: 35px;\n background: #ccc;\n border-top: 10px solid #dedede;\n border-bottom: 10px solid #b9bfbf;\n}\n\n.top:before {\n content: '';\n position: absolute;\n top: -10px;\n right: -100%;\n width: 150%;\n height: 100%;\n background: #d76f6e;\n border-top: 10px solid #da8e8d;\n border-bottom: 10px solid #c85957;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n z-index: 2;\n}\n\n.stroke {\n position: absolute;\n top: 50%;\n left: calc(100% - 80px);\n transform: translate(-50%,-50%) rotate(45deg);\n border: 5px solid transparent;\n border-left-color: #000;\n border-top-color: #000;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n z-index: 1;\n}\n\n@keyframes animate {\n 0% {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n\n 100% {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"2193d2","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":833,"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: 16px;\n height: 16px;\n}\n\n.spinner div {\n width: 100%;\n height: 100%;\n background-color: #004dff;\n border-radius: 50%;\n animation: spinner-4t3wzl 1.25s infinite backwards;\n}\n\n.spinner div:nth-child(1) {\n animation-delay: 0.15s;\n background-color: rgba(0,77,255,0.9);\n}\n\n.spinner div:nth-child(2) {\n animation-delay: 0.3s;\n background-color: rgba(0,77,255,0.8);\n}\n\n.spinner div:nth-child(3) {\n animation-delay: 0.45s;\n background-color: rgba(0,77,255,0.7);\n}\n\n.spinner div:nth-child(4) {\n animation-delay: 0.6s;\n background-color: rgba(0,77,255,0.6);\n}\n\n.spinner div:nth-child(5) {\n animation-delay: 0.75s;\n background-color: rgba(0,77,255,0.5);\n}\n\n@keyframes spinner-4t3wzl {\n 0% {\n transform: rotate(0deg) translateY(-200%);\n }\n\n 60%, 100% {\n transform: rotate(360deg) translateY(-200%);\n }\n}"}]}},"actionData":null,"errors":null}