[{"id":150,"created_at":"2023-12-21T15:45:04.758357+00:00","html":"

\r\n

","css":"// Variables.\r\n$tile-bg: #cfcfdf;\r\n\r\n// Styles.\r\n.tiles {\r\n left: 50%;\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-50%);\r\n width: 330px;\r\n}\r\n\r\n.tile {\r\n animation: 1s ease 0s pulse infinite;\r\n background: $tile-bg;\r\n border-radius: 4px;\r\n float: left;\r\n height: 75px;\r\n margin: 5px;\r\n width: 100px;\r\n}\r\n\r\n// Loop from 1-9.\r\n@for $i from 1 through 9 {\r\n .tile {\r\n\r\n // :nth-child(1-9) \r\n &:nth-child(#{$i}) {\r\n\r\n // Delay the animation. Delay increases as items loop.\r\n animation-delay: $i * (1s / 18);\r\n }\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n background: $tile-bg;\r\n transform: scale(1);\r\n }\r\n\r\n 25% {\r\n background: darken($tile-bg, 10%);\r\n transform: scale(1.015);\r\n }\r\n\r\n 50% {\r\n background: $tile-bg;\r\n transform: scale(1);\r\n }\r\n}\r\n\r\nhtml {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n\r\nbody {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n position: relative;\r\n text-align: center;\r\n width: 100%;\r\n}","js":"// ","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"tqdaov","description":"Grid Skeleton Loader SCSS\r\n","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": true},"tags":["scss","loader","animation","css","html","js","card","skeleton"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":354}],"profiles":{"username":"devcanvas"}}]