{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"7d71cf","snapshot":null,"tags":null,"title":"loader by jack0237","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":591,"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}\n\n.loader .dot {\n height: 20px;\n width: 20px;\n border-radius: 50%;\n border: 2px solid #212121;\n background: #16b0c1;\n animation: jump 0.8s ease-in-out infinite alternate;\n}\n\n@keyframes jump {\n 100% {\n background: #661e92;\n transform: translateY(-3rem) scale(1.9);\n }\n}\n\n.loader .dot:nth-child(1) {\n animation-delay: 0.1s;\n}\n\n.loader .dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.loader .dot:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n.loader .dot:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.loader .dot:nth-child(5) {\n animation-delay: 0.5s;\n}\n"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"aeec82","snapshot":null,"tags":null,"title":"loader by EmmaxPlay","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":537,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n position: relative;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n}\n\n.spinner::before,\n.spinner:after {\n content: \"\";\n position: absolute;\n border-radius: inherit;\n}\n\n.spinner:before {\n width: 100%;\n height: 100%;\n background-image: linear-gradient(0deg, #ff00cc 0%, #333399 100%);\n animation: spin8932 .5s infinite linear;\n}\n\n.spinner:after {\n width: 85%;\n height: 85%;\n background-color: #212121;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@keyframes spin8932 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"0bc6db","snapshot":null,"tags":null,"title":"loader by xopc333","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":449,"cssLen":1083,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n width: 500px;\n height: 250px;\n}\n\n.circle {\n fill: #F25A33;\n}\n\n.circle-one {\n opacity: 0;\n}\n\n.svg-stroke {\n fill: transparent;\n stroke-dasharray: 46.82, 93.64;\n stroke-dashoffset: 46.82;\n stroke: #F25A33;\n opacity: 1;\n}\n\n.svg-wrap .svg-stroke {\n animation: stroke-start 1.6s linear, stroke-end 1.6s 0.8s linear infinite;\n}\n\n.svg-wrap .circle-one {\n animation: dot-one 0s 0.8s, move-dot 1.6s 0.8s linear infinite;\n}\n\n.svg-wrap .circle-two,\n.svg-wrap .circle-three {\n animation: move-dot 1.6s 0.8s linear infinite;\n}\n\n@keyframes dot-one {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes stroke-start {\n 50% {\n stroke-dashoffset: 46.82;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes stroke-end {\n 50% {\n stroke-dasharray: 46.82, 93.64;\n stroke-dashoffset: 0;\n transform: translateX(0);\n }\n\n 100% {\n stroke-dasharray: 0, 93.64;\n stroke-dashoffset: -46.82;\n transform: translateX(10px);\n }\n}\n\n@keyframes move-dot {\n 50% {\n transform: translateX(0);\n }\n\n 100% {\n transform: translateX(10px);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"663284","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":681,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 160px;\n height: 160px;\n color: #0000F4;\n background: conic-gradient(from 165deg at top ,#0000, currentColor 1deg 30deg,#0000 31deg) top,\n conic-gradient(from 75deg at left ,#0000, currentColor 1deg 30deg,#0000 31deg) left,\n conic-gradient(from -15deg at bottom,#0000, currentColor 1deg 30deg,#0000 31deg) bottom, \n conic-gradient(from -105deg at right ,#0000, currentColor 1deg 30deg,#0000 31deg) right;\n background-size: 100% 50%,50% 100%;\n -webkit-mask: radial-gradient(circle 10px,#0000 90%,#000);\n background-repeat: no-repeat;\n animation: sh1 1.5s infinite linear;\n}\n\n@keyframes sh1 {\n \n 100% {\n transform: rotate(1turn)\n }\n}\n \n"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"4f6389","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 8px;\n height: 8px;\n position: relative;\n border-radius: 50%;\n background: #fff;\n animation: wave_14 1s ease-in infinite;\n}\n\n@keyframes wave_14 {\n 0% {\n box-shadow: 0 0 0 0px rgba(255, 255,255, 1),\n 0 0 0 20px rgba(255, 255,255, 0.2),\n 0 0 0 40px rgba(255, 255,255, 0.6),\n 0 0 0 60px rgba(255, 255,255, 0.4),\n 0 0 0 80px rgba(255, 255,255, 0.2)\n }\n\n 100% {\n box-shadow: 0 0 0 80px rgba(255, 255,255, 0),\n 0 0 0 60px rgba(255, 255,255, 0.2),\n 0 0 0 40px rgba(255, 255,255, 0.4),\n 0 0 0 20px rgba(255, 255,255, 0.6),\n 0 0 0 0px rgba(255, 255,255, 1)\n }\n}\n\n\n "},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"8ff4a2","snapshot":null,"tags":null,"title":"loader by fox-tech0","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":504,"cssLen":4234,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n left: 50%;\n margin: auto -50px;\n position: absolute;\n top: 50%;\n}\n\n.swing div {\n border-radius: 50%;\n float: left;\n height: 1em;\n width: 1em;\n}\n\n.swing div:nth-of-type(1) {\n background: -webkit-linear-gradient(left, #385c78 0%, #325774 100%);\n background: linear-gradient(to right, #385c78 0%, #325774 100%);\n}\n\n.swing div:nth-of-type(2) {\n background: -webkit-linear-gradient(left, #325774 0%, #47536a 100%);\n background: linear-gradient(to right, #325774 0%, #47536a 100%);\n}\n\n.swing div:nth-of-type(3) {\n background: -webkit-linear-gradient(left, #4a5369 0%, #6b4d59 100%);\n background: linear-gradient(to right, #4a5369 0%, #6b4d59 100%);\n}\n\n.swing div:nth-of-type(4) {\n background: -webkit-linear-gradient(left, #744c55 0%, #954646 100%);\n background: linear-gradient(to right, #744c55 0%, #954646 100%);\n}\n\n.swing div:nth-of-type(5) {\n background: -webkit-linear-gradient(left, #9c4543 0%, #bb4034 100%);\n background: linear-gradient(to right, #9c4543 0%, #bb4034 100%);\n}\n\n.swing div:nth-of-type(6) {\n background: -webkit-linear-gradient(left, #c33f31 0%, #d83b27 100%);\n background: linear-gradient(to right, #c33f31 0%, #d83b27 100%);\n}\n\n.swing div:nth-of-type(7) {\n background: -webkit-linear-gradient(left, #da3b26 0%, #db412c 100%);\n background: linear-gradient(to right, #da3b26 0%, #db412c 100%);\n}\n\n.shadow {\n clear: left;\n padding-top: 1.5em;\n}\n\n.shadow div {\n -webkit-filter: blur(1px);\n filter: blur(1px);\n float: left;\n width: 1em;\n height: .25em;\n border-radius: 50%;\n background: #e3dbd2;\n}\n\n.shadow .shadow-l {\n background: #d5d8d6;\n}\n\n.shadow .shadow-r {\n background: #eed3ca;\n}\n\n@-webkit-keyframes ball-l53 {\n 0%, 50% {\n -webkit-transform: rotate(0) translateX(0);\n transform: rotate(0) translateX(0);\n }\n\n 100% {\n -webkit-transform: rotate(50deg) translateX(-2.5em);\n transform: rotate(50deg) translateX(-2.5em);\n }\n}\n\n@keyframes ball-l53 {\n 0%, 50% {\n -webkit-transform: rotate(0) translate(0);\n transform: rotate(0) translateX(0);\n }\n\n 100% {\n -webkit-transform: rotate(50deg) translateX(-2.5em);\n transform: rotate(50deg) translateX(-2.5em);\n }\n}\n\n@-webkit-keyframes ball-r53 {\n 0% {\n -webkit-transform: rotate(-50deg) translateX(2.5em);\n transform: rotate(-50deg) translateX(2.5em);\n }\n\n 50%,\n 100% {\n -webkit-transform: rotate(0) translateX(0);\n transform: rotate(0) translateX(0);\n }\n}\n\n@keyframes ball-r53 {\n 0% {\n -webkit-transform: rotate(-50deg) translateX(2.5em);\n transform: rotate(-50deg) translateX(2.5em);\n }\n\n 50%,\n 100% {\n -webkit-transform: rotate(0) translateX(0);\n transform: rotate(0) translateX(0)\n }\n}\n\n@-webkit-keyframes shadow-l-n53 {\n 0%, 50% {\n opacity: .5;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: .125;\n -webkit-transform: translateX(-1.57em);\n transform: translateX(-1.75em);\n }\n}\n\n@keyframes shadow-l-n53 {\n 0%, 50% {\n opacity: .5;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 100% {\n opacity: .125;\n -webkit-transform: translateX(-1.75);\n transform: translateX(-1.75em);\n }\n}\n\n@-webkit-keyframes shadow-r-n53 {\n 0% {\n opacity: .125;\n -webkit-transform: translateX(1.75em);\n transform: translateX(1.75em);\n }\n\n 50%,\n 100% {\n opacity: .5;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes shadow-r-n53 {\n 0% {\n opacity: .125;\n -webkit-transform: translateX(1.75em);\n transform: translateX(1.75em);\n }\n\n 50%,\n 100% {\n opacity: .5;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.swing-l {\n -webkit-animation: ball-l53 .425s ease-in-out infinite alternate;\n animation: ball-l53 .425s ease-in-out infinite alternate;\n}\n\n.swing-r {\n -webkit-animation: ball-r53 .425s ease-in-out infinite alternate;\n animation: ball-r53 .425s ease-in-out infinite alternate;\n}\n\n.shadow-l {\n -webkit-animation: shadow-l-n53 .425s ease-in-out infinite alternate;\n animation: shadow-l-n53 .425s ease-in-out infinite alternate;\n}\n\n.shadow-r {\n -webkit-animation: shadow-r-n53 .425s ease-in-out infinite alternate;\n animation: shadow-r-n53 .425s ease-in-out infinite alternate;\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"09ea84","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":838,"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 transform: scale(2);\n border-radius: 50%;\n border: 1px solid;\n width: 30px;\n height: 30px;\n color: white;\n}\n\n.loader::after {\n position: absolute;\n width: 0px;\n height: 10px;\n display: block;\n border-left: 1px solid #fff;\n content: '';\n left: 14px;\n border-radius: 1px;\n top: 4px;\n animation-duration: 1s;\n}\n\n.loader::before {\n position: absolute;\n width: 0px;\n height: 10px;\n display: block;\n border-left: 1px solid #fff;\n content: '';\n left: 14px;\n border-radius: 1px;\n top: 4px;\n animation-duration: 40s;\n}\n\n.loader::before,.loader::after {\n transform-origin: bottom;\n animation-name: dial;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n\n@keyframes dial {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"104812","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":1359,"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 position: relative;\n width: 150px;\n height: 150px;\n background: transparent;\n border-radius: 50%;\n box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.55);\n border: 1px solid #333;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n inset: 20px;\n background: transparent;\n border: 1px dashed #444;\n border-radius: 50%;\n box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),\n inset 5px 5px 35px rgba(0, 0, 0, 0.25);\n}\n\n.loader::after {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 1px dashed #444;\n box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),\n inset 5px 5px 35px rgba(0, 0, 0, 0.25);\n}\n\n.loader span {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 100%;\n background: transparent;\n transform-origin: top left;\n animation: radar81 2s linear infinite;\n border-top: 1px dashed #e8a87c;\n}\n\n.loader span::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #7400b8;\n transform-origin: top left;\n transform: rotate(-55deg);\n filter: blur(30px) drop-shadow(20px 20px 20px #7400b8);\n}\n\n@keyframes radar81 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"de833e","snapshot":null,"tags":null,"title":"loader by codebykay101","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":522,"cssLen":1412,"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":".container {\n position: relative;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container .square {\n position: absolute;\n width: 200px;\n height: 200px;\n}\n\n.container .square:nth-child(2) {\n transform: translate(-25%, -25%) rotateX(180deg);\n filter: hue-rotate(60deg);\n}\n\n.container .square:nth-child(3) {\n transform: translate(25%, 25%) rotate(180deg);\n filter: hue-rotate(180deg);\n}\n\n.container .square::before {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n background: #0f0;\n box-shadow: 0 0 0 8px #0f03, 0 0 0 15px #0f01;\n animation: animateSquare 4s linear infinite;\n}\n\n@keyframes animateSquare {\n 0% {\n transform: translate(2px,2px);\n }\n\n 25% {\n transform: translate(178px,2px);\n }\n\n 50% {\n transform: translate(178px,178px);\n }\n\n 75% {\n transform: translate(2px,178px);\n }\n\n 100% {\n transform: translate(2px,2px);\n }\n}\n\n.container .square span {\n position: absolute;\n inset: 10px;\n overflow: hidden;\n transform: rotate(calc(90deg * var(--i)));\n}\n\n.container .square span::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 4px;\n background: #0f0;\n transform: translateX(-100%);\n animation: animate 4s linear infinite;\n animation-delay: calc(1s * var(--i));\n}\n\n@keyframes animate {\n 0% {\n transform: translateX(-100%);\n }\n\n 50%,100% {\n transform: translateX(100%);\n }\n}"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"7d1ded","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2494,"cssLen":2210,"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: block;\n width: 8em;\n height: 8em;\n}\n\n.loader_ring {\n stroke: hsla(var(--hue), 90%, 5%, 0.1);\n transition: stroke 0.3s;\n}\n\n.loader_worm1,\n .loader_worm2,\n .loader_worm2-1 {\n animation: worm1 5s ease-in infinite;\n}\n\n.loader_worm1 {\n transform-origin: 64px 64px;\n}\n\n.loader_worm2,\n .loader_worm2-1 {\n transform-origin: 22px 22px;\n}\n\n.loader_worm2 {\n animation-name: worm2;\n animation-timing-function: linear;\n}\n\n.loader_worm2-1 {\n animation-name: worm2-1;\n stroke-dashoffset: 175.92;\n}\n\n /* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(var(--hue), 90%, 5%);\n --fg: hsl(var(--hue), 90%, 95%);\n }\n\n .loader_ring {\n stroke: hsla(var(--hue), 90%, 95%, 0.1);\n }\n}\n\n /* Animations */\n@keyframes worm1 {\n from,\n to {\n stroke-dashoffset: 0;\n }\n\n 12.5% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -175.91;\n }\n\n 25% {\n animation-timing-function: cubic-bezier(0, 0, 0.43, 1);\n stroke-dashoffset: -307.88;\n }\n\n 50% {\n animation-timing-function: ease-in;\n stroke-dashoffset: -483.8;\n }\n\n 62.5% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -307.88;\n }\n\n 75% {\n animation-timing-function: cubic-bezier(0, 0, 0.43, 1);\n stroke-dashoffset: -175.91;\n }\n}\n\n@keyframes worm2 {\n from,\n 12.5%,\n 75%,\n to {\n transform: rotate(0) translate(-42px, 0);\n }\n\n 25%,\n 62.5% {\n transform: rotate(0.5turn) translate(-42px, 0);\n }\n}\n\n@keyframes worm2-1 {\n from {\n stroke-dashoffset: 175.91;\n transform: rotate(0);\n }\n\n 12.5% {\n animation-timing-function: cubic-bezier(0, 0, 0.42, 1);\n stroke-dashoffset: 0;\n transform: rotate(0);\n }\n\n 25% {\n animation-timing-function: linear;\n stroke-dashoffset: 0;\n transform: rotate(1.5turn);\n }\n\n 37.5%,\n 50% {\n stroke-dashoffset: -175.91;\n transform: rotate(1.5turn);\n }\n\n 62.5% {\n animation-timing-function: cubic-bezier(0, 0, 0.42, 1);\n stroke-dashoffset: 0;\n transform: rotate(1.5turn);\n }\n\n 75% {\n animation-timing-function: linear;\n stroke-dashoffset: 0;\n transform: rotate(0);\n }\n\n 87.5%,\n to {\n stroke-dashoffset: 175.92;\n transform: rotate(0);\n }\n}"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"e5b6ff","snapshot":null,"tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":244,"cssLen":994,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-1 {\n width: 7em;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n font-size: 13px;\n}\n\n.dot {\n width: 0.7em;\n height: 0.7em;\n border-radius: 50%;\n background-color: #a52a2a;\n margin: 0.4rem;\n opacity: 0.6;\n font-size: 15px;\n}\n\n.dot:nth-child(1) {\n animation: animateLoader1 1.5s infinite;\n}\n\n.dot:nth-child(2) {\n animation: animateLoader1 1.3s infinite;\n}\n\n.dot:nth-child(3) {\n animation: animateLoader1 1.7s infinite;\n}\n\n.dot:nth-child(4) {\n animation: animateLoader1 1.1s infinite;\n}\n\n.dot:nth-child(5) {\n animation: animateLoader1 0.9s infinite;\n}\n\n.dot:nth-child(6) {\n animation: animateLoader1 0.7s infinite;\n}\n\n.dot:nth-child(7) {\n animation: animateLoader1 0.5s infinite;\n}\n\n.dot:nth-child(8) {\n animation: animateLoader1 1.3s infinite;\n}\n\n.dot:nth-child(9) {\n animation: animateLoader1 1.5s infinite;\n}\n\n@keyframes animateLoader1 {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.5);\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.6;\n }\n}\n"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"1df1d1","snapshot":null,"tags":null,"title":"loader by pedertanberg","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":38,"cssLen":839,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n transform: rotate(45deg);\n transform-origin: 40px 40px;\n}\n\n.loader div {\n top: 32px;\n left: 32px;\n position: absolute;\n width: 32px;\n height: 32px;\n background: red;\n animation: loader45 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.loader div:after,\n.loader div:before {\n content: \" \";\n position: absolute;\n display: block;\n width: 32px;\n height: 32px;\n background: red;\n}\n\n.loader div:before {\n left: -24px;\n border-radius: 50% 0 0 50%;\n}\n\n.loader div:after {\n top: -24px;\n border-radius: 50% 50% 0 0;\n}\n\n@keyframes loader45 {\n 0% {\n transform: scale(0.95);\n }\n\n 5% {\n transform: scale(1.1);\n }\n\n 39% {\n transform: scale(0.85);\n }\n\n 45% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(0.9);\n }\n}"}]}},"actionData":null,"errors":null}