{"loaderData":{"0":null,"0-3":{"total":7422,"projects":[{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"d20c20","snapshot":null,"tags":null,"title":"loader by milley69","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":275,"cssLen":435,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n stroke: #ff4d5033;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #ff4d4f;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 1.4s linear infinite;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"8dd56c","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":131,"cssLen":6633,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".typewriter {\n --blue: #5C86FF;\n --blue-dark: #275EFE;\n --key: #fff;\n --paper: #EEF0FD;\n --text: #D3D4EC;\n --tool: #FBC56C;\n --duration: 3s;\n position: relative;\n -webkit-animation: bounce05 var(--duration) linear infinite;\n animation: bounce05 var(--duration) linear infinite;\n}\n\n.typewriter .slide {\n width: 92px;\n height: 20px;\n border-radius: 3px;\n margin-left: 14px;\n transform: translateX(14px);\n background: linear-gradient(var(--blue), var(--blue-dark));\n -webkit-animation: slide05 var(--duration) ease infinite;\n animation: slide05 var(--duration) ease infinite;\n}\n\n.typewriter .slide:before, .typewriter .slide:after,\n.typewriter .slide i:before {\n content: \"\";\n position: absolute;\n background: var(--tool);\n}\n\n.typewriter .slide:before {\n width: 2px;\n height: 8px;\n top: 6px;\n left: 100%;\n}\n\n.typewriter .slide:after {\n left: 94px;\n top: 3px;\n height: 14px;\n width: 6px;\n border-radius: 3px;\n}\n\n.typewriter .slide i {\n display: block;\n position: absolute;\n right: 100%;\n width: 6px;\n height: 4px;\n top: 4px;\n background: var(--tool);\n}\n\n.typewriter .slide i:before {\n right: 100%;\n top: -2px;\n width: 4px;\n border-radius: 2px;\n height: 14px;\n}\n\n.typewriter .paper {\n position: absolute;\n left: 24px;\n top: -26px;\n width: 40px;\n height: 46px;\n border-radius: 5px;\n background: var(--paper);\n transform: translateY(46px);\n -webkit-animation: paper05 var(--duration) linear infinite;\n animation: paper05 var(--duration) linear infinite;\n}\n\n.typewriter .paper:before {\n content: \"\";\n position: absolute;\n left: 6px;\n right: 6px;\n top: 7px;\n border-radius: 2px;\n height: 4px;\n transform: scaleY(0.8);\n background: var(--text);\n box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);\n}\n\n.typewriter .keyboard {\n width: 120px;\n height: 56px;\n margin-top: -10px;\n z-index: 1;\n position: relative;\n}\n\n.typewriter .keyboard:before, .typewriter .keyboard:after {\n content: \"\";\n position: absolute;\n}\n\n.typewriter .keyboard:before {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 7px;\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\n transform: perspective(10px) rotateX(2deg);\n transform-origin: 50% 100%;\n}\n\n.typewriter .keyboard:after {\n left: 2px;\n top: 25px;\n width: 11px;\n height: 4px;\n border-radius: 2px;\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n -webkit-animation: keyboard05 var(--duration) linear infinite;\n animation: keyboard05 var(--duration) linear infinite;\n}\n\n@keyframes bounce05 {\n 85%, 92%, 100% {\n transform: translateY(0);\n }\n\n 89% {\n transform: translateY(-4px);\n }\n\n 95% {\n transform: translateY(2px);\n }\n}\n\n@keyframes slide05 {\n 5% {\n transform: translateX(14px);\n }\n\n 15%, 30% {\n transform: translateX(6px);\n }\n\n 40%, 55% {\n transform: translateX(0);\n }\n\n 65%, 70% {\n transform: translateX(-4px);\n }\n\n 80%, 89% {\n transform: translateX(-12px);\n }\n\n 100% {\n transform: translateX(14px);\n }\n}\n\n@keyframes paper05 {\n 5% {\n transform: translateY(46px);\n }\n\n 20%, 30% {\n transform: translateY(34px);\n }\n\n 40%, 55% {\n transform: translateY(22px);\n }\n\n 65%, 70% {\n transform: translateY(10px);\n }\n\n 80%, 85% {\n transform: translateY(0);\n }\n\n 92%, 100% {\n transform: translateY(46px);\n }\n}\n\n@keyframes keyboard05 {\n 5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 9% {\n box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 18% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 27% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 36% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 45% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 54% {\n box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 63% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);\n }\n\n 72% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 81% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"a369a7","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":593,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n width: 3em;\n height: 3em;\n cursor: not-allowed;\n border-radius: 50%;\n border: 2px solid #444;\n box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700;\n animation: rot55 0.7s linear infinite;\n}\n\n.spinnerin {\n border: 2px solid #444;\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@keyframes rot55 {\n to {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"1bb981","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":491,"cssLen":3106,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n font-size: 28px;\n position: relative;\n display: inline-block;\n width: 1em;\n height: 1em;\n}\n\n.spinner.center {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n}\n\n.spinner .spinner-blade {\n position: absolute;\n left: 0.4629em;\n bottom: 0;\n width: 0.074em;\n height: 0.2777em;\n border-radius: 0.0555em;\n background-color: transparent;\n -webkit-transform-origin: center -0.2222em;\n -ms-transform-origin: center -0.2222em;\n transform-origin: center -0.2222em;\n animation: spinner-fade9234 1s infinite linear;\n}\n\n.spinner .spinner-blade:nth-child(1) {\n -webkit-animation-delay: 0s;\n animation-delay: 0s;\n -webkit-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n transform: rotate(0deg);\n}\n\n.spinner .spinner-blade:nth-child(2) {\n -webkit-animation-delay: 0.083s;\n animation-delay: 0.083s;\n -webkit-transform: rotate(30deg);\n -ms-transform: rotate(30deg);\n transform: rotate(30deg);\n}\n\n.spinner .spinner-blade:nth-child(3) {\n -webkit-animation-delay: 0.166s;\n animation-delay: 0.166s;\n -webkit-transform: rotate(60deg);\n -ms-transform: rotate(60deg);\n transform: rotate(60deg);\n}\n\n.spinner .spinner-blade:nth-child(4) {\n -webkit-animation-delay: 0.249s;\n animation-delay: 0.249s;\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n.spinner .spinner-blade:nth-child(5) {\n -webkit-animation-delay: 0.332s;\n animation-delay: 0.332s;\n -webkit-transform: rotate(120deg);\n -ms-transform: rotate(120deg);\n transform: rotate(120deg);\n}\n\n.spinner .spinner-blade:nth-child(6) {\n -webkit-animation-delay: 0.415s;\n animation-delay: 0.415s;\n -webkit-transform: rotate(150deg);\n -ms-transform: rotate(150deg);\n transform: rotate(150deg);\n}\n\n.spinner .spinner-blade:nth-child(7) {\n -webkit-animation-delay: 0.498s;\n animation-delay: 0.498s;\n -webkit-transform: rotate(180deg);\n -ms-transform: rotate(180deg);\n transform: rotate(180deg);\n}\n\n.spinner .spinner-blade:nth-child(8) {\n -webkit-animation-delay: 0.581s;\n animation-delay: 0.581s;\n -webkit-transform: rotate(210deg);\n -ms-transform: rotate(210deg);\n transform: rotate(210deg);\n}\n\n.spinner .spinner-blade:nth-child(9) {\n -webkit-animation-delay: 0.664s;\n animation-delay: 0.664s;\n -webkit-transform: rotate(240deg);\n -ms-transform: rotate(240deg);\n transform: rotate(240deg);\n}\n\n.spinner .spinner-blade:nth-child(10) {\n -webkit-animation-delay: 0.747s;\n animation-delay: 0.747s;\n -webkit-transform: rotate(270deg);\n -ms-transform: rotate(270deg);\n transform: rotate(270deg);\n}\n\n.spinner .spinner-blade:nth-child(11) {\n -webkit-animation-delay: 0.83s;\n animation-delay: 0.83s;\n -webkit-transform: rotate(300deg);\n -ms-transform: rotate(300deg);\n transform: rotate(300deg);\n}\n\n.spinner .spinner-blade:nth-child(12) {\n -webkit-animation-delay: 0.913s;\n animation-delay: 0.913s;\n -webkit-transform: rotate(330deg);\n -ms-transform: rotate(330deg);\n transform: rotate(330deg);\n}\n\n@keyframes spinner-fade9234 {\n 0% {\n background-color: #69717d;\n }\n\n 100% {\n background-color: transparent;\n }\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"bbab81","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":542,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: block;\n --height-of-loader: 4px;\n --loader-color: #0071e2;\n width: 130px;\n height: var(--height-of-loader);\n border-radius: 30px;\n background-color: rgba(0,0,0,0.2);\n position: relative;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n background: var(--loader-color);\n top: 0;\n left: 0;\n width: 0%;\n height: 100%;\n border-radius: 30px;\n animation: moving 1s ease-in-out infinite;\n ;\n}\n\n@keyframes moving {\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0;\n right: 0;\n left: unset;\n }\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"075c24","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":108,"cssLen":899,"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

","css":".loading {\n --speed-of-animation: 0.9s;\n --gap: 6px;\n --first-color: #4c86f9;\n --second-color: #49a84c;\n --third-color: #f6bb02;\n --fourth-color: #f6bb02;\n --fifth-color: #2196f3;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100px;\n gap: 6px;\n height: 100px;\n}\n\n.loading span {\n width: 4px;\n height: 50px;\n background: var(--first-color);\n animation: scale var(--speed-of-animation) ease-in-out infinite;\n}\n\n.loading span:nth-child(2) {\n background: var(--second-color);\n animation-delay: -0.8s;\n}\n\n.loading span:nth-child(3) {\n background: var(--third-color);\n animation-delay: -0.7s;\n}\n\n.loading span:nth-child(4) {\n background: var(--fourth-color);\n animation-delay: -0.6s;\n}\n\n.loading span:nth-child(5) {\n background: var(--fifth-color);\n animation-delay: -0.5s;\n}\n\n@keyframes scale {\n 0%, 40%, 100% {\n transform: scaleY(0.05);\n }\n\n 20% {\n transform: scaleY(1);\n }\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"df6c84","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":215,"cssLen":1344,"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: 240px;\n height: 130px;\n margin-bottom: 10px;\n border: 1px solid #d3d3d3;\n padding: 15px;\n background-color: #e3e3e3;\n overflow: hidden;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: linear-gradient(110deg, rgba(227, 227, 227, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%);\n animation: gradient-animation_2 1.2s linear infinite;\n}\n\n.loader .wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.loader .wrapper > div {\n background-color: #cacaca;\n}\n\n.loader .circle {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n}\n\n.loader .button {\n display: inline-block;\n height: 32px;\n width: 75px;\n}\n\n.loader .line-1 {\n position: absolute;\n top: 11px;\n left: 58px;\n height: 10px;\n width: 100px;\n}\n\n.loader .line-2 {\n position: absolute;\n top: 34px;\n left: 58px;\n height: 10px;\n width: 150px;\n}\n\n.loader .line-3 {\n position: absolute;\n top: 57px;\n left: 0px;\n height: 10px;\n width: 100%;\n}\n\n.loader .line-4 {\n position: absolute;\n top: 80px;\n left: 0px;\n height: 10px;\n width: 92%;\n}\n\n@keyframes gradient-animation_2 {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(100%);\n }\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"8c1217","snapshot":null,"tags":null,"title":"loader by Admin12121","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":13443,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --duration: 3s;\n --primary: rgba(39, 94, 254, 1);\n --primary-light: #2f71ff;\n --primary-rgba: rgba(39, 94, 254, 0);\n width: 200px;\n height: 320px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 480px) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 320px;\n height: 140px;\n position: absolute;\n right: 32%;\n bottom: -11px;\n/* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(200px) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -50px;\n bottom: -120px;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n width: 200px;\n height: 200px;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 44px;\n --y: 162px;\n --z: -50px;\n content: \"\";\n width: 156px;\n height: 300px;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 177px;\n --z: 150px;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 48px;\n height: 48px;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 24px;\n --y: -24px;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n filter: brightness(var(--b, 1.2));\n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 24px;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -220px;\n --y: -120px;\n left: 58px;\n top: 108px;\n}\n\n.loader .box.box1 {\n --x: -260px;\n --y: 120px;\n left: 25px;\n top: 120px;\n}\n\n.loader .box.box2 {\n --x: 120px;\n --y: -190px;\n left: 58px;\n top: 64px;\n}\n\n.loader .box.box3 {\n --x: 280px;\n --y: -40px;\n left: 91px;\n top: 120px;\n}\n\n.loader .box.box4 {\n --x: 60px;\n --y: 200px;\n left: 58px;\n top: 132px;\n}\n\n.loader .box.box5 {\n --x: -220px;\n --y: -120px;\n left: 25px;\n top: 76px;\n}\n\n.loader .box.box6 {\n --x: -260px;\n --y: 120px;\n left: 91px;\n top: 76px;\n}\n\n.loader .box.box7 {\n --x: -240px;\n --y: 200px;\n left: 58px;\n top: 87px;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"a9b82c","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1711,"cssLen":5023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes snow {\n 0% {\n opacity: 0;\n transform: translateY(0px);\n }\n\n 20% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n transform: translateY(650px);\n }\n}\n\n@keyframes astronaut {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.box-of-star1,\n.box-of-star2,\n.box-of-star3,\n.box-of-star4 {\n width: 100%;\n position: absolute;\n z-index: 10;\n left: 0;\n top: 0;\n transform: translateY(0px);\n height: 700px;\n}\n\n.box-of-star1 {\n animation: snow 5s linear infinite;\n}\n\n.box-of-star2 {\n animation: snow 5s -1.64s linear infinite;\n}\n\n.box-of-star3 {\n animation: snow 5s -2.30s linear infinite;\n}\n\n.box-of-star4 {\n animation: snow 5s -3.30s linear infinite;\n}\n\n.star {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background-color: #FFF;\n position: absolute;\n z-index: 10;\n opacity: 0.7;\n}\n\n.star:before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #FFF;\n position: absolute;\n z-index: 10;\n top: 80px;\n left: 70px;\n opacity: .7;\n}\n\n.star:after {\n content: \"\";\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #FFF;\n position: absolute;\n z-index: 10;\n top: 8px;\n left: 170px;\n opacity: .9;\n}\n\n.star-position1 {\n top: 30px;\n left: 20px;\n}\n\n.star-position2 {\n top: 110px;\n left: 250px;\n}\n\n.star-position3 {\n top: 60px;\n left: 570px;\n}\n\n.star-position4 {\n top: 120px;\n left: 900px;\n}\n\n.star-position5 {\n top: 20px;\n left: 1120px;\n}\n\n.star-position6 {\n top: 90px;\n left: 1280px;\n}\n\n.star-position7 {\n top: 30px;\n left: 1480px;\n}\n\n.astronaut {\n width: 250px;\n height: 300px;\n position: absolute;\n z-index: 11;\n top: calc(50% - 150px);\n left: calc(50% - 125px);\n animation: astronaut 5s linear infinite;\n}\n\n.schoolbag {\n width: 100px;\n height: 150px;\n position: absolute;\n z-index: 1;\n top: calc(50% - 75px);\n left: calc(50% - 50px);\n background-color: #94b7ca;\n border-radius: 50px 50px 0 0 / 30px 30px 0 0;\n}\n\n.head {\n width: 97px;\n height: 80px;\n position: absolute;\n z-index: 3;\n background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);\n border-radius: 50%;\n top: 34px;\n left: calc(50% - 47.5px);\n}\n\n.head:after {\n content: \"\";\n width: 60px;\n height: 50px;\n position: absolute;\n top: calc(50% - 25px);\n left: calc(50% - 30px);\n background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);\n border-radius: 15px;\n}\n\n.head:before {\n content: \"\";\n width: 12px;\n height: 25px;\n position: absolute;\n top: calc(50% - 12.5px);\n left: -4px;\n background-color: #618095;\n border-radius: 5px;\n box-shadow: 92px 0px 0px #618095;\n}\n\n.body {\n width: 85px;\n height: 100px;\n position: absolute;\n z-index: 2;\n background-color: #fffbff;\n border-radius: 40px / 20px;\n top: 105px;\n left: calc(50% - 41px);\n background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);\n}\n\n.panel {\n width: 60px;\n height: 40px;\n position: absolute;\n top: 20px;\n left: calc(50% - 30px);\n background-color: #b7cceb;\n}\n\n.panel:before {\n content: \"\";\n width: 30px;\n height: 5px;\n position: absolute;\n top: 9px;\n left: 7px;\n background-color: #fbfdfa;\n box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;\n}\n\n.panel:after {\n content: \"\";\n width: 8px;\n height: 8px;\n position: absolute;\n top: 9px;\n right: 7px;\n background-color: #fbfdfa;\n border-radius: 50%;\n box-shadow: 0px 14px 0px 2px #fbfdfa;\n}\n\n.arm {\n width: 80px;\n height: 30px;\n position: absolute;\n top: 121px;\n z-index: 2;\n}\n\n.arm-left {\n left: 30px;\n background-color: #e3e8eb;\n border-radius: 0 0 0 39px;\n}\n\n.arm-right {\n right: 30px;\n background-color: #fbfdfa;\n border-radius: 0 0 39px 0;\n}\n\n.arm-left:before,\n.arm-right:before {\n content: \"\";\n width: 30px;\n height: 70px;\n position: absolute;\n top: -40px;\n}\n\n.arm-left:before {\n border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;\n left: 0;\n background-color: #e3e8eb;\n}\n\n.arm-right:before {\n border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;\n right: 0;\n background-color: #fbfdfa;\n}\n\n.arm-left:after,\n.arm-right:after {\n content: \"\";\n width: 30px;\n height: 10px;\n position: absolute;\n top: -24px;\n}\n\n.arm-left:after {\n background-color: #6e91a4;\n left: 0;\n}\n\n.arm-right:after {\n right: 0;\n background-color: #b6d2e0;\n}\n\n.leg {\n width: 30px;\n height: 40px;\n position: absolute;\n z-index: 2;\n bottom: 70px;\n}\n\n.leg-left {\n left: 76px;\n background-color: #e3e8eb;\n transform: rotate(20deg);\n}\n\n.leg-right {\n right: 73px;\n background-color: #fbfdfa;\n transform: rotate(-20deg);\n}\n\n.leg-left:before,\n.leg-right:before {\n content: \"\";\n width: 50px;\n height: 25px;\n position: absolute;\n bottom: -26px;\n}\n\n.leg-left:before {\n left: -20px;\n background-color: #e3e8eb;\n border-radius: 30px 0 0 0;\n border-bottom: 10px solid #6d96ac;\n}\n\n.leg-right:before {\n right: -20px;\n background-color: #fbfdfa;\n border-radius: 0 30px 0 0;\n border-bottom: 10px solid #b0cfe4;\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"31cf8a","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":952,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 64px;\n height: 64px;\n position: relative;\n background: #FFF;\n border-radius: 4px;\n overflow: hidden;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 40px;\n height: 40px;\n transform: rotate(45deg) translate(30%, 40%);\n background: #ff9371;\n box-shadow: 32px -34px 0 5px #ff3d00;\n animation: slide 2s infinite ease-in-out alternate;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n left: 10px;\n top: 10px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #ff3d00;\n transform: rotate(0deg);\n transform-origin: 35px 145px;\n animation: rotate 2s infinite ease-in-out;\n}\n\n@keyframes slide {\n 0% , 100% {\n bottom: -35px\n }\n\n 25% , 75% {\n bottom: -2px\n }\n\n 20% , 80% {\n bottom: 2px\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(-15deg)\n }\n\n 25% , 75% {\n transform: rotate(0deg)\n }\n\n 100% {\n transform: rotate(25deg)\n }\n}\n "},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"cc1480","snapshot":null,"tags":null,"title":"loader by andrew-demchenk0","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":251,"cssLen":1529,"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

","css":".pyramid-loader {\n position: relative;\n width: 300px;\n height: 300px;\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/* you can choose any gradient or color you want */\n /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */\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: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);\n}\n\n.pyramid-loader .wrapper .side2 {\n transform: rotateZ(30deg) rotateY(90deg);\n background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);\n}\n\n.pyramid-loader .wrapper .side3 {\n transform: rotateX(30deg);\n background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);\n}\n\n.pyramid-loader .wrapper .side4 {\n transform: rotateX(-30deg);\n background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);\n}\n\n.pyramid-loader .wrapper .shadow {\n width: 60px;\n height: 60px;\n background: #8B5AD5;\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:52:39.000Z","isPrivate":0,"projectId":"afe741","snapshot":null,"tags":null,"title":"loader by andrew-demchenk0","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":1379,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".glitch {\n position: relative;\n font-size: 25px;\n font-weight: 700;\n line-height: 1.2;\n color: #fff;\n letter-spacing: 5px;\n z-index: 1;\n animation: shift 1s ease-in-out infinite alternate;\n}\n\n.glitch:before,\n.glitch:after {\n display: block;\n content: attr(data-glitch);\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.8;\n}\n\n.glitch:before {\n animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;\n color: #8b00ff;\n z-index: -1;\n}\n\n.glitch:after {\n animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;\n color: #00e571;\n z-index: -2;\n}\n\n@keyframes glitch {\n 0% {\n transform: translate(0);\n }\n\n 20% {\n transform: translate(-3px, 3px);\n }\n\n 40% {\n transform: translate(-3px, -3px);\n }\n\n 60% {\n transform: translate(3px, 3px);\n }\n\n 80% {\n transform: translate(3px, -3px);\n }\n\n to {\n transform: translate(0);\n }\n}\n\n@keyframes shift {\n 0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {\n transform: skewX(0deg);\n }\n\n 41% {\n transform: skewX(10deg);\n }\n\n 42% {\n transform: skewX(-10deg);\n }\n\n 59% {\n transform: skewX(40deg) skewY(10deg);\n }\n\n 60% {\n transform: skewX(-40deg) skewY(-10deg);\n }\n\n 63% {\n transform: skewX(10deg) skewY(-5deg);\n }\n\n 70% {\n transform: skewX(-50deg) skewY(-20deg);\n }\n\n 71% {\n transform: skewX(10deg) skewY(-10deg);\n }\n}\n"}]}},"actionData":null,"errors":null}