{"html":"

\n","css":".animated-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n\n width: 230px; /* Increased width to account for the gaps */\n height: 100px;\n\n margin-top: -50px;\n margin-left: -115px; /* Adjusted for the new loader width */\n\n perspective: 1000px;\n transform-style: preserve-3d;\n}\n\n/* The line */\n.line {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 20px;\n height: 100px;\n\n background-color: #f5f5f5; /* White bars */\n box-shadow: 0 4px 15px rgba(38, 38, 38, 0.6); /* White glow shadow */\n\n transform: scaleY(0);\n transform-style: preserve-3d;\n\n animation: animate-line 3s cubic-bezier(0.81, 0.04, 0.4, 0.7) infinite;\n}\n\n/* Positioning the bars with 5px gaps */\n.line:nth-child(2) {\n left: 25px; /* Adding 5px gap */\n animation-delay: 50ms;\n}\n\n.line:nth-child(3) {\n left: 50px; /* Adding 5px gap */\n animation-delay: 100ms;\n}\n\n.line:nth-child(4) {\n left: 75px; /* Adding 5px gap */\n animation-delay: 150ms;\n}\n\n.line:nth-child(5) {\n left: 100px; /* Adding 5px gap */\n animation-delay: 200ms;\n}\n\n.line:nth-child(6) {\n left: 125px; /* Adding 5px gap */\n animation-delay: 250ms;\n}\n\n.line:nth-child(7) {\n left: 150px; /* Adding 5px gap */\n animation-delay: 300ms;\n}\n\n.line:nth-child(8) {\n left: 175px; /* Adding 5px gap */\n animation-delay: 350ms;\n}\n\n@keyframes animate-line {\n 0% {\n transform: rotateZ(-180deg) rotateX(-360deg);\n }\n 75%,\n 100% {\n transform: rotateZ(0) rotateX(0);\n }\n}\n"}

tiny-termite-3

👁 实时预览

📝 源代码