{"id":"g9acf4b6-b284-453d-addf-722bc11a95a3","type":"collection","status":"publish","slug":"css-spinners","titleHtml":"CSS Spinners","descriptionHtml":"A collection of spinners made with CSS.","theme":{"color":"#3f0e0e","background":"#f5d1d1"},"content":[{"name":"effect-f016f3f9","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n}\n.loader:before,\n.loader:after {\n content: \"\";\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n animation: wave 2s linear infinite;\n opacity: 0;\n}\n.loader:after{\n animation-delay: 1s;\n}\n@keyframes wave {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(1); opacity: 0; }\n}"},{"name":"effect-g016f3f9","html":"","css":".loader {\n --color: #000;\n --size-dot: 1em;\n --duration: 0.8s;\n --delay: 0.2s;\n\n display: block;\n position: relative;\n width: var(--size-dot);\n display: grid;\n place-items: center;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n background-color: var(--color);\n}\n\n.loader::before {\n top: calc(50% + 2em);\n animation: loader-1 \n var(--duration) \n cubic-bezier(0.06, 0.01, 0.49, 1.18) \n infinite;\n}\n\n.loader::after {\n opacity: 0;\n top: calc(50% - 1em);\n animation: loader-2 \n var(--duration) \n cubic-bezier(0.46, -0.1, 0.27, 1.07) \n var(--delay)\n infinite;\n}\n\n@keyframes loader-1 {\n 0%,\n 55%,\n 100% { opacity: 0; }\n 22% { opacity: 1; }\n 0% { transform: scale(0.2); }\n 33%,\n 55% { transform: scale(1) translateY(-3em); }\n}\n\n@keyframes loader-2 {\n 0%,\n 100% { opacity: 0; }\n 33% { opacity: 0.3; }\n 0% { transform: scale(0); }\n 100% { transform: scale(4); }\n}"},{"name":"effect-2bd36089","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .125em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n background: var(--ring-color);\n border-radius: 50%;\n animation: wave 1s ease-in infinite;\n}\n@keyframes wave {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(1); opacity: 0; }\n}"},{"name":"effect-efedc75f","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .125em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n}\n.loader:before,\n.loader:after {\n content: \"\";\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 50%;\n background: var(--ring-color);\n position: absolute;\n top: 0;\n left: 0;\n animation: wave 2s linear infinite;\n opacity: 0;\n}\n.loader:after{\n animation-delay: 1s;\n}\n@keyframes wave {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(1); opacity: 0; }\n}"},{"name":"effect-1746b040","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .125em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n}\n.loader:before,\n.loader:after {\n content: \"\";\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 50%;\n background: var(--ring-color);\n position: absolute;\n top: 0;\n left: 0;\n animation: wave 2s ease-in-out infinite;\n opacity: 0;\n}\n.loader:after{\n animation-delay: 1s;\n}\n@keyframes wave {\n 0%,\n 100% { transform: scale(0); opacity: 1; }\n 50% { transform: scale(1); opacity: 0; }\n}"},{"name":"effect-86b8808c","html":"

","css":".loader {\n --color: #000;\n --size-dot: 1em;\n\n display: block;\n position: relative;\n width: 50%;\n display: grid;\n place-items: center;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n width: var(--size-dot);\n height: var(--size-dot);\n background-color: var(--color);\n border-radius: 50%;\n animation: loader 1.2s ease-in-out infinite;\n}\n\n.loader::before {\n left: calc(50% - var(--size-dot));\n}\n\n.loader::after {\n left: calc(50% + var(--size-dot));\n animation-delay: -0.4s;\n}\n\n@keyframes loader {\n 0%,\n 100% {\n transform: translateY(-2em);\n }\n 44% {\n transform: translateY(2em);\n }\n}"},{"name":"effect-a5a7f370","html":"","css":".loader {\n\t--color: #000;\n\t--size-dot: 1em;\n\n\tdisplay: block;\n\tposition: relative;\n\twidth: 50%;\n\tdisplay: grid;\n\tplace-items: center;\n}\n\n.loader::before,\n.loader::after {\n\tcontent: \"\";\n\tbox-sizing: border-box;\n\tposition: absolute;\n\twidth: var(--size-dot);\n\theight: var(--size-dot);\n\tbackground-color: var(--color);\n\tborder-radius: 50%;\n\topacity: 0;\n\tanimation: loader 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;\n}\n\n.loader::after {\n\tanimation-delay: 0.3s;\n}\n\n@keyframes loader {\n\t0% { opacity: 0; transform: translateX(-2em); }\n\t33% { opacity: 1; }\n\t90% { transform: translateX(2em); }\n 80% { opacity: 0; }\n\t100% { opacity: 0; transform: translateX(-2em); }\n}"},{"name":"effect-4985da04","html":"","css":".loader {\n \t--color-0: #0000;\n\t--color-1: #000F;\n\t--diameter: 1em;\n\n\tdisplay: inline-block;\n\tposition: relative;\n\tleft: -100px;\n\twidth: var(--diameter);\n\theight: var(--diameter);\n \tborder-radius: 50%;\n \tcolor: var(--color);\n\tanimation: animate 2s linear infinite;\n}\n@keyframes animate {\n 0% {\n box-shadow: 0px 0 var(--color-0), \n 0px 0 var(--color-0), \n 0px 0 var(--color-0), \n 0px 0 var(--color-0);\n }\n 12% {\n box-shadow: 100px 0 var(--color-1), \n 0px 0 var(--color-0), \n 0px 0 var(--color-0), \n 0px 0 var(--color-0);\n }\n 25% {\n box-shadow: 110px 0 var(--color-1), \n 100px 0 var(--color-1), \n 0px 0 var(--color-0), \n 0px 0 var(--color-0);\n }\n 36% {\n box-shadow: 120px 0 var(--color-1), \n 110px 0 var(--color-1), \n 100px 0 var(--color-1), \n \t\t\t 0px 0 var(--color-0);\n }\n 50% {\n box-shadow: 130px 0 var(--color-1), \n 120px 0 var(--color-1), \n 110px 0 var(--color-1), \n 100px 0 var(--color-1);\n }\n 62% {\n box-shadow: 200px 0 var(--color-0), \n 130px 0 var(--color-1), \n 120px 0 var(--color-1), \n 110px 0 var(--color-1);\n }\n 75% {\n box-shadow: 200px 0 var(--color-0), \n 200px 0 var(--color-0), \n 130px 0 var(--color-1), \n 120px 0 var(--color-1);\n }\n 87% {\n box-shadow: 200px 0 var(--color-0), \n 200px 0 var(--color-0), \n 200px 0 var(--color-0), \n 130px 0 var(--color-1);\n }\n 100% {\n box-shadow: 200px 0 var(--color-0), \n 200px 0 var(--color-0), \n 200px 0 var(--color-0), \n 200px 0 var(--color-0);\n }\n}"},{"name":"effect-5b93f761","html":"","css":".loader {\n --color: #000;\n --diameter: 1em;\n --gap: 1.2em;\n\n display: inline-block;\n position: relative;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n color: var(--color);\n animation: animate 1s linear infinite;\n}\n@keyframes animate {\n 0% {\n box-shadow: calc(-3 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(-1 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(1 * var(--gap)) 0 0 -2px, \n calc(3 * var(--gap)) 0 0 -2px;\n }\n 25% {\n box-shadow: calc(-3 * var(--gap)) 0 0 2px,\n \t\t\tcalc(-1 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(1 * var(--gap)) 0 0 -2px, \n calc(3 * var(--gap)) 0 0 -2px;\n }\n 50% {\n box-shadow: calc(-3 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(-1 * var(--gap)) 0 0 2px,\n \t\t\tcalc(1 * var(--gap)) 0 0 -2px, \n calc(3 * var(--gap)) 0 0 -2px;\n }\n 75% {\n box-shadow: calc(-3 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(-1 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(1 * var(--gap)) 0 0 2px, \n calc(3 * var(--gap)) 0 0 -2px;\n }\n 100% {\n box-shadow: calc(-3 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(-1 * var(--gap)) 0 0 -2px,\n \t\t\tcalc(1 * var(--gap)) 0 0 -2px, \n calc(3 * var(--gap)) 0 0 2px;\n }\n}"},{"name":"effect-7cb43efc","html":"","css":".loader {\n --color: #000;\n --width: 4em;\n --height: .25em;\n\n position: relative;\n display: inline-block;\n width: 50%;\n display: grid;\n place-items: center;\n}\n.loader::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n height: var(--height);\n width: var(--width);\n background-color: var(--color);\n animation: animate 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;\n}\n@keyframes animate {\n 0%,\n 44%,\n 88.1%,\n 100% { transform-origin: left; }\n 0%,\n 100%,\n 88% { transform: scaleX(0); }\n 44.1%,\n 88% { transform-origin: right; }\n 33%,\n 44% { transform: scaleX(1); }\n}"},{"name":"effect-b27d3962","html":"","css":".loader {\n --color: #000;\n --width: 4em;\n --height: .25em;\n\n position: relative;\n display: inline-block;\n width: 100%;\n height: var(--height);\n}\n.loader::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: var(--width);\n height: var(--height);\n background-color: var(--color);\n animation: animate 0.6s ease-in-out infinite alternate;\n}\n@keyframes animate {\n 0% {\n left: 0;\n transform: translateX(-1%);\n }\n 100% {\n left: 100%;\n transform: translateX(-99%);\n }\n}"},{"name":"effect-7a6e7123","html":"","css":".loader {\n --color: #000;\n --width: .25em;\n --height: 3em;\n --duration: 0.6s;\n\n display: block;\n position: relative;\n width: 50%;\n display: grid;\n place-items: center;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n height: var(--height);\n width: var(--width);\n background-color: var(--color);\n animation: loader \n var(--duration) \n cubic-bezier(0, 0, 0.03, 0.9) \n infinite;\n}\n\n.loader::before {\n left: calc(50% - .5em);\n top: calc(50% - var(--height));\n}\n\n.loader::after {\n left: calc(50% + .5em);\n top: calc(50% - var(--height));\n animation-delay: 0.2s;\n}\n\n@keyframes loader {\n 0%,\n 88%,\n 100% { opacity: 0; }\n 33% { opacity: 1; }\n\n 0% { transform: translateY(-2em); }\n 33%,\n 88% { transform: translateY(2em); }\n}"},{"name":"effect-d157beb1","html":"","css":".loader {\n --color: #000;\n --width: 6px;\n --height: 64px;\n --gap: 20px;\n \n position: relative;\n display: inline-block;\n width: var(--width);\n height: var(--height);\n border-radius: 4px;\n color: var(--color);\n background: var(--color);\n animation: animate .3s linear .3s infinite alternate;\n}\n.loader::before,\n.loader::after {\n content: \"\";\n width: var(--width);\n height: var(--height);\n border-radius: 4px;\n background: currentColor;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: var(--gap);\n animation: animate .3s linear .45s infinite alternate;\n}\n.loader::before {\n left: calc(var(--gap) * -1);\n animation-delay: 0s;\n}\n@keyframes animate {\n 0% { height: calc(var(--height) * .1) }\n 100% { height: calc(var(--height) * 1) }\n}"},{"name":"effect-d561bb2e","html":"","css":".loader {\n --color: #000;\n --width: 6px;\n --height: 64px;\n --gap: 20px;\n \n position: relative;\n display: inline-block;\n width: var(--width);\n height: var(--height);\n left: -60px;\n border-radius: 4px;\n color: var(--color);\n animation: animate 0.6s linear infinite;\n}\n@keyframes animate {\n 0% { box-shadow: 20px -10px, 40px 10px, 60px 0px; }\n 25% { box-shadow: 20px 0px, 40px 0px, 60px 10px; }\n 50% { box-shadow: 20px 10px, 40px -10px, 60px 0px; }\n 75% { box-shadow: 20px 0px, 40px 0px, 60px -10px; }\n 100% { box-shadow: 20px -10px, 40px 10px, 60px 0px; }\n}"},{"name":"effect-12329f5c","html":"","css":".loader {\n --bg: #000;\n --width: 3em;\n \n display: inline-block;\n width: var(--width);\n height: var(--width);\n background: var(--bg);\n animation: flipX 1s linear infinite;\n}\n@keyframes flipX {\n 0% { \n transform: perspective(200px) \n \t\t rotateX(0deg) \n \t\t rotateY(0deg); \n }\n 50% { \n transform: perspective(200px) \n\t\t\t rotateX(-180deg) \n\t\t\t rotateY(0deg); \n }\n 100% { \n transform: perspective(200px)\n\t\t rotateX(-180deg) \n\t\t\t rotateY(-180deg); \n }\n}"},{"name":"effect-7b4edb07","html":"","css":".loader {\n\t--color: #000;\n\t--size-square: 2em;\n\n\tdisplay: block;\n\tposition: relative;\n\twidth: 50%;\n\tdisplay: grid;\n\tplace-items: center;\n}\n\n.loader::before,\n.loader::after {\n\tcontent: \"\";\n\tbox-sizing: border-box;\n\tposition: absolute;\n\twidth: var(--size-square);\n\theight: var(--size-square);\n\tbackground-color: var(--color);\n}\n\n.loader::before {\n\ttop: calc(50% - var(--size-square));\n\tleft: calc(50% - var(--size-square));\n\tanimation: loader-1 2.4s \n cubic-bezier(0, 0, 0.24, 1.21) \n infinite;\n}\n\n.loader::after {\n\ttop: 50%;\n\tleft: 50%;\n\tanimation: loader-2 2.4s \n cubic-bezier(0, 0, 0.24, 1.21) \n infinite;\n}\n\n@keyframes loader-1 {\n\t0%,\n\t100% { transform: none; }\n\t25% { transform: translateX(100%); }\n\t50% { transform: translateX(100%) translateY(100%); }\n\t75% { transform: translateY(100%); }\n}\n@keyframes loader-2 {\n\t0%,\n\t100% { transform: none; }\n\t25% { transform: translateX(-100%); }\n\t50% { transform: translateX(-100%) translateY(-100%); }\n\t75% { transform: translateY(-100%); }\n}"},{"name":"effect-4ee5e8b1","html":"","css":".loader {\n --bg: #000;\n --width: 1.5em;\n \n display: inline-block;\n width: var(--width);\n height: var(--width);\n background: var(--bg);\n animation: animate 2s linear infinite;\n}\n@keyframes animate {\n 0% { transform: translate(0, 0) rotateX(0) rotateY(0); }\n 25% { transform: translate(100%, 0) rotateX(0) rotateY(180deg); }\n 50% { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); }\n 75% { transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); }\n 100% { transform: translate(0, 0) rotateX(0) rotateY(360deg); }\n}"},{"name":"effect-55daf8cb","html":"","css":".loader {\n --width: 3em;\n --color-0: rgba(0, 0, 0, 0);\n --color-15: rgba(0, 0, 0, 0.15);\n --color-85: rgba(0, 0, 0, 0.85);\n --color-1: rgba(0, 0, 0, 1);\n \n position: relative;\n display: inline-block;\n width: var(--width);\n height: var(--width);\n transform: rotate(45deg);\n}\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: calc(var(--width) / 2);\n height: calc(var(--width) / 2);\n}\n.loader:before {\n top: calc(var(--width) / -2);\n animation: animate-1 4s ease infinite;\n}\n.loader:after {\n top: 0;\n background: var(--color-85);\n box-shadow: 0 0 10px var(--color-15);\n animation: animate-2 2s ease infinite;\n}\n@keyframes animate-1 {\n 0% {\n box-shadow: 0 24px var(--color-0), \n 24px 24px var(--color-0), \n 24px 48px var(--color-0), \n 0px 48px var(--color-0);\n }\n 12% {\n box-shadow: 0 24px var(--color-1), \n 24px 24px var(--color-0), \n 24px 48px var(--color-0), \n 0px 48px var(--color-0);\n }\n 25% {\n box-shadow: 0 24px var(--color-1), \n 24px 24px var(--color-1), \n 24px 48px var(--color-0), \n 0px 48px var(--color-0);\n }\n 37% {\n box-shadow: 0 24px var(--color-1), \n 24px 24px var(--color-1), \n 24px 48px var(--color-1), \n 0 48px var(--color-0);\n }\n 50% {\n box-shadow: 0 24px var(--color-1), \n 24px 24px var(--color-1), \n 24px 48px var(--color-1), \n 0 48px var(--color-1);\n }\n 62% {\n box-shadow: 0 24px var(--color-0), \n 24px 24px var(--color-1), \n 24px 48px var(--color-1), \n 0px 48px var(--color-1);\n }\n 75% {\n box-shadow: 0 24px var(--color-0), \n 24px 24px var(--color-0), \n 24px 48px var(--color-1), \n 0px 48px var(--color-1);\n }\n 87% {\n box-shadow: 0 24px var(--color-0), \n 24px 24px var(--color-0), \n 24px 48px var(--color-0), \n 0px 48px var(--color-1);\n }\n 100% {\n box-shadow: 0 24px var(--color-0),\n 24px 24px var(--color-0), \n 24px 48px var(--color-0), \n 0px 48px var(--color-0);\n }\n}\n@keyframes animate-2 {\n 0% { transform: translate(0, 0) rotateX(0) rotateY(0); }\n 25% { transform: translate(100%, 0) rotateX(0) rotateY(180deg); }\n 50% { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); }\n 75% { transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); }\n 100% { transform: translate(0, 0) rotateX(0) rotateY(360deg); }\n}"},{"name":"effect-d4de07fc","html":"","css":".loader {\n --ring-color: #0005;\n --ring-color-2: #000f;\n --ring-diameter: 3em;\n --ring-width: .25em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-bottom-color: var(--ring-color-2);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-ed864de6","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n --inner-color: #FF3D00;\n --inner-diameter: 2.5em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--inner-diameter);\n height: var(--inner-diameter);\n border-radius: 50%;\n border: var(--ring-width) solid transparent;\n border-bottom-color: var(--inner-color);\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-df005bd6","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n --inner-color: #FF3D00;\n --inner-diameter: 3.5em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--inner-diameter);\n height: var(--inner-diameter);\n border-radius: 50%;\n border: var(--ring-width) solid transparent;\n border-bottom-color: var(--inner-color);\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-a4d57ac6","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n --inner-color: #FF3D00;\n --inner-diameter: 2.5em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--inner-diameter);\n height: var(--inner-diameter);\n border-radius: 50%;\n border: var(--ring-width) solid ;\n border-color: var(--inner-color) transparent;\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-ddab5a1a","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n --inner-color: #FF3D00;\n --inner-diameter: 3.5em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--inner-diameter);\n height: var(--inner-diameter);\n border-radius: 50%;\n border: var(--ring-width) solid ;\n border-color: var(--inner-color) transparent;\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-34c9f76e","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n --circle-color: #FF3D00;\n --circle-diameter: .375em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n transform: translate(150%, 150%);\n width: var(--circle-diameter);\n height: var(--circle-diameter);\n border-radius: 50%;\n background: var(--circle-color);\n}\n.loader:after {\n left: auto;\n top: auto;\n right: 0;\n bottom: 0;\n transform: translate(-150%, -150%);\n}\n\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-6722e31d","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n --circle-color: #FF3D00;\n --circle-diameter: .375em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n transform: translate(-50%, -50%);\n width: var(--circle-diameter);\n height: var(--circle-diameter);\n border-radius: 50%;\n background: var(--circle-color);\n}\n.loader:after {\n left: auto;\n top: auto;\n right: 0;\n bottom: 0;\n transform: translate(50%, 50%);\n}\n\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-3f647bd0","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n --circle-color: #FF3D00;\n --circle-diameter: 1em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n transform: translate(-50%, 50%);\n width: var(--circle-diameter);\n height: var(--circle-diameter);\n border-radius: 50%;\n background: var(--circle-color);\n}\n\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-bd91ae56","html":"","css":".loader {\n --ring1-color: #000000;\n --ring1-diameter: 3em;\n --ring1-width: .25em;\n --ring2-color: #FF3D00;\n --ring2-diameter: 1.5em;\n --ring2-width: .185em;\n \n position: relative;\n display: inline-block;\n width: var(--ring1-diameter);\n height: var(--ring1-diameter);\n border: var(--ring1-width) solid;\n border-color: var(--ring1-color) var(--ring1-color) transparent;\n border-radius: 50%;\n animation: rotation 1s linear infinite;\n}\n.loader:before{\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: var(--ring2-diameter);\n height: var(--ring2-diameter);\n margin: auto;\n border: var(--ring2-width) solid;\n border-color: transparent var(--ring2-color) var(--ring2-color);\n border-radius: 50%;\n animation: rotation-reverse 0.5s linear infinite;\n}\n\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n@keyframes rotation-reverse {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(-360deg); }\n}"},{"name":"effect-5929f56a","html":"","css":".loader {\n --ring1-color: #000000;\n --ring1-diameter: 3em;\n --ring1-width: .25em;\n --ring2-color: #FF3D00;\n --ring2-diameter: 1.5em;\n --ring2-width: .185em;\n \n position: relative;\n display: inline-block;\n width: var(--ring1-diameter);\n height: var(--ring1-diameter);\n border: var(--ring1-width) dotted var(--ring1-color);\n border-style: solid solid dotted dotted;\n border-radius: 50%;\n animation: rotation 2s linear infinite;\n}\n.loader:before{\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: var(--ring2-diameter);\n height: var(--ring2-diameter);\n margin: auto;\n border: var(--ring2-width) dotted var(--ring2-color);\n border-style: solid solid dotted;\n border-radius: 50%;\n animation: rotation-reverse 1s linear infinite;\n}\n\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n@keyframes rotation-reverse {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(-360deg); }\n}"},{"name":"effect-c14ea3a3","html":"","css":".loader {\n --ring-color: #000000;\n --ring-diameter: 3em;\n --ring-width: .3em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) dotted var(--ring-color);\n border-radius: 50%;\n animation: rotation 4s linear infinite;\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-17f13d67","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .2em;\n \n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 50%;\n border-top: var(--ring-width) solid var(--ring-color);\n border-right: var(--ring-width) solid transparent;\n animation: rotation 1s linear infinite;\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-2e6764cb","html":"","css":".loader {\n --color1: #000;\n --color2: #FF3D00;\n --ring-diameter: 3em;\n --ring-width: .25em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 50%;\n border-top: var(--ring-width) solid var(--color1);\n border-right: var(--ring-width) solid transparent;\n animation: rotation 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 50%;\n border-left: var(--ring-width) solid transparent;\n border-bottom: var(--ring-width) solid var(--color2);\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-b92c4a26","html":"","css":".loader {\n --color1: #000;\n --color2: #FF3D00;\n --ring-diameter: 3em;\n --ring-width: .25em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 50%;\n border-top: var(--ring-width) solid var(--color1);\n border-right: var(--ring-width) solid transparent;\n animation: rotation 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 50%;\n border-left: var(--ring-width) solid var(--color2);\n border-bottom: var(--ring-width) solid transparent;\n animation: rotation .5s linear infinite reverse;\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-e2d10531","html":"","css":".loader {\n --color1: #000;\n --color2: #FF3D00;\n --diameter: 3em;\n \n position: relative;\n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n animation: rotate 1s linear infinite;\n}\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n top: 0;\n width: calc(var(--diameter) / 2);\n height: calc(var(--diameter) / 2);\n border-radius: 50%;\n background-color: var(--color1);\n animation: scale50 1s ease-in-out infinite;\n}\n.loader:before{\n top: auto;\n bottom: 0;\n background-color: var(--color2);\n animation-delay: .5s;\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n@keyframes scale50 {\n 0% { transform: scale(0); }\n 50% { transform: scale(1); }\n 100% { transform: scale(0); }\n}"},{"name":"effect-63bc6545","html":"","css":".loader {\n --color1: #000;\n --color2: #FF3D00;\n --diameter: 3em;\n \n position: relative;\n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n animation: rotate 1s linear infinite;\n}\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--diameter) / 2);\n height: calc(var(--diameter) / 2);\n border-radius: 50%;\n background-color: var(--color1);\n transform: scale(0.5) translate(0, 0);\n animation: animate 1s ease-in-out infinite;\n}\n.loader:before{\n background-color: var(--color2);\n transform: scale(0.5) \n translate(\n calc(var(--diameter) * -1), \n calc(var(--diameter) * -1)\n );\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n@keyframes animate {\n 50% { transform: scale(1) translate(-50%, -50%); }\n}"},{"name":"effect-87b32c79","html":"","css":".loader {\n --ring-color: #000;\n --ring-diameter: 3em;\n --ring-width: .25em;\n \n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid;\n border-radius: 50%;\n border-color: var(--ring-color) transparent;\n animation: rotation 1s linear infinite;\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-c7e96d7a","html":"","css":".loader {\n --ring-diameter: 3em;\n --ring-width: .625em;\n \n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid;\n border-radius: 50%;\n border-top-color: #0003;\n border-right-color: #0007;\n border-bottom-color: #000a;\n border-left-color: #000f;\n animation: rotate 1s linear infinite;\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-c650f366","html":"","css":".loader {\n --color: #000;\n --diameter: 3em;\n --width: .2em;\n --arrow-width: .625em;\n \n position: relative;\n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n border: var(--width) solid var(--color);\n border-bottom-color: transparent;\n animation: rotate 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n border: var(--arrow-width) solid transparent;\n border-right-color: var(--color);\n transform: rotate(-46deg) translate(-50%,225%);\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-845cc710","html":"","css":".loader {\n --color: #000;\n --color-66: #000a;\n --color-33: #0005;\n --diameter: 3em;\n --width: .2em;\n --arrow-width: .625em;\n \n position: relative;\n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n border-width: var(--width);\n border-style: dashed solid solid dotted;\n border-right-color: var(--color);\n border-top-color: var(--color-66);\n border-left-color: var(--color-33);\n border-bottom-color: transparent;\n animation: rotate 1s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n border: var(--arrow-width) solid transparent;\n border-right-color: var(--color);\n transform: rotate(-46deg) translate(-50%,225%);\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-a7a412eb","html":"","css":".loader {\n --color: #000;\n --diameter: 3em;\n \n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n animation: animate 1.5s linear infinite;\n}\n@keyframes animate {\n 0% { box-shadow: calc(var(--diameter) * -1.5) 0 var(--color) inset; }\n 100% { box-shadow: var(--diameter) 0 var(--color) inset; }\n}"},{"name":"effect-0bd639c2","html":"","css":".loader {\n --ring-color: #000;\n --line-color: #FF3D00;\n --ring-diameter: 3em;\n --ring-width: .3em;\n \n position: relative;\n display: inline-block;\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border: var(--ring-width) solid var(--ring-color);\n border-radius: 50%;\n animation: rotation 2s linear infinite;\n}\n.loader:after {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 0;\n background: var(--line-color);\n width: 3px;\n height: calc(var(--ring-diameter) / 2);\n transform: translateX(-50%);\n}\n@keyframes rotation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-abf8ac63","html":"","css":".loader {\n --diameter: 1.5em;\n --bg: #000;\n --color: #FF3D00;\n \n display: inline-block;\n box-sizing: border-box;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n border: var(--diameter) solid var(--bg);\n border-bottom-color: var(--color);\n animation: rotate 1s linear infinite;\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-1e4941e1","html":"","css":".loader {\n --diameter: 3em;\n --bg: #000;\n --color: #FF3D00;\n \n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n background: var(--color);\n border-radius: 50%;\n border: 2px solid var(--bg);\n animation: rotate 2s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n border: calc(var(--diameter) / 2) solid;\n border-color: transparent var(--bg);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-7deb6dac","html":"","css":".loader {\n --diameter: 1.2em;\n --bg: #000;\n --color: #FF3D00;\n \n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n background: var(--color);\n border-radius: 50%;\n border: 2px solid var(--bg);\n animation: rotate 2s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n width: var(--diameter);\n height: var(--diameter);\n border: var(--diameter) solid;\n border-color: transparent var(--bg);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-bb916352","html":"","css":".loader {;\n --bg: #0004;\n --border: #000;\n --diameter: 3em;\n \n display: inline-block;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n border: 2px solid;\n border-color: transparent var(--border);\n animation: rotate 2s linear infinite;\n}\n.loader:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n border: calc(var(--diameter) / 2) solid;\n border-color: transparent var(--bg);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-065fdbef","html":"","css":".loader {\n --diameter: 1.5em;\n \n display: inline-block;\n box-sizing: border-box;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n border: var(--diameter) solid;\n border-color: #0003 #0007 #000b #000f;\n animation: rotate 2s linear infinite;\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}"},{"name":"effect-46b2a72f","html":"","css":".loader {\n --diameter: 1.5em;\n --color-0: #0003;\n --color-33: #0007;\n --color-66: #000b;\n --color-100: #000f;\n \n display: inline-block;\n box-sizing: border-box;\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n border: var(--diameter) solid var(--color-0);\n animation: animate 2s linear infinite;\n}\n@keyframes animate {\n 0% {\n border-color: var(--color-0)\n var(--color-33)\n var(--color-66)\n var(--color-100);\n }\n 33% {\n border-color: var(--color-100) \n var(--color-0)\n var(--color-33)\n var(--color-66);\n }\n 66% {\n border-color: var(--color-66)\n var(--color-100)\n var(--color-0)\n var(--color-33);\n }\n 100% {\n border-color: var(--color-33) \n var(--color-66)\n var(--color-100)\n var(--color-0);\n }\n}"},{"name":"effect-bd0809b0","html":"

","css":".spinner{\n --ring-diameter: 3em;\n --ring-width: .25em;\n --inner-color: #000;\n --duration: 2s;\n \n position: relative;\n background-color: var(--inner-color);\n width: var(--ring-diameter);\n height: var(--ring-diameter);\n border-radius: 100%;\n border: var(--ring-width) solid transparent;\n}\n.spinner:after{\n content: '';\n position: absolute;\n top: -20%;\n left: -20%;\n width: 140%;\n height: 140%;\n background: transparent;\n border-radius: 100%;\n opacity: .5;\n box-shadow: var(--inner-color) -4px -5px 3px -3px;\n animation: rotate var(--duration) infinite linear;\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}","listing":{}},{"name":"effect-f6bfba04","html":"","css":".spinner {\n --color: #000;\n \n width: 14em;\n height: 14em;\n animation: rotate 2.4s both infinite linear;\n}\n.spinner .path {\n fill: none;\n stroke: var(--color);\n stroke-width: 50;\n}\n@keyframes rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}","listing":{"css":"body{transform: scale(.5);}"}}],"effectWidth":250,"effectHeight":200}