{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":732,"projects":[{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"869751","snapshot":null,"tags":null,"title":"loader by Smit-Prajapati","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":92,"jsLen":0,"cssLen":697,"pureCSS":1,"html":"

\n","css":".loader {\n height: 2px;\n width: 300px;\n background: rgb(44, 44, 44);\n position: relative;\n overflow: hidden;\n}\n.loader .black_overlay {\n background: linear-gradient(\n 87deg,\n rgb(0, 0, 0) 0%,\n rgba(0, 0, 0, 0.14) 30%,\n rgba(0, 0, 0, 0.14) 70%,\n rgb(0, 0, 0) 100%\n );\n position: absolute;\n inset: 0px;\n}\n.loader .light {\n width: 70px;\n height: 100%;\n position: absolute;\n left: -20%;\n top: 0px;\n background: linear-gradient(\n 87deg,\n rgba(0, 0, 0, 0) 0%,\n rgb(0, 204, 255) 40%,\n rgb(0, 204, 255) 60%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: light 2s infinite ease-in-out;\n}\n\n@keyframes light {\n from {\n left: -30%;\n }\n to {\n left: 100%;\n }\n}\n"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"961fec","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":135,"jsLen":0,"cssLen":1407,"pureCSS":1,"html":"

","css":".leap-frog {\n --uib-size: 40px;\n --uib-speed: 2s;\n --uib-color: rgb(37, 37, 149);\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: var(--uib-size);\n height: var(--uib-size);\n}\n\n.leap-frog__dot {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n}\n\n.leap-frog__dot::before {\n content: '';\n display: block;\n height: calc(var(--uib-size) * 0.22);\n width: calc(var(--uib-size) * 0.22);\n border-radius: 50%;\n background-color: var(--uib-color);\n will-change: transform;\n}\n\n.leap-frog__dot:nth-child(1) {\n animation: leapFrog var(--uib-speed) ease infinite;\n}\n\n.leap-frog__dot:nth-child(2) {\n transform: translateX(calc(var(--uib-size) * 0.4));\n animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5)\n infinite;\n}\n\n.leap-frog__dot:nth-child(3) {\n transform: translateX(calc(var(--uib-size) * 0.8)) rotate(0deg);\n animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3)\n infinite;\n}\n\n@keyframes leapFrog {\n 0% {\n transform: translateX(0) rotate(0deg);\n }\n\n 33.333% {\n transform: translateX(0) rotate(180deg);\n }\n\n 66.666% {\n transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg);\n }\n\n 99.999% {\n transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg);\n }\n\n 100% {\n transform: translateX(0) rotate(0deg);\n }\n}\n"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"cd9274","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1605,"jsLen":0,"cssLen":666,"pureCSS":1,"html":"

\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n

\n","css":".loader {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.book-wrapper {\n width: 150px;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n position: relative;\n}\n.book {\n width: 100%;\n height: auto;\n filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.137));\n}\n.book-wrapper .book-page {\n width: 50%;\n height: auto;\n position: absolute;\n animation: paging 0.15s linear infinite;\n transform-origin: left;\n}\n@keyframes paging {\n 0% {\n transform: rotateY(0deg) skewY(0deg);\n }\n 50% {\n transform: rotateY(90deg) skewY(-20deg);\n }\n 100% {\n transform: rotateY(180deg) skewY(0deg);\n }\n}\n"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"e54880","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":267,"jsLen":0,"cssLen":1104,"pureCSS":1,"html":"

\n\n

\n ","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.cube {\n width: 100px;\n height: 100px;\n position: relative;\n transform-style: preserve-3d;\n animation: spin 2s infinite linear;\n}\n\n.side {\n position: absolute;\n width: 100px;\n height: 100px;\n opacity: 0.8;\n}\n\n.front {\n transform: translateZ(50px);\n background: linear-gradient(45deg, #ff4e50, #f9d423);\n}\n\n.back {\n transform: translateZ(-50px);\n background: linear-gradient(45deg, #40e0d0, #ff8c00);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(50px);\n background: linear-gradient(45deg, #800080, #00bfff);\n}\n\n.bottom {\n transform: rotateX(90deg) translateZ(-50px);\n background: linear-gradient(45deg, #008000, #ffff00);\n}\n\n.left {\n transform: rotateY(90deg) translateZ(50px);\n background: linear-gradient(45deg, #0000ff, #ff1493);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(-50px);\n background: linear-gradient(45deg, #00ffff, #ff0000);\n}\n\n@keyframes spin {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"01bb47","snapshot":null,"tags":null,"title":"loader by e-coders","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":227,"jsLen":0,"cssLen":2163,"pureCSS":1,"html":"

","css":"@keyframes ldio-4j5ay0xf86g {\n 0% {\n opacity: 1\n }\n\n 100% {\n opacity: 0\n }\n}\n\n.ldio-4j5ay0xf86g div {\n left: 94px;\n top: 48px;\n position: absolute;\n animation: ldio-4j5ay0xf86g linear 1s infinite;\n background: #fe718d;\n width: 12px;\n height: 24px;\n border-radius: 6px / 12px;\n transform-origin: 6px 52px;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(1) {\n transform: rotate(0deg);\n animation-delay: -0.9166666666666666s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(2) {\n transform: rotate(30deg);\n animation-delay: -0.8333333333333334s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(3) {\n transform: rotate(60deg);\n animation-delay: -0.75s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(4) {\n transform: rotate(90deg);\n animation-delay: -0.6666666666666666s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(5) {\n transform: rotate(120deg);\n animation-delay: -0.5833333333333334s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(6) {\n transform: rotate(150deg);\n animation-delay: -0.5s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(7) {\n transform: rotate(180deg);\n animation-delay: -0.4166666666666667s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(8) {\n transform: rotate(210deg);\n animation-delay: -0.3333333333333333s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(9) {\n transform: rotate(240deg);\n animation-delay: -0.25s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(10) {\n transform: rotate(270deg);\n animation-delay: -0.16666666666666666s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(11) {\n transform: rotate(300deg);\n animation-delay: -0.08333333333333333s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(12) {\n transform: rotate(330deg);\n animation-delay: 0s;\n background: #fe718d;\n}\n\n.loadingio-spinner-spinner-977el9wwy2v {\n width: 200px;\n height: 200px;\n display: inline-block;\n overflow: hidden;\n}\n\n.ldio-4j5ay0xf86g {\n width: 100%;\n height: 100%;\n position: relative;\n transform: translateZ(0) scale(1);\n backface-visibility: hidden;\n transform-origin: 0 0;\n /* see note above */\n}\n\n.ldio-4j5ay0xf86g div {\n box-sizing: content-box;\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":44,"jsLen":0,"cssLen":1359,"pureCSS":1,"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:08.000Z","isPrivate":0,"projectId":"26c70d","snapshot":null,"tags":null,"title":"loader by Gianluks90","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":219,"jsLen":0,"cssLen":962,"pureCSS":1,"html":"

","css":".loader {\n height: 50px;\n display: flex;\n align-items: flex-end;\n gap: 3px;\n}\n\n.bar {\n height: 5px;\n width: 12px;\n animation-duration: 0.45s;\n animation-name: changeHeight;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n}\n\n.red {\n background-color: #E50000;\n box-shadow: 1px 1px 10px #E50000;\n animation-delay: 0.10s;\n}\n\n.orange {\n background-color: #FF8D00;\n box-shadow: 1px 1px 10px #FF8D00;\n animation-delay: 0.20s;\n}\n\n.yellow {\n background-color: #FFEE00;\n box-shadow: 1px 1px 10px #FFEE00;\n animation-delay: 0.25s;\n}\n\n.green {\n background-color: #008121;\n box-shadow: 1px 1px 10px #008121;\n animation-delay: 0.30s;\n}\n\n.blue {\n background-color: #004CFF;\n box-shadow: 1px 1px 10px #004CFF;\n animation-delay: 0.35s;\n}\n\n.violet {\n background-color: #760188;\n box-shadow: 1px 1px 10px #760188;\n animation-delay: 0.40s;\n}\n\n@keyframes changeHeight {\n from {\n height: 5px;\n }\n\n to {\n height: 40px;\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":26,"jsLen":0,"cssLen":606,"pureCSS":1,"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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":504,"jsLen":0,"cssLen":4234,"pureCSS":1,"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":"d4bfe0","snapshot":null,"tags":null,"title":"loader by 00Kubi","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":27,"jsLen":0,"cssLen":962,"pureCSS":1,"html":"

\n","css":".loader {\n width: 48px;\n height: 48px;\n margin: auto;\n position: relative;\n}\n\n.loader:before {\n content: '';\n width: 48px;\n height: 5px;\n background: #FFD700;\n position: absolute;\n top: 60px;\n left: 0;\n border-radius: 50%;\n animation: shadow324 0.5s linear infinite;\n}\n\n.loader:after {\n content: '';\n width: 100%;\n height: 100%;\n background: #FFD700;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 50%;\n animation: jump7456 0.5s linear infinite;\n}\n\n@keyframes jump7456 {\n 15% {\n border-bottom-right-radius: 50%;\n }\n\n 25% {\n transform: translateY(9px) rotate(22.5deg);\n }\n\n 50% {\n transform: translateY(18px) scale(1, .9) rotate(45deg);\n border-bottom-right-radius: 40px;\n }\n\n 75% {\n transform: translateY(9px) rotate(67.5deg);\n }\n\n 100% {\n transform: translateY(0) rotate(90deg);\n }\n}\n\n@keyframes shadow324 {\n\n 0%,\n 100% {\n transform: scale(1, 1);\n }\n\n 50% {\n transform: scale(1.2, 1);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"dc35b2","snapshot":null,"tags":null,"title":"loader by Alderx","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":472,"jsLen":0,"cssLen":2046,"pureCSS":1,"html":"

\n \n

\n ","css":"/* heart beat */\n.heartbeatloader {\n position: absolute;\n width: 10vmin;\n height: 10vmin;\n z-index: -2;\n margin: auto;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.svgdraw {\n top: 30%;\n left: 26%;\n position: absolute;\n width: 50%;\n height: 50%;\n transform: scale(1.4);\n z-index: 3;\n}\n\n.path {\n stroke: rgba(0, 0, 0, 0.95);\n stroke-width: 4;\n stroke-dasharray: 1000px;\n stroke-dashoffset: 1000px;\n animation: draw 1.5s infinite forwards normal linear;\n animation-delay: 0.1s;\n position: relative;\n}\n\n@keyframes draw {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n.innercircle {\n position: absolute;\n top: 17%;\n left: 100.5%;\n transform: translate(-50%, -50%) scale(1.2);\n width: 160%;\n height: auto;\n z-index: 1;\n opacity: 0.97;\n animation: innerbeat 1.5s infinite linear forwards;\n}\n\n.innercircle:before,\n.innercircle:after {\n position: absolute;\n content: \"\";\n left: 25%;\n top: 0;\n width: 25%;\n height: auto;\n padding-bottom: 40%;\n background: rgb(225, 95, 95);\n border-radius: 50px 50px 0 0;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n}\n\n.innercircle:after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n}\n\n@keyframes innerbeat {\n 0% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n\n 10% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n\n 50% {\n transform: translate(-50%, -50%) scale(1.3);\n }\n\n 60% {\n transform: translate(-50%, -50%) scale(1.25);\n }\n\n 75% {\n transform: translate(-50%, -50%) scale(1.3);\n }\n}\n\n.outercircle {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: rgba(230, 92, 92, 0.774);\n box-shadow: 0 0 30px 0px #000;\n position: absolute;\n z-index: -1;\n opacity: 0.7;\n top: 0;\n left: 0;\n transform: scale(1.2);\n animation: outerbeat 1.5s infinite linear forwards;\n}\n\n@keyframes outerbeat {\n 0% {\n transform: scale(1.2);\n }\n\n 10% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1.3);\n }\n\n 60% {\n transform: scale(1.25);\n }\n\n 75% {\n transform: scale(1.3);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"f1576f","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":479,"jsLen":0,"cssLen":523,"pureCSS":1,"html":"

\n \n \n \n \n \n \n \n \n \n \n

\n","css":".loader {\n position: relative;\n}\n.load {\n display: inline-block;\n height: calc(var(--i) * 15);\n width: calc(var(--i) * 15);\n background-color: transparent;\n position: absolute;\n border: 5px rgb(47, 0, 255) solid;\n border-top: none;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: turn 2s infinite linear;\n}\n\n.load:nth-child(odd) {\n animation: turn 2s infinite linear reverse;\n}\n\n@keyframes turn {\n 100% {\n transform: translate(-50%, -50%) rotateZ(360deg);\n }\n}\n"}]}},"actionData":null,"errors":null}