{"html":"

","css":".loader {\n --uib-size: 2.8rem;\n --uib-speed: .9s;\n --uib-color: #183153;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.loaders {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n height: 100%;\n width: 100%;\n}\n\n.loaders::before {\n content: '';\n height: 20%;\n width: 20%;\n border-radius: 50%;\n background-color: var(--uib-color);\n transform: scale(0);\n opacity: 0.5;\n animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;\n box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);\n padding-bottom: 222px;\n}\n\n.loaders:nth-child(2) {\n transform: rotate(45deg);\n}\n\n.loaders:nth-child(2)::before {\n animation-delay: calc(var(--uib-speed) * -0.875);\n}\n\n.loaders:nth-child(3) {\n transform: rotate(90deg);\n}\n\n.loaders:nth-child(3)::before {\n animation-delay: calc(var(--uib-speed) * -0.75);\n}\n\n.loaders:nth-child(4) {\n transform: rotate(135deg);\n}\n\n.loaders:nth-child(4)::before {\n animation-delay: calc(var(--uib-speed) * -0.625);\n}\n\n.loaders:nth-child(5) {\n transform: rotate(180deg);\n}\n\n.loaders:nth-child(5)::before {\n animation-delay: calc(var(--uib-speed) * -0.5);\n}\n\n.loaders:nth-child(6) {\n transform: rotate(225deg);\n}\n\n.loaders:nth-child(6)::before {\n animation-delay: calc(var(--uib-speed) * -0.375);\n}\n\n.dot-spinner__dot:nth-child(7) {\n transform: rotate(270deg);\n}\n\n.loaders:nth-child(7)::before {\n animation-delay: calc(var(--uib-speed) * -0.25);\n}\n\n.loaders:nth-child(8) {\n transform: rotate(315deg);\n}\n\n.loaders:nth-child(8)::before {\n animation-delay: calc(var(--uib-speed) * -0.125);\n}\n\n@keyframes pulse0112 {\n 0%,\n 100% {\n transform: scale(0);\n opacity: 0.5;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n}\n"}

smooth-hound-6

👁 实时预览

📝 源代码