【CSS】纯CSS Loading动画组件

<template><div class="ai-loader-box"><!-- AI loader --><div class="ai-loader"><div class="text"><p>AI智能分析中....</p></div><div class="horizontal"><div class="circlesup"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div><div class="circlesdwn"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div></div><div class="vertical"><div class="circlesup"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div><div class="circlesdwn"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div></div></div></div>
</template><style scoped>
.ai-loader-box{position: relative;width: 600px;height: 600px;margin: 20px auto;
}
/* Start the loader code, first, let's align it the center of screen */
.ai-loader {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-mos-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;/* disable selection and cursor changes */-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: default;
}/* Text align it the center of screen and connect the looped animation for 2 seconds */
.text {position: absolute;left: -110px;top: -1.7em;/* -webkit-animation: text 2s infinite;-moz-animation: text 2s infinite;-moz-animation: text 2s infinite;-ms-animation: text 2s infinite;-o-animation: text 2s infinite;animation: text 2s infinite; */width: 280px;z-index: 10;color: #f00;background: #fff1f1db;border-radius: 4px;font-size: 40px;
}/* Set for the first layer vertical position */
.vertical {position: absolute;top: -1.84em;left: -0.4em;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);
}/* Set for the second layer horizontal position */
.horizontal {position: absolute;top: 0em;left: 0em;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);
}/* The next two classes do mirror for animation */
.circlesup {position: absolute;top: -4.7em;right: 12.1em;
}.circlesdwn {position: absolute;top: 2.5em;right: -13.5em;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);
}/* Create a container for our circles, rotate it 45 degrees and set animation*/
.circle {position: absolute;width: 15em;height: 15em;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-ms-animation: orbit 2s infinite;-o-animation: orbit 2s infinite;animation: orbit 2s infinite;z-index: 5;
}/* Style's of our circles */
.circle:after {content: '';position: absolute;width: 2em;height: 2em;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;border-radius: 100%;background: rgb(255, 20, 20);/* Pick a color 1*/
}.circle:nth-child(2) {-webkit-animation-delay: 100ms;-moz-animation-delay: 100ms;-ms-animation-delay: 100ms;-o-animation-delay: 100ms;animation-delay: 100ms;z-index: 4;
}.circle:nth-child(2):after {background: var(--el-color-primary);/* Pick a color 2*/-webkit-transform: scale(0.8,0.8);-moz-transform: scale(0.8,0.8);-ms-transform: scale(0.8,0.8);-o-transform: scale(0.8,0.8);transform: scale(0.8,0.8);
}.circle:nth-child(3) {-webkit-animation-delay: 225ms;-moz-animation-delay: 225ms;-ms-animation-delay: 225ms;-o-animation-delay: 225ms;animation-delay: 225ms;z-index: 3;
}.circle:nth-child(3):after {background: var(--el-color-primary-light-3);/* Pick a color 3*/-webkit-transform: scale(0.6,0.6);-moz-transform: scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-o-transform: scale(0.6,0.6);transform: scale(0.6,0.6);
}.circle:nth-child(4) {-webkit-animation-delay: 350ms;-moz-animation-delay: 350ms;-ms-animation-delay: 350ms;-o-animation-delay: 350ms;animation-delay: 350ms;z-index: 2;
}.circle:nth-child(4):after {background: var(--el-color-primary-light-5);/* Pick a color 4*/-webkit-transform: scale(0.4,0.4);-moz-transform: scale(0.4,0.4);-ms-transform: scale(0.4,0.4);-o-transform: scale(0.4,0.4);transform: scale(0.4,0.4);
}.circle:nth-child(5) {-webkit-animation-delay: 475ms;-moz-animation-delay: 475ms;-ms-animation-delay: 475ms;-o-animation-delay: 475ms;animation-delay: 475ms;z-index: 1;
}.circle:nth-child(5):after {background: var(--el-color-primary);/* Pick a color 5*/-webkit-transform: scale(0.2,0.2);-moz-transform: scale(0.2,0.2);-ms-transform: scale(0.2,0.2);-o-transform: scale(0.2,0.2);transform: scale(0.2,0.2);
}/* Animation keys */
@-webkit-keyframes orbit {0% {-webkit-transform: rotate(45deg);}5% {-webkit-transform: rotate(45deg);-webkit-animation-timing-function: ease-out;}70% {-webkit-transform: rotate(405deg);-webkit-animation-timing-function: ease-in;}100% {-webkit-transform: rotate(405deg);}
}@-moz-keyframes orbit {0% {-moz-transform: rotate(45deg);}5% {-moz-transform: rotate(45deg);-moz-animation-timing-function: ease-out;}70% {-moz-transform: rotate(405deg);-moz-animation-timing-function: ease-in;}100% {-moz-transform: rotate(405deg);}
}@-ms-keyframes orbit {0% {-ms-transform: rotate(45deg);}5% {-ms-transform: rotate(45deg);-ms-animation-timing-function: ease-out;}70% {-ms-transform: rotate(405deg);-ms-animation-timing-function: ease-in;}100% {-ms-transform: rotate(405deg);}
}@-o-keyframes orbit {0% {-o-transform: rotate(45deg);}5% {-o-transform: rotate(45deg);-o-animation-timing-function: ease-out;}70% {-o-transform: rotate(405deg);-o-animation-timing-function: ease-in;}100% {-o-transform: rotate(405deg);}
}@keyframes orbit {0% {transform: rotate(45deg);}5% {transform: rotate(45deg);animation-timing-function: ease-out;}70% {transform: rotate(405deg);animation-timing-function: ease-in;}100% {transform: rotate(405deg);}
}@-webkit-keyframes text {0% {-webkit-transform: scale(0.2,0.2);-webkit-animation-timing-function: ease-out;}40%,60% {-webkit-transform: scale(1,1);-webkit-animation-timing-function: ease-out;}70%,100% {-webkit-transform: scale(0.2,0.2);}
}@-moz-keyframes text {0% {-moz-transform: scale(0.2,0.2);-moz-animation-timing-function: ease-out;}50% {-moz-transform: scale(1,1);-moz-animation-timing-function: ease-out;}60% {-moz-transform: scale(1,1);-moz-animation-timing-function: ease-out;}100% {-moz-transform: scale(0.2,0.2);}
}@-mos-keyframes text {0% {-mos-transform: scale(0.2,0.2);-mos-animation-timing-function: ease-out;}50% {-mos-transform: scale(1,1);-mos-animation-timing-function: ease-out;}60% {-mos-transform: scale(1,1);-mos-animation-timing-function: ease-out;}100% {-mos-transform: scale(0.2,0.2);}
}@-o-keyframes text {0% {-o-transform: scale(1,1);-o-animation-timing-function: ease-out;}50% {-o-transform: scale(2,2);-o-animation-timing-function: ease-out;}100% {-o-transform: scale(1,1);-o-animation-timing-function: ease-out;}
}@keyframes text {0% {transform: scale(1,1);animation-timing-function: ease-out;}50% {transform: scale(2,2);animation-timing-function: ease-out;}100% {transform: scale(1,1);animation-timing-function: ease-out;}
}
</style>