{"html":"

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

\n\n

\n","css":"/* vse je scoped na .tetris-loader-root – ni body, *, vh, vw */\n\n.tetris-loader-root {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n padding: 1.25rem 1.5rem;\n min-width: 13rem;\n border-radius: 0.9rem;\n\n background: #111318;\n box-shadow:\n 0 14px 30px rgba(0, 0, 0, 0.7),\n 0 0 0 1px rgba(255, 255, 255, 0.04);\n\n font-family:\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n sans-serif;\n}\n\n/* vrstica Tetris kock */\n\n.tetris-loader {\n display: flex;\n gap: 0.35rem;\n align-items: flex-end;\n}\n\n/* ena Tetris kocka = ena črka */\n\n.tetris-block {\n --tetris-size: 2.2rem;\n\n width: var(--tetris-size);\n height: var(--tetris-size);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n font-weight: 800;\n font-size: 0.95rem;\n text-transform: uppercase;\n color: #f6f7ff;\n\n background: linear-gradient(135deg, #5b68ff, #b54dff);\n border-radius: 0.45rem;\n box-shadow:\n 0 8px 16px rgba(0, 0, 0, 0.7),\n 0 0 0 2px rgba(8, 10, 26, 0.9),\n inset 0 0 0 1px rgba(255, 255, 255, 0.28);\n\n transform-origin: center;\n animation: tetris-loader-drop 2.4s cubic-bezier(0.25, 0.7, 0.2, 1.05) infinite;\n}\n\n/* fazni zamik padanja */\n\n.tetris-block:nth-child(1) {\n animation-delay: 0s;\n}\n.tetris-block:nth-child(2) {\n animation-delay: 0.15s;\n}\n.tetris-block:nth-child(3) {\n animation-delay: 0.3s;\n}\n.tetris-block:nth-child(4) {\n animation-delay: 0.45s;\n}\n.tetris-block:nth-child(5) {\n animation-delay: 0.6s;\n}\n.tetris-block:nth-child(6) {\n animation-delay: 0.75s;\n}\n.tetris-block:nth-child(7) {\n animation-delay: 0.9s;\n}\n\n/* animacija: pade od zgoraj, se zavrti, odskoči kot v Tetrisu */\n\n@keyframes tetris-loader-drop {\n 0% {\n opacity: 0;\n transform: translateY(-7rem) rotate(-90deg);\n }\n 20% {\n opacity: 1;\n transform: translateY(-2rem) rotate(-40deg);\n }\n 55% {\n transform: translateY(0) rotate(0deg);\n }\n 65% {\n /* bounce */\n transform: translateY(0.35rem) rotate(0deg);\n }\n 75% {\n transform: translateY(0) rotate(0deg);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) rotate(0deg);\n }\n}\n\n/* napis spodaj */\n\n.tetris-loader-text {\n margin-top: 0.9rem;\n color: #c4cad9;\n font-size: 0.85rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n}\n"}

dangerous-walrus-52

👁 实时预览

📝 源代码