{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"742164","snapshot":null,"tags":null,"title":"loader by Li-Deheng","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":395,"cssLen":2149,"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: center;\n align-items: center;\n --color: hsl(0, 0%, 33%);\n --animation: 2s ease-in-out infinite;\n}\n\n.loader .circle {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 20px;\n height: 20px;\n border: solid 2px var(--color);\n border-radius: 50%;\n margin: 0 10px;\n background-color: transparent;\n animation: circle-keys var(--animation);\n}\n\n.loader .circle .dot {\n position: absolute;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background-color: var(--color);\n animation: dot-keys var(--animation);\n}\n\n.loader .circle .outline {\n position: absolute;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n animation: outline-keys var(--animation);\n}\n\n.circle:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.circle:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(4) {\n animation-delay: 0.9s;\n}\n\n.circle:nth-child(5) {\n animation-delay: 1.2s;\n}\n\n.circle:nth-child(2) .dot {\n animation-delay: 0.3s;\n}\n\n.circle:nth-child(3) .dot {\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(4) .dot {\n animation-delay: 0.9s;\n}\n\n.circle:nth-child(5) .dot {\n animation-delay: 1.2s;\n}\n\n.circle:nth-child(1) .outline {\n animation-delay: 0.9s;\n}\n\n.circle:nth-child(2) .outline {\n animation-delay: 1.2s;\n}\n\n.circle:nth-child(3) .outline {\n animation-delay: 1.5s;\n}\n\n.circle:nth-child(4) .outline {\n animation-delay: 1.8s;\n}\n\n.circle:nth-child(5) .outline {\n animation-delay: 2.1s;\n}\n\n@keyframes circle-keys {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1.5);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n@keyframes dot-keys {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes outline-keys {\n 0% {\n transform: scale(0);\n outline: solid 20px var(--color);\n outline-offset: 0;\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n outline: solid 0 transparent;\n outline-offset: 20px;\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"e9d5fb","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1201,"cssLen":83,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".loader {\n height: 20vh;\n width: 20vh;\n max-height: 480px;\n min-width: 480px;\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"176927","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":881,"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: 50px;\n aspect-ratio: 1;\n display: flex;\n color: orange;\n background: linear-gradient(currentColor 0 0) right / 51% 100%,\n linear-gradient(currentColor 0 0) bottom / 100% 51%;\n background-repeat: no-repeat;\n animation: l16-0 2s infinite linear 0.25s;\n}\n\n.loader::before {\n content: \"\";\n width: 50%;\n height: 50%;\n background: currentColor;\n animation: l16-1 0.5s infinite linear;\n}\n\n@keyframes l16-0 {\n 0%,\n 12.49% {\n transform: rotate(0deg);\n }\n\n 12.5%,\n 37.49% {\n transform: rotate(90deg);\n }\n\n 37.5%,\n 62.49% {\n transform: rotate(180deg);\n }\n\n 62.5%,\n 87.49% {\n transform: rotate(270deg);\n }\n\n 87.5%,\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes l16-1 {\n 0% {\n transform: perspective(80px) rotate3d(-1, -1, 0, 0);\n }\n\n 80%,\n 100% {\n transform: perspective(80px) rotate3d(-1, -1, 0, -180deg);\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"0fa350","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loading-bar {\n position: relative;\n width: 110px;\n height: 110px;\n background: transparent;\n border: px solid #3c3c3c;\n border-radius: 50%;\n text-align: center;\n line-height: 111px;\n font-family: sans-serif;\n font-size: 15px;\n color: #fff000;\n letter-spacing: 3px;\n text-transform: uppercase;\n text-shadow: 0 0 20px #fff000;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);\n}\n\n.loading-bar:before {\n content: \"\";\n position: absolute;\n top: -3px;\n left: -3px;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-top: 5px solid #fff000;\n border-right: 5px solid #fff000;\n border-radius: 50%;\n animation: animateC 2s linear infinite;\n}\n\n@keyframes animateC {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(45deg);\n }\n\n 100% {\n transform: rotate(405deg);\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"1755e0","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":1501,"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":"/* From cssbuttons.io by @satyamchaudharydev */\n.loader {\n --loader: rgb(221, 65, 226);\n --loader-size: 3px;\n position: relative;\n width: 40px;\n height: 40px;\n overflow: hidden;\n transition: .5s;\n letter-spacing: 2px\n}\n\n.loader span {\n position: absolute;\n}\n\n.loader span:nth-child(1) {\n top: 0;\n left: -100%;\n width: 100%;\n height: var(--loader-size);\n background: linear-gradient(90deg, transparent, var(--loader));\n animation: loader-anim1 1s linear infinite;\n}\n\n@keyframes loader-anim1 {\n 0% {\n left: -100%;\n }\n\n 50%,100% {\n left: 100%;\n }\n}\n\n.loader span:nth-child(2) {\n top: -100%;\n right: 0;\n width: var(--loader-size);\n height: 100%;\n background: linear-gradient(180deg, transparent, var(--loader));\n animation: loader-anim2 1s linear infinite;\n animation-delay: .25s\n}\n\n@keyframes loader-anim2 {\n 0% {\n top: -100%;\n }\n\n 50%,100% {\n top: 100%;\n }\n}\n\n.loader span:nth-child(3) {\n bottom: 0;\n right: -100%;\n width: 100%;\n height: var(--loader-size);\n background: linear-gradient(270deg, transparent, var(--loader));\n animation: loader-anim3 1s linear infinite;\n animation-delay: .5s\n}\n\n@keyframes loader-anim3 {\n 0% {\n right: -100%;\n }\n\n 50%,100% {\n right: 100%;\n }\n}\n\n.loader span:nth-child(4) {\n bottom: -100%;\n left: 0;\n width: var(--loader-size);\n height: 100%;\n background: linear-gradient(360deg, transparent, var(--loader));\n animation: loader-anim4 1s linear infinite;\n animation-delay: .75s\n}\n\n@keyframes loader-anim4 {\n 0% {\n bottom: -100%;\n }\n\n 50%,100% {\n bottom: 100%;\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"997d87","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":181,"cssLen":852,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n L\n O\n A\n D\n I\n N\n G\n

","css":".loader {\n -webkit-perspective: 700px;\n perspective: 700px;\n background: red;\n padding: 10px 20px;\n}\n\n.loader>span {\n font-size: 60px;\n font-family: \"franklin gothic medium\",sans-serif;\n display: inline-block;\n animation: flip 2.6s infinite linear;\n transform-origin: 0 70%;\n transform-style: preserve-3d;\n -webkit-transform-style: preserve-3d;\n}\n\n@keyframes flip {\n 35% {\n transform: rotatex(360deg);\n }\n\n 100% {\n transform: rotatex(360deg);\n }\n}\n\n.loader>span:nth-child(even) {\n color: white;\n}\n\n.loader>span:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.loader>span:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.loader>span:nth-child(4) {\n animation-delay: 0.9s;\n}\n\n.loader>span:nth-child(5) {\n animation-delay: 1.2s;\n}\n\n.loader>span:nth-child(6) {\n animation-delay: 1.5s\n}\n\n.loader>span:nth-child(7) {\n animation-delay: 1.8s\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"ef98e3","snapshot":null,"tags":null,"title":"loader by Cornerstone-04","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":726,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".loader {\n display: inline-block;\n width: 190px;\n height: 10px;\n border-radius: 40px;\n background-color: rgba(255, 255, 255, 1);\n position: relative;\n overflow: hidden;\n}\n\n.loader span {\n font: 700 22px monospace;\n text-transform: uppercase;\n margin: auto;\n color: #fff;\n letter-spacing: 5px;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -50px;\n width: 150%;\n height: 100%;\n background-image: linear-gradient(332deg, #6bff7f, #32ff3c);\n border-radius: inherit;\n transform: scaleX(0);\n transform-origin: left;\n animation: load5123 1s infinite;\n}\n\n@keyframes load5123 {\n 50% {\n transform: scaleX(1);\n }\n\n 100% {\n transform: scaleX(0);\n transform-origin: right;\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"26edb9","snapshot":null,"tags":null,"title":"loader by vk-uiux","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":485,"cssLen":1494,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-inner {\n width: 100px;\n height: 60px;\n margin: auto;\n position: absolute;\n inset: 0;\n}\n\n.loader-line-wrap {\n animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;\n width: 100px;\n height: 50px;\n left: 0;\n overflow: hidden;\n position: absolute;\n top: 0;\n transform-origin: 50% 100%;\n}\n\n.loader-line {\n border: 4px solid transparent;\n border-radius: 100%;\n width: 100px;\n height: 100px;\n margin: 0 auto;\n position: absolute;\n inset: 0;\n}\n\n.loader-line-wrap:nth-child(1) {\n animation-delay: -50ms;\n}\n\n.loader-line-wrap:nth-child(2) {\n animation-delay: -100ms;\n}\n\n.loader-line-wrap:nth-child(3) {\n animation-delay: -150ms;\n}\n\n.loader-line-wrap:nth-child(4) {\n animation-delay: -200ms;\n}\n\n.loader-line-wrap:nth-child(5) {\n animation-delay: -250ms;\n}\n\n.loader-line-wrap:nth-child(1) .loader-line {\n border-color: #eb4747;\n height: 90px;\n width: 90px;\n top: 7px;\n}\n\n.loader-line-wrap:nth-child(2) .loader-line {\n border-color: #ebeb47;\n height: 76px;\n width: 76px;\n top: 14px;\n}\n\n.loader-line-wrap:nth-child(3) .loader-line {\n border-color: #47eb47;\n height: 62px;\n width: 62px;\n top: 21px;\n}\n\n.loader-line-wrap:nth-child(4) .loader-line {\n border-color: #47ebeb;\n height: 48px;\n width: 48px;\n top: 28px;\n}\n\n.loader-line-wrap:nth-child(5) .loader-line {\n border-color: #4747eb;\n height: 34px;\n width: 34px;\n top: 35px;\n}\n\n@keyframes spin {\n 0%,\n 15% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"b5cdd3","snapshot":null,"tags":null,"title":"loader by juan-sued","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":156,"cssLen":2211,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".frame {\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -200px;\n margin-left: -200px;\n}\n\n.center {\n position: absolute;\n width: 220px;\n height: 220px;\n top: 90px;\n left: 90px;\n}\n\n.dot-1 {\n position: absolute;\n z-index: 3;\n width: 30px;\n height: 30px;\n top: 95px;\n left: 95px;\n background: #fff;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n.dot-2 {\n position: absolute;\n z-index: 2;\n width: 60px;\n height: 60px;\n top: 80px;\n left: 80px;\n background: #F0BE00;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n.dot-3 {\n position: absolute;\n z-index: 1;\n width: 90px;\n height: 90px;\n top: 65px;\n left: 65px;\n background: #D33100;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n@keyframes jump-jump-1 {\n 0%, 70% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes jump-jump-2 {\n 0%, 40% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes jump-jump-3 {\n 0%, 10% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"4b0f49","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":563,"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 display: grid;\n border: 4.5px solid #0000;\n border-radius: 50%;\n border-color: #dbdcef #0000;\n animation: spinner-e04l1k 1s infinite linear;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n margin: 2.2px;\n border: inherit;\n border-radius: 50%;\n}\n\n.spinner::before {\n border-color: red #0000;\n animation: inherit;\n animation-duration: 0.5s;\n animation-direction: reverse;\n}\n\n.spinner::after {\n margin: 8.9px;\n}\n\n@keyframes spinner-e04l1k {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"898080","snapshot":null,"tags":null,"title":"loader by lenin55","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":238,"cssLen":1109,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"/* //codelessly loader style */\n.ui-loader {\n display: inline-block;\n width: 50px;\n height: 50px;\n}\n\n.loader-blk {\n color: #3f51b5;\n animation: rotate-outer08 1.4s linear infinite;\n}\n\n.multiColor-loader {\n display: block;\n animation: color-anim08 1.4s infinite;\n}\n\n.loader-circle {\n stroke: currentColor;\n}\n\n.MuiCircularProgress-circleStatic {\n transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.loader-circle-animation {\n animation: rotate-inner08 1.4s ease-in-out\n infinite;\n stroke-dasharray: 80px, 200px;\n stroke-dashoffset: 0;\n}\n\n@keyframes rotate-outer08 {\n 0% {\n transform-origin: 50% 50%;\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotate-inner08 {\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n}\n\n@keyframes color-anim08 {\n 0% {\n color: #4285f4;\n }\n\n 25% {\n color: #ea4335;\n }\n\n 50% {\n color: #f9bb2d;\n }\n\n 75% {\n color: #34a853;\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"5fe203","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":938,"cssLen":1938,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* The loader container */\n.loader {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 200px;\n height: 200px;\n margin-top: -100px;\n margin-left: -100px;\n perspective: 1000px;\n transform-style: preserve-3d;\n}\n\n\n/* The cubes */\n.cubes {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transform: rotateY(45deg) rotateZ(45deg);\n}\n\n\n/* The cube */\n.cube {\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 50%;\n transform-origin: 50% 50%;\n transform-style: preserve-3d;\n transform: translateZ(-50px);\n animation: cube 2500ms cubic-bezier(.66,.14,.56,.75) infinite;\n}\n\n.cube:nth-child(2) {\n top: 0;\n left: 50%;\n animation-delay: 50ms;\n}\n\n.cube:nth-child(3) {\n top: 50%;\n left: 0;\n animation-delay: 100ms;\n}\n\n.cube:nth-child(4) {\n top: 50%;\n left: 50%;\n animation-delay: 150ms;\n}\n\n@keyframes cube {\n 0%, 75%, 100% {\n transform: translate3d(0px, 0px, 50px) rotateY(0deg) scale3d(0.9, 0.9, 0.1);\n }\n\n 25%, 50% {\n transform: translate3d(0px, 0px, -50px) rotateY(180deg) scale3d(0.9, 0.9, 0.1);\n }\n}\n\n\n\n\n\n/* The side */\n.side {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n backface-visibility: hidden;\n}\n\n/* back */\n.side:nth-child(1) {\n transform: rotateX(-180deg) translateZ(50px);\n background-color: #1e3f57;\n}\n\n/* left side */\n.side:nth-child(2) {\n transform: rotateY(-90deg) translateZ(50px);\n background-color: #6bb2cd;\n}\n\n/* right side */\n.side:nth-child(3) {\n transform: rotateY(90deg) translateZ(50px);\n background-color: #6bb2cd;\n}\n\n/* top side */\n.side:nth-child(4) {\n transform: rotateX(90deg) translateZ(50px);\n background-color: #3c617d;\n}\n\n/* bottom side */\n.side:nth-child(5) {\n transform: rotateX(-90deg) translateZ(50px);\n background-color: #3c617d;\n}\n\n/* top */\n.side:nth-child(6) {\n transform: translateZ(50px);\n background-color: #1e3f57;\n}\n"}]}},"actionData":null,"errors":null}