{"html":"

\n \n

\n","css":".bar {\n position: relative;\n display: inline-block;\n margin: 0 8px;\n width: 10px; /* Increased width */\n height: 50px; /* Increased height */\n border-radius: 0px;\n background: #fff; /* Changed color to white */\n box-shadow: 0 4px 10px rgba(47, 47, 47, 0.3); /* Added box-shadow */\n animation: swing infinite 5s cubic-bezier(0.955, -0.01, 1, 1);\n transform-origin: 100% 100%;\n}\n\n.bar::before {\n content: \"\";\n position: absolute;\n z-index: -1;\n bottom: 0;\n display: block;\n width: 10px; /* Updated to match increased width */\n height: 10px;\n background: transparent;\n box-shadow: 0 4px rgba(29, 29, 29, 0.3); /* Updated shadow */\n animation: extend infinite 5s cubic-bezier(0.955, -0.01, 1, 1);\n opacity: 0;\n transform-origin: 0% 0%;\n}\n\n.bar:nth-child(2),\n.bar:nth-child(2)::before {\n animation-delay: 0.3s;\n}\n\n.bar:nth-child(3),\n.bar:nth-child(3)::before {\n animation-delay: 0.6s;\n}\n\n.bar:nth-child(4),\n.bar:nth-child(4)::before {\n animation-delay: 0.9s;\n}\n\n.bar:nth-child(5),\n.bar:nth-child(5)::before {\n animation-delay: 1.2s;\n}\n\n.bar:last-of-type {\n animation-name: swing-last;\n}\n\n.bar:last-of-type::before {\n animation-name: extend-last;\n}\n\n@keyframes swing {\n 10% {\n transform: rotate(70deg);\n }\n 60% {\n transform: rotate(70deg);\n }\n 70% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes swing-last {\n 10% {\n transform: rotate(90deg);\n }\n 60% {\n transform: rotate(90deg);\n }\n 70% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes extend {\n 10% {\n transform: rotate(-70deg);\n width: 20px;\n opacity: 1;\n left: 0px;\n bottom: -1px;\n }\n 60% {\n transform: rotate(-70deg);\n width: 20px;\n opacity: 1;\n }\n 70% {\n width: 10px;\n transform: rotate(0deg);\n opacity: 0;\n }\n}\n\n@keyframes extend-last {\n 10% {\n transform: rotate(-90deg);\n width: 20px;\n height: 2px;\n opacity: 0.5;\n left: 3px;\n bottom: -1px;\n }\n 60% {\n transform: rotate(-90deg);\n width: 20px;\n height: 2px;\n opacity: 0.5;\n }\n 70% {\n transform: rotate(0deg);\n width: 10px;\n height: 10px;\n opacity: 0;\n }\n}\n\n.bars-loader {\n position: relative;\n display: block;\n margin: auto;\n padding: 0;\n width: 150px; /* Adjusted loader width */\n height: 50px; /* Adjusted loader height */\n text-align: center;\n}\n"}

fuzzy-eagle-79

👁 实时预览

📝 源代码