{"html":"

\n\n

\n Loading...\n

\n","css":"/* --- LOADER CONTAINER & RESPONSIVE SCALING --- */\n.cart-loader {\n --loader-scale: 1;\n position: relative;\n width: 160px;\n height: 180px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n transform: scale(var(--loader-scale));\n transform-origin: center center;\n}\n\n@media (max-width: 768px) {\n .cart-loader {\n --loader-scale: 0.85;\n }\n}\n@media (max-width: 480px) {\n .cart-loader {\n --loader-scale: 0.7;\n }\n}\n@media (min-width: 1400px) {\n .cart-loader {\n --loader-scale: 1.2;\n }\n}\n\n/* --- ITEMS LAYER (Z-index 1: Behind Cart Front) --- */\n.items-container {\n position: absolute;\n top: 20px;\n left: 0;\n width: 100%;\n height: 100px;\n z-index: 1;\n}\n\n/* Base class for all falling items */\n.item {\n position: absolute;\n opacity: 0;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n animation: drop-item 4s cubic-bezier(0.3, 0, 0.5, 1) infinite;\n}\n\n/* 1. Mobile Phone */\n#item-mobile {\n top: -15px;\n left: 58px;\n width: 20px;\n height: 32px;\n --end-rot: -15deg;\n animation-delay: 0.05s;\n background-image: url(\"data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2036'%20xmlns='://www.w3.org/2000/svg'%3E%3Crect%20x='2'%20y='2'%20width='20'%20height='32'%20rx='3'%20fill='%233b82f6'/%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='25'%20rx='1'%20fill='%23eff6ff'/%3E%3Ccircle%20cx='12'%20cy='31.5'%20r='1.5'%20fill='%23eff6ff'/%3E%3C/svg%3E\");\n}\n\n/* 2. Laptop */\n#item-laptop {\n top: -10px;\n left: 70px;\n width: 35px;\n height: 26px;\n --end-rot: 10deg;\n animation-delay: 0.8s;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='28' height='18' rx='1' fill='%2364748b'/%3E%3Crect x='8' y='6' width='24' height='14' fill='%23cbd5e1'/%3E%3Cpolygon points='2,24 38,24 40,28 0,28' fill='%23334155' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n/* 3. Tablet/Tab */\n#item-tab {\n top: -20px;\n left: 85px;\n width: 24px;\n height: 32px;\n --end-rot: 25deg;\n animation-delay: 1.6s;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='28' height='36' rx='2' fill='%23a855f7'/%3E%3Crect x='4' y='4' width='24' height='32' fill='%23faf5ff'/%3E%3C/svg%3E\");\n}\n\n/* 4. Headphones */\n#item-headphone {\n top: -15px;\n left: 58px;\n width: 28px;\n height: 28px;\n --end-rot: -5deg;\n animation-delay: 2.4s;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 6 16 C 6 4, 26 4, 26 16' fill='none' stroke='%23ef4444' stroke-width='4'/%3E%3Crect x='2' y='14' width='8' height='14' rx='4' fill='%23ef4444'/%3E%3Crect x='22' y='14' width='8' height='14' rx='4' fill='%23ef4444'/%3E%3C/svg%3E\");\n}\n\n/* 5. Mixer */\n#item-mixer {\n top: -25px;\n left: 75px;\n width: 26px;\n height: 34px;\n --end-rot: 5deg;\n animation-delay: 3.2s;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 8 20 L 24 20 L 28 36 L 4 36 Z' fill='%2314b8a6' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='28' r='4' fill='%23ccfbf1'/%3E%3Cpolygon points='10,20 22,20 24,8 8,8' fill='%23cbd5e1'/%3E%3Crect x='6' y='4' width='20' height='4' rx='2' fill='%230f766e'/%3E%3Cpath d='M 8 10 L 3 10 L 3 18 L 8 18' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n/* --- CART LAYER (Z-index 2: In Front of Items) --- */\n#cart-icon {\n position: relative;\n z-index: 2;\n width: 140px;\n height: 120px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 140 120' width='140' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23334155' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Base Line --%3E%3Cline x1='35' y1='90' x2='110' y2='90' /%3E%3C!-- Back Support Leg --%3E%3Cline x1='40' y1='90' x2='50' y2='70' /%3E%3C!-- Handle --%3E%3Cpolyline points='10,15 25,15 40,30' /%3E%3C!-- Basket Vertical Lines --%3E%3Cline x1='40' y1='30' x2='50' y2='70' /%3E%3Cline x1='68' y1='30' x2='71' y2='70' /%3E%3Cline x1='96' y1='30' x2='93' y2='70' /%3E%3Cline x1='125' y1='30' x2='115' y2='70' /%3E%3C!-- Basket Horizontal Lines --%3E%3Cline x1='40' y1='30' x2='125' y2='30' /%3E%3Cline x1='43' y1='43' x2='122' y2='43' /%3E%3Cline x1='47' y1='57' x2='118' y2='57' /%3E%3Cline x1='50' y1='70' x2='115' y2='70' /%3E%3C!-- Wheels --%3E%3Ccircle cx='45' cy='105' r='8' /%3E%3Ccircle cx='105' cy='105' r='8' /%3E%3C/g%3E%3C/svg%3E\");\n animation: cart-bounce 0.8s ease-in-out infinite;\n animation-delay: 0.2s;\n}\n\n/* --- TEXT STYLING --- */\n.loading-text {\n margin-top: 10px;\n font-size: 16px;\n font-weight: 700;\n color: #1e293b;\n letter-spacing: 0.5px;\n white-space: nowrap;\n}\n\n.dot {\n display: inline-block;\n animation: wave 1.5s infinite;\n}\n.dot:nth-child(1) {\n animation-delay: 0s;\n}\n.dot:nth-child(2) {\n animation-delay: 0.1s;\n}\n.dot:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n/* --- ANIMATIONS --- */\n@keyframes drop-item {\n 0% {\n transform: translateY(-20px) scale(0.8) rotate(0deg);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n transform: translateY(20px) scale(1) rotate(calc(var(--end-rot) / 2));\n }\n 25% {\n transform: translateY(55px) scale(1) rotate(var(--end-rot));\n opacity: 1;\n }\n 35%,\n 100% {\n transform: translateY(75px) scale(0.9) rotate(var(--end-rot));\n opacity: 0;\n }\n}\n\n@keyframes cart-bounce {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(2.5px);\n }\n 60% {\n transform: translateY(0);\n }\n}\n\n@keyframes wave {\n 0%,\n 60%,\n 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-3px);\n }\n}\n"}

kind-earwig-98

👁 实时预览

📝 源代码