{"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:43.000Z","isPrivate":0,"projectId":"05c20e","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":99,"jsLen":0,"cssLen":849,"pureCSS":1,"html":"

\n \n \n \n \n

","css":".loader {\n position: relative;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: linear-gradient(#ee280e, #15a0f7, #6ed15a);\n animation: animate7712 1.2s linear infinite;\n}\n\n@keyframes animate7712 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loader span {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: linear-gradient(#ee280e, #15a0f7, #5ad15a);\n}\n\n.loader:after {\n content: '';\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n bottom: 10px;\n background: #333;\n border: solid #333 10px;\n border-radius: 50%;\n}\n\n.loader span:nth-child(1) {\n filter: blur(5px);\n}\n\n.loader span:nth-child(2) {\n filter: blur(10px);\n}\n\n.loader span:nth-child(3) {\n filter: blur(25px);\n}\n\n.loader span:nth-child(4) {\n filter: blur(50px);\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"06f922","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":244,"jsLen":0,"cssLen":1683,"pureCSS":1,"html":"","css":".loader {\n width: 200px;\n max-height: 900px;\n transform-origin: 50% 50%;\n overflow: visible;\n}\n\n.ci1 {\n fill: var(--higru);\n animation: toBig 3s infinite -1.5s;\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n.ciw {\n transform-box: fill-box;\n transform-origin: 50% 50%;\n animation: breath 3s infinite;\n}\n\n.ci2 {\n fill: var(--higru);\n animation: toBig2 3s infinite;\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n.points {\n animation: rot 3s infinite;\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n@keyframes rot {\n 0% {\n transform: rotate(0deg);\n }\n\n 30% {\n transform: rotate(360deg);\n }\n\n 50% {\n transform: rotate(360deg);\n }\n\n 80% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes toBig {\n 0% {\n transform: scale(1) translateX(0px);\n }\n\n 30% {\n transform: scale(1) translateX(0px);\n }\n\n 50% {\n transform: scale(10) translateX(-4.5px);\n }\n\n 80% {\n transform: scale(10) translateX(-4.5px);\n }\n\n 100% {\n transform: scale(1) translateX(0px);\n }\n}\n\n@keyframes toBig2 {\n 0% {\n transform: scale(1) translateX(0px);\n }\n\n 30% {\n transform: scale(1) translateX(0px);\n }\n\n 50% {\n transform: scale(10) translateX(4.5px);\n }\n\n 80% {\n transform: scale(10) translateX(4.5px);\n }\n\n 100% {\n transform: scale(1) translateX(0px);\n }\n}\n\n@keyframes breath {\n 15% {\n transform: scale(1);\n }\n\n 40% {\n transform: scale(1.1);\n }\n\n 65% {\n transform: scale(1);\n }\n\n 90% {\n transform: scale(1.1);\n }\n}\n\n.dwf, .share {\n position: fixed;\n bottom: 4px;\n right: 10px;\n background-color: #0003;\n padding: 3px;\n border-radius: 3px;\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"0c72b4","snapshot":null,"tags":null,"title":"loader by AHMED-MIT","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":28,"jsLen":0,"cssLen":588,"pureCSS":1,"html":"

\n","css":".spinner {\n position: relative;\n width: 35.2px;\n height: 35.2px;\n}\n\n.spinner::before,\n.spinner::after {\n content: '';\n width: 100%;\n height: 100%;\n display: block;\n animation: spinner-b4c8mmhg 0.5s backwards, spinner-49opz7hg 1.25s 0.5s infinite ease;\n border: 8.8px solid #000000;\n border-radius: 50%;\n box-shadow: 0 -52.8px 0 -8.8px #000000;\n position: absolute;\n}\n\n.spinner::after {\n animation-delay: 0s, 1.25s;\n}\n\n@keyframes spinner-b4c8mmhg {\n from {\n box-shadow: 0 0 0 -8.8px #000000;\n }\n}\n\n@keyframes spinner-49opz7hg {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"12959c","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":170,"jsLen":0,"cssLen":3001,"pureCSS":1,"html":"

","css":".container {\n width: 200px;\n height: 200px;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n position: absolute;\n}\n\n.container div {\n width: 100px;\n height: 100px;\n top: 50px;\n left: 50px;\n display: block;\n position: absolute;\n}\n\n.top-left {\n animation: tl 7.5s ease infinite\n}\n\n.top-right {\n animation: tr 7.5s ease infinite\n}\n\n.bottom-left {\n animation: bl 7.5s ease infinite\n}\n\n.bottom-right {\n animation: br 7.5s ease infinite\n}\n\n.container div:before,\n.container div:after {\n display: block;\n position: absolute;\n content: \"\"\n}\n\n.container div:before {\n width: 50px;\n height: 50px\n}\n\n.top-left:before {\n background: rgb(251, 189, 4);\n top: 0;\n left: 0;\n border-radius: 100% 0 0 0\n}\n\n.top-right:before {\n background: rgb(234, 67, 52);\n top: 0;\n right: 0;\n border-radius: 0 100% 0 0\n}\n\n.bottom-left:before {\n background: rgb(52, 168, 83);\n bottom: 0;\n left: 0;\n border-radius: 0 0 0 100%\n}\n\n.bottom-right:before {\n background: rgb(67, 135, 244);\n bottom: 0;\n right: 0;\n border-radius: 0 0 100% 0\n}\n\n.container div:after {\n background: rgb(33, 33, 33);\n width: 25px;\n height: 25px;\n z-index: 1\n}\n\n.top-left:after {\n top: 25px;\n left: 25px;\n border-radius: 100% 0 0 0\n}\n\n.top-right:after {\n top: 25px;\n right: 25px;\n border-radius: 0 100% 0 0\n}\n\n.bottom-left:after {\n bottom: 25px;\n left: 25px;\n border-radius: 0 0 0 100%\n}\n\n.bottom-right:after {\n bottom: 25px;\n right: 25px;\n border-radius: 0 0 100% 0\n}\n\n@keyframes tl {\n 0%,96%,100% {\n transform: rotate(0deg)\n }\n\n 12% {\n transform: rotate(-45deg)\n }\n\n 24% {\n transform: rotate(-90deg)\n }\n\n 36% {\n transform: rotate(-135deg)\n }\n\n 48% {\n left: 50px;\n transform: rotate(-180deg)\n }\n\n 60% {\n left: 125px;\n opacity: 1;\n transform: rotate(-135deg)\n }\n\n 61%,95% {\n opacity: 0\n }\n}\n\n@keyframes tr {\n 0% {\n transform: rotate(0deg)\n }\n\n 12% {\n transform: rotate(-45deg)\n }\n\n 24% {\n transform: rotate(-90deg)\n }\n\n 36% {\n transform: rotate(-135deg)\n }\n\n 48% {\n transform: rotate(-180deg)\n }\n\n 60% {\n transform: rotate(-225deg)\n }\n\n 72% {\n transform: rotate(-270deg)\n }\n\n 84% {\n transform: rotate(-315deg)\n }\n\n 96%,100% {\n transform: rotate(-360deg)\n }\n}\n\n@keyframes bl {\n 0%,100% {\n transform: rotate(0deg)\n }\n\n 12% {\n transform: rotate(-45deg)\n }\n\n 24% {\n left: 50px;\n transform: rotate(-90deg)\n }\n\n 36% {\n left: 125px;\n opacity: 1;\n transform: rotate(-45deg)\n }\n\n 37%,83% {\n opacity: 0\n }\n\n 84% {\n left: -25px;\n opacity: 1;\n transform: rotate(-45deg)\n }\n\n 96% {\n left: 50px;\n transform: rotate(0deg)\n }\n}\n\n@keyframes br {\n 0%,96%,100% {\n transform: rotate(0deg)\n }\n\n 12% {\n left: 125px;\n opacity: 1;\n transform: rotate(45deg)\n }\n\n 13%,59% {\n opacity: 0\n }\n\n 60% {\n left: -25px;\n opacity: 1;\n transform: rotate(45deg)\n }\n\n 72% {\n left: 50px;\n transform: rotate(90deg)\n }\n\n 84% {\n transform: rotate(45deg)\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"1ed50b","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":211,"jsLen":0,"cssLen":852,"pureCSS":1,"html":"

\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: rotatey(360deg);\n }\n\n 100% {\n transform: rotatey(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:43.000Z","isPrivate":0,"projectId":"30fdc0","snapshot":null,"tags":null,"title":"loader by abdelfatad","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":275,"jsLen":0,"cssLen":435,"pureCSS":1,"html":"

\n \n

","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n stroke: #e0464b33;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #d2494b;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 1.4s linear infinite;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"34fa88","snapshot":null,"tags":null,"title":"loader by alexmaracinaru","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":250,"jsLen":0,"cssLen":1461,"pureCSS":1,"html":"

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

\n","css":".pyramid-loader {\n position: relative;\n width: 300px;\n height: 150px;\n display: block;\n transform-style: preserve-3d;\n transform: rotateX(-20deg);\n}\n\n.wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: spin 4s linear infinite;\n}\n\n@keyframes spin {\n 100% {\n transform: rotateY(360deg);\n }\n}\n\n.pyramid-loader .wrapper .side {\n width: 70px;\n height: 70px;\n background: linear-gradient(to bottom right, #FFA500, #FF4500);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n transform-origin: center top;\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n}\n\n.pyramid-loader .wrapper .side1 {\n transform: rotateZ(-30deg) rotateY(90deg);\n background: linear-gradient(to bottom right, #FF4500, #FFA500);\n}\n\n.pyramid-loader .wrapper .side2 {\n transform: rotateZ(30deg) rotateY(90deg);\n background: linear-gradient(to bottom right, #FFA500, #FF4500);\n}\n\n.pyramid-loader .wrapper .side3 {\n transform: rotateX(30deg);\n background: linear-gradient(to bottom right, #FFA500, #FF4500);\n}\n\n.pyramid-loader .wrapper .side4 {\n transform: rotateX(-30deg);\n background: linear-gradient(to bottom right, #FF4500, #FFA500);\n}\n\n.pyramid-loader .wrapper .shadow {\n width: 60px;\n height: 60px;\n background: #FF8C00;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n transform: rotateX(90deg) translateZ(-40px);\n filter: blur(12px);\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"407dcb","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":26,"jsLen":0,"cssLen":653,"pureCSS":1,"html":"

","css":".loader {\n width: 8px;\n height: 40px;\n border-radius: 4px;\n display: block;\n background-color: currentColor;\n margin: 20px auto;\n position: relative;\n color: blue;\n animation: animloader 0.3s 0.3s linear infinite alternate;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n width: 8px;\n height: 40px;\n border-radius: 4px;\n background: currentColor;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 20px;\n animation: animloader 0.3s 0.45s linear infinite alternate;\n}\n\n.loader::before {\n left: -20px;\n animation-delay: 0s;\n}\n\n@keyframes animloader {\n 0% {\n height: 48px;\n }\n\n 100% {\n height: 4px;\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"65edcd","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":202,"jsLen":0,"cssLen":1090,"pureCSS":1,"html":"

\n \n

","css":".spinner {\n --red: #d62d20;\n --blue: #0057e7;\n --green: #008744;\n --yellow: #ffa700;\n position: relative;\n width: 60px;\n}\n\n.spinner:before {\n content: \"\";\n display: block;\n padding-top: 100%;\n}\n\n.circular {\n animation: rotate73451 2s linear infinite;\n height: 100%;\n transform-origin: center center;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n}\n\n.path {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n animation: dash0175 1.5s ease-in-out infinite, color7123 6s ease-in-out infinite;\n stroke-linecap: round;\n}\n\n@keyframes rotate73451 {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes dash0175 {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n\n@keyframes color7123 {\n 100%, 0% {\n stroke: var(--red);\n }\n\n 40% {\n stroke: var(--blue);\n }\n\n 66% {\n stroke: var(--green);\n }\n\n 80%, 90% {\n stroke: var(--yellow);\n }\n}\n\n\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"689218","snapshot":null,"tags":null,"title":"loader by KSAplay","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":26,"jsLen":0,"cssLen":553,"pureCSS":1,"html":"

","css":".loader {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader::before,\n.loader::after {\n position: absolute;\n content: \"\";\n height: 8em;\n width: 8em;\n border: 1em solid #0060fa;\n border-radius: 50%;\n animation: loader_79178 2s linear infinite;\n}\n\n.loader::after {\n opacity: 0;\n animation-delay: 1s;\n}\n\n@keyframes loader_79178 {\n 0% {\n border: 1em solid #0060fa;\n transform: scale(0);\n opacity: 1;\n }\n\n 100% {\n border: 0 solid #0060fa;\n transform: scale(1);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"694183","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":26,"jsLen":0,"cssLen":566,"pureCSS":1,"html":"

","css":".loader {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n border: 10px solid;\n box-sizing: border-box;\n animation: animloader 1s linear infinite alternate;\n}\n\n@keyframes animloader {\n 0% {\n border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);\n }\n\n 33% {\n border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);\n }\n\n 66% {\n border-color: white white white rgba(255, 255, 255, 0);\n }\n\n 100% {\n border-color: white white white white;\n }\n} "},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"79b71c","snapshot":null,"tags":null,"title":"loader by funkyjuice213","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":184,"jsLen":0,"cssLen":980,"pureCSS":1,"html":"

\n","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.loader-bar {\n height: 25px;\n width: 6px;\n margin: 0 3px;\n border-radius: 20px;\n animation: loader 2s ease-in-out infinite;\n}\n\n.bar-1 {\n background: linear-gradient(to right, #00e6e6, #00ccff, #0099ff, #0066ff);\n animation-delay: 0s;\n box-shadow: 0px 0px 15px 3px #00e6e6;\n}\n\n.bar-2 {\n background: linear-gradient(to right, #00ccff, #0099ff, #0066ff, #00e6e6);\n animation-delay: 0.1s;\n box-shadow: 0px 0px 15px 3px #00ccff;\n}\n\n.bar-3 {\n background: linear-gradient(to right, #0099ff, #0066ff, #00e6e6, #00ccff);\n animation-delay: 0.2s;\n box-shadow: 0px 0px 15px 3px #0099ff;\n}\n\n.bar-4 {\n background: linear-gradient(to right, #0066ff, #00e6e6, #00ccff, #0099ff);\n animation-delay: 0.3s;\n box-shadow: 0px 0px 15px 3px #0066ff;\n}\n\n@keyframes loader {\n 0% {\n transform: scaleY(1);\n }\n\n 50% {\n transform: scaleY(2);\n }\n\n 100% {\n transform: scaleY(1);\n }\n}\n"}]}},"actionData":null,"errors":null}