{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"f9a58b","snapshot":null,"tags":null,"title":"loader by faxriddin20","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":363,"cssLen":2386,"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","css":".loader {\n --path: #2f3545;\n --dot: rgb(191, 64, 191);\n --duration: 3s;\n width: 44px;\n height: 44px;\n position: relative;\n}\n\n.loader:before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n display: block;\n background: var(--dot);\n top: 37px;\n left: 19px;\n transform: translate(-18px, -18px);\n animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.loader svg rect,\n.loader svg polygon,\n.loader svg circle {\n fill: none;\n stroke: var(--path);\n stroke-width: 10px;\n stroke-linejoin: round;\n stroke-linecap: round;\n}\n\n.loader svg polygon {\n stroke-dasharray: 145 76 145 76;\n stroke-dashoffset: 0;\n animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader svg rect {\n stroke-dasharray: 192 64 192 64;\n stroke-dashoffset: 0;\n animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg circle {\n stroke-dasharray: 150 50 150 50;\n stroke-dashoffset: 75;\n animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader.triangle {\n width: 48px;\n}\n\n.loader.triangle:before {\n left: 21px;\n transform: translate(-10px, -18px);\n animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n@keyframes pathTriangle {\n 33% {\n stroke-dashoffset: 74;\n }\n\n 66% {\n stroke-dashoffset: 147;\n }\n\n 100% {\n stroke-dashoffset: 221;\n }\n}\n\n@keyframes dotTriangle {\n 33% {\n transform: translate(0, 0);\n }\n\n 66% {\n transform: translate(10px, -18px);\n }\n\n 100% {\n transform: translate(-10px, -18px);\n }\n}\n\n@keyframes pathRect {\n 25% {\n stroke-dashoffset: 64;\n }\n\n 50% {\n stroke-dashoffset: 128;\n }\n\n 75% {\n stroke-dashoffset: 192;\n }\n\n 100% {\n stroke-dashoffset: 256;\n }\n}\n\n@keyframes dotRect {\n 25% {\n transform: translate(0, 0);\n }\n\n 50% {\n transform: translate(18px, -18px);\n }\n\n 75% {\n transform: translate(0, -36px);\n }\n\n 100% {\n transform: translate(-18px, -18px);\n }\n}\n\n@keyframes pathCircle {\n 25% {\n stroke-dashoffset: 125;\n }\n\n 50% {\n stroke-dashoffset: 175;\n }\n\n 75% {\n stroke-dashoffset: 225;\n }\n\n 100% {\n stroke-dashoffset: 275;\n }\n}\n\n.loader {\n display: inline-block;\n margin: 0 16px;\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"05e013","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":293,"cssLen":1555,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".sun {\n position: relative;\n animation: rotate 4s linear infinite;\n --color: yellow;\n --scale: 0.4;\n}\n\n.center {\n height: calc(var(--scale) * 10em);\n width: calc(var(--scale) * 10em);\n background-color: var(--color);\n border-radius: 50%;\n box-shadow: 0 0 calc(var(--scale) * 3em) var(--color);\n}\n\n.ray {\n position: absolute;\n height: calc(var(--scale) * 3em);\n width: calc(var(--scale) * 0.5em);\n box-shadow: 0 0 calc(var(--scale) * 1em) var(--color);\n background-color: var(--color);\n}\n\n.r-1 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * 1em);\n}\n\n.r-2 {\n margin-left: calc(var(--scale) * 12.25em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-3 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * -14em);\n}\n\n.r-4 {\n margin-left: calc(var(--scale) * -2.75em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-5 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(45deg);\n}\n\n.r-6 {\n margin-left: calc(var(--scale) * 9.75em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(-45deg);\n}\n\n.r-7 {\n margin-left: calc(var(--scale) * 10.25em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(45deg);\n}\n\n.r-8 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(-45deg);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"2d423c","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":144,"cssLen":829,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n --dim: 3rem;\n width: var(--dim);\n height: var(--dim);\n position: relative;\n animation: spin988 2s linear infinite;\n}\n\n.loader .circle {\n --color: #333;\n --dim: 1.2rem;\n width: var(--dim);\n height: var(--dim);\n background-color: var(--color);\n position: absolute;\n}\n\n.loader .circle:nth-child(1) {\n top: 0;\n left: 0;\n}\n\n.loader .circle:nth-child(2) {\n top: 0;\n right: 0;\n}\n\n.loader .circle:nth-child(3) {\n bottom: 0;\n left: 0;\n}\n\n.loader .circle:nth-child(4) {\n bottom: 0;\n right: 0;\n}\n\n@keyframes spin988 {\n 0% {\n transform: scale(1) rotate(0);\n }\n\n 20%,\n 25% {\n transform: scale(1.3) rotate(90deg);\n }\n\n 45%,\n 50% {\n transform: scale(1) rotate(180deg);\n }\n\n 70%,\n 75% {\n transform: scale(1.3) rotate(270deg);\n }\n\n 95%,\n 100% {\n transform: scale(1) rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"285cae","snapshot":null,"tags":null,"title":"loader by Lmickk2","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":123,"cssLen":508,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n transition: all 0.4s;\n}\n\n.loader div {\n margin-left: 0.8rem;\n background-color: transparent;\n box-shadow: 0px 2px 2px black;\n border-radius: 3em;\n height: 1rem;\n width: 2rem;\n}\n\n.box-load1 {\n animation: brighten 1.5s infinite;\n}\n\n.box-load2 {\n animation: brighten 1.5s infinite;\n animation-delay: .3s;\n}\n\n.box-load3 {\n animation: brighten 1.5s infinite;\n animation-delay: .6s;\n}\n\n@keyframes brighten {\n 100% {\n background-color: black;\n box-shadow: none;\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"9798a5","snapshot":null,"tags":null,"title":"loader by aadium","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":367,"cssLen":1812,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".cloader {\n width: 10em;\n height: 10em;\n border: 4px solid white;\n border-radius: 50%;\n margin: 50px auto;\n position: relative;\n padding: 2rem;\n}\n\n.clface {\n position: relative;\n width: 100%;\n height: 100%;\n transform: translateY(-3px);\n}\n\n.top {\n height: 10px;\n width: 4px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -30px;\n margin-left: 42px;\n}\n\n.bottom {\n height: 10px;\n width: 4px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: 135px;\n margin-left: 42px;\n}\n\n.left {\n height: 4px;\n width: 10px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -82px;\n margin-left: 112px;\n}\n\n.right {\n height: 4px;\n width: 10px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -4px;\n margin-left: -35px;\n}\n\n.clsface {\n position: absolute;\n width: 40px;\n height: 40px;\n margin-left: 24px;\n margin-top: 15px;\n border-radius: 6em;\n border: 2px solid #636363;\n}\n\n.hand {\n width: 65%;\n height: 4px;\n background-color: white;\n border-radius: 3em;\n border: none;\n position: absolute;\n top: 85%;\n left: -15%;\n transform-origin: 100%;\n transform: rotate(90deg);\n}\n\n.pin {\n width: 25%;\n height: 25%;\n border-radius: 50%;\n background: white;\n position: absolute;\n top: 86%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#sub {\n width: 10%;\n height: 10%;\n border-radius: 50%;\n background: #636363;\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#h1 {\n animation: rotate 4s linear infinite;\n}\n\n#h2 {\n width: 45%;\n left: 5%;\n top: 45%;\n background-color: #636363;\n animation: rotate 1s linear infinite;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(90deg);\n }\n\n to {\n transform: rotate(450deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"40d7db","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1713,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n box-sizing: border-box;\n display: inline-block;\n width: 50px;\n height: 80px;\n border-top: 5px solid #fff;\n border-bottom: 5px solid #fff;\n position: relative;\n background: linear-gradient(#FF3D00 30px, transparent 0) no-repeat;\n background-size: 2px 40px;\n background-position: 50% 0px;\n animation: spinx 5s linear infinite;\n}\n\n.loader:before, .loader:after {\n content: \"\";\n width: 40px;\n left: 50%;\n height: 35px;\n position: absolute;\n top: 0;\n transform: translatex(-50%);\n background: rgba(255, 255, 255, 0.4);\n border-radius: 0 0 20px 20px;\n background-size: 100% auto;\n background-repeat: no-repeat;\n background-position: 0 0px;\n animation: lqt 5s linear infinite;\n}\n\n.loader:after {\n top: auto;\n bottom: 0;\n border-radius: 20px 20px 0 0;\n animation: lqb 5s linear infinite;\n}\n\n@keyframes lqt {\n 0%, 100% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0% 0px;\n }\n\n 50% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0% 40px;\n }\n\n 50.1% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0% -40px;\n }\n}\n\n@keyframes lqb {\n 0% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0 40px;\n }\n\n 100% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0 -40px;\n }\n}\n\n@keyframes spinx {\n 0%, 49% {\n transform: rotate(0deg);\n background-position: 50% 36px;\n }\n\n 51%, 98% {\n transform: rotate(180deg);\n background-position: 50% 4px;\n }\n\n 100% {\n transform: rotate(360deg);\n background-position: 50% 36px;\n }\n}\n \n \n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"e9d0f8","snapshot":null,"tags":null,"title":"loader by MyNameJeremy","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":832,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".neomorph-spinner {\n position: relative;\n width: 80px;\n height: 80px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n margin: auto;\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);\n}\n\n.neomorph-spinner > div {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: #004dff;\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);\n animation: spin_5113 1s ease infinite;\n}\n\n.neomorph-spinner > div:nth-child(1) {\n transform: rotate(0deg);\n}\n\n.neomorph-spinner > div:nth-child(2) {\n transform: rotate(90deg);\n}\n\n.neomorph-spinner > div:nth-child(3) {\n transform: rotate(180deg);\n}\n\n.neomorph-spinner > div:nth-child(4) {\n transform: rotate(270deg);\n}\n\n@keyframes spin_5113 {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"ef6071","snapshot":null,"tags":null,"title":"loader by fateself","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":678,"cssLen":683,"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 \n \n \n \n \n \n \n

","css":".loader {\n position: relative;\n width: 120px;\n height: 120px;\n}\n\n.loader span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: rotate(calc(18deg * var(--i)));\n}\n\n.loader span::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background: #00ff0a;\n box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a,\n 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a;\n animation: animate34 2s linear infinite;\n animation-delay: calc(0.1s * var(--i));\n}\n\n@keyframes animate34 {\n 0% {\n transform: scale(1);\n }\n\n 80%,\n 100% {\n transform: scale(0);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"63ed61","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":232,"cssLen":1778,"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 align-items: center;\n justify-content: center;\n}\n.panWrapper {\n width: 200px;\n height: fit-content;\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n flex-direction: column;\n gap: 20px;\n}\n\n.pan {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n width: 100%;\n height: fit-content;\n animation: cooking 1.7s infinite;\n}\n@keyframes cooking {\n 0% {\n transform: rotate(0deg);\n transform-origin: top right;\n }\n 10% {\n transform: rotate(-4deg);\n transform-origin: top right;\n }\n 50% {\n transform: rotate(20deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.food {\n position: absolute;\n width: 40%;\n height: 6px;\n background: linear-gradient(to bottom, rgb(82, 33, 33), rgb(200, 106, 106));\n left: 10px;\n border-radius: 50%;\n animation: flip 1.7s infinite;\n z-index: 2;\n}\n@keyframes flip {\n 0% {\n transform: translateY(0px) rotate(0deg);\n }\n 50% {\n transform: translateY(-100px) rotate(180deg);\n }\n 100% {\n transform: translateY(0px) rotate(360deg);\n }\n}\n.panBase {\n z-index: 3;\n width: 50%;\n height: 22px;\n border-bottom-left-radius: 40px;\n border-bottom-right-radius: 40px;\n background: linear-gradient(to top, rgb(3, 156, 156), rgb(10, 191, 191));\n}\n.panHandle {\n width: 40%;\n background: linear-gradient(to bottom, rgb(18, 18, 18), rgb(74, 74, 74));\n height: 10px;\n border-radius: 10px;\n}\n.panShadow {\n width: 70px;\n height: 8px;\n background-color: rgba(0, 0, 0, 0.21);\n margin-left: 15px;\n border-radius: 10px;\n animation: shadow 1.7s infinite;\n filter: blur(5px);\n}\n@keyframes shadow {\n 0% {\n transform: scaleX(0.7);\n }\n 50% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0.7);\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"86b5c5","snapshot":null,"tags":null,"title":"loader by Javierrocadev","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":296,"cssLen":537,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.animate-bounce{animation:bounce 1s infinite}.flex-row{flex-direction:row}.gap-2{gap:0.5rem}.rounded-full{border-radius:9999px}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.\\[animation-delay\\:-\\.3s\\]{animation-delay:-.3s}.\\[animation-delay\\:-\\.5s\\]{animation-delay:-.5s}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"853aa8","snapshot":null,"tags":null,"title":"loader by Cornerstone-04","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":239,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 60px;\n height: 60px;\n border: 10px solid #1cd42550;\n border-top-color: #1cd425;\n animation: spin013151 1s linear infinite;\n border-radius: 100%;\n}\n\n@keyframes spin013151 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"22e757","snapshot":null,"tags":null,"title":"loader by akshat-patel28","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1271,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 30px;\n}\n\n.box-1,.box-2,.box-3 {\n width: 1px;\n height: 115px;\n border: 1px solid #e9e9e9;\n background-color: transparent;\n box-sizing: border-box;\n}\n\n.box-1 {\n animation: box1animation 4s forwards ease-in-out infinite;\n}\n\n@keyframes box1animation {\n 0% {\n width: 1px;\n }\n\n 12.5% {\n width: 60px;\n }\n\n 25% {\n width: 60px;\n }\n\n 37.5% {\n width: 1px;\n }\n\n 50% {\n width: 1px;\n }\n\n 62.5% {\n width: 1px;\n }\n\n 75% {\n width: 1px;\n }\n\n 100% {\n width: 1px;\n }\n}\n\n.box-2 {\n animation: box2animation 4s forwards ease-in-out infinite;\n}\n\n@keyframes box2animation {\n 0% {\n width: 1px;\n }\n\n 12.5% {\n width: 1px;\n }\n\n 25% {\n width: 1px;\n }\n\n 37.5% {\n width: 60px;\n }\n\n 50% {\n width: 60px;\n }\n\n 62.5% {\n width: 1px;\n }\n\n 75% {\n width: 1px;\n }\n\n 100% {\n width: 1px;\n }\n}\n\n.box-3 {\n animation: box3animation 4s forwards ease-in-out infinite;\n}\n\n@keyframes box3animation {\n 0% {\n width: 1px;\n }\n\n 12.5% {\n width: 1px;\n }\n\n 25% {\n width: 1px;\n }\n\n 37.5% {\n width: 1px;\n }\n\n 50% {\n width: 1px;\n }\n\n 62.5% {\n width: 60px;\n }\n\n 75% {\n width: 60px;\n }\n\n 100% {\n width: 1px;\n }\n}"}]}},"actionData":null,"errors":null}