vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
2 lines (1 loc) • 15 kB
CSS
.spin-wrap[data-v-9a0a1fc2]{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.spin-wrap .spin-container[data-v-9a0a1fc2]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:9}.spin-wrap .spin-container .spin-box[data-v-9a0a1fc2]{text-align:center;line-height:0}.spin-wrap .spin-container .spin-box .spin-loading-dot[data-v-9a0a1fc2]{position:relative;display:inline-block;transform:rotate(45deg);animation:loadingDot-9a0a1fc2 1.2s linear infinite;-webkit-animation:loadingDot-9a0a1fc2 1.2s linear infinite}@keyframes loadingDot-9a0a1fc2{to{transform:rotate(405deg)}}.spin-wrap .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]{position:absolute;background:var(--spin-primary-color);border-radius:50%;opacity:.3;animation:loadingDotColor-9a0a1fc2 1s linear infinite alternate;-webkit-animation:loadingDotColor-9a0a1fc2 1s linear infinite alternate}@keyframes loadingDotColor-9a0a1fc2{to{opacity:1}}.spin-wrap .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]:first-child{top:0;left:0}.spin-wrap .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]:nth-child(2){top:0;right:0;animation-delay:.4s;-webkit-animation-delay:.4s}.spin-wrap .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]:nth-child(3){bottom:0;right:0;animation-delay:.8s;-webkit-animation-delay:.8s}.spin-wrap .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]:last-child{bottom:0;left:0;animation-delay:1.2s;-webkit-animation-delay:1.2s}.spin-wrap .spin-container .spin-box .spin-box-rotate[data-v-9a0a1fc2]{animation:spinCircle-9a0a1fc2 2.4s ease-in-out;-webkit-animation:spinCircle-9a0a1fc2 2.4s ease-in-out}.spin-wrap .spin-container .spin-box .spin-container-box[data-v-9a0a1fc2]{text-align:center;line-height:0;position:relative}.spin-wrap .spin-container .spin-box .spin-container-box .spin-dot-items[data-v-9a0a1fc2]{position:relative;display:inline-block}.spin-wrap .spin-container .spin-box .spin-container-box .spin-dot-items .dot-item[data-v-9a0a1fc2]{position:absolute;background:var(--spin-primary-color);border-radius:50%}.spin-wrap .spin-container .spin-box .spin-container-box .spin-dot-items .dot-item[data-v-9a0a1fc2]:first-child{top:0;left:0;opacity:.3;animation:spinColor1-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor1-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-dot-items .dot-item[data-v-9a0a1fc2]:nth-child(2){top:0;right:0;opacity:.5;animation:spinColor3-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor3-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-dot-items .dot-item[data-v-9a0a1fc2]:nth-child(3){bottom:0;right:0;opacity:.7;animation:spinColor5-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor5-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-dot-items .dot-item[data-v-9a0a1fc2]:last-child{bottom:0;left:0;opacity:.9;animation:spinColor7-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor7-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-line-items[data-v-9a0a1fc2]{position:relative;display:inline-block}.spin-wrap .spin-container .spin-box .spin-container-box .spin-line-items .line-item[data-v-9a0a1fc2]{position:absolute;top:0;left:50%;transform:translate(-50%);background-color:var(--spin-primary-color)}.spin-wrap .spin-container .spin-box .spin-container-box .spin-line-items .line-item[data-v-9a0a1fc2]:first-child{opacity:.3;animation:spinColor1-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor1-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-line-items .line-item[data-v-9a0a1fc2]:nth-child(2){opacity:.5;transform:translate(-50%) rotate(90deg);animation:spinColor3-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor3-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-line-items .line-item[data-v-9a0a1fc2]:nth-child(3){opacity:.7;transform:translate(-50%) rotate(180deg);animation:spinColor5-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor5-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-line-items .line-item[data-v-9a0a1fc2]:last-child{opacity:.9;transform:translate(-50%) rotate(270deg);animation:spinColor7-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor7-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate[data-v-9a0a1fc2]{position:absolute;left:0;transform:rotate(45deg)}.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .dot-item[data-v-9a0a1fc2]:first-child,.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .line-item[data-v-9a0a1fc2]:first-child{opacity:.4;animation:spinColor2-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor2-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .dot-item[data-v-9a0a1fc2]:nth-child(2),.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .line-item[data-v-9a0a1fc2]:nth-child(2){opacity:.6;animation:spinColor4-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor4-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .dot-item[data-v-9a0a1fc2]:nth-child(3),.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .line-item[data-v-9a0a1fc2]:nth-child(3){opacity:.8;animation:spinColor6-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor6-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .dot-item[data-v-9a0a1fc2]:last-child,.spin-wrap .spin-container .spin-box .spin-container-box .spin-rotate .line-item[data-v-9a0a1fc2]:last-child{opacity:1;animation:spinColor8-9a0a1fc2 var(--spin-speed) linear infinite;-webkit-animation:spinColor8-9a0a1fc2 var(--spin-speed) linear infinite}.spin-wrap .spin-container .spin-box .spin-container-box .has-tip[data-v-9a0a1fc2]{left:50%;transform:translate(-50%) rotate(45deg)}@keyframes spinColor1-9a0a1fc2{0%{opacity:.3}14.3%{opacity:1}to{opacity:.4}}@keyframes spinColor2-9a0a1fc2{0%{opacity:.4}14.3%{opacity:.3}28.6%{opacity:1}to{opacity:.5}}@keyframes spinColor3-9a0a1fc2{0%{opacity:.5}28.6%{opacity:.3}42.8%{opacity:1}to{opacity:.6}}@keyframes spinColor4-9a0a1fc2{0%{opacity:.6}42.8%{opacity:.3}57.1%{opacity:1}to{opacity:.7}}@keyframes spinColor5-9a0a1fc2{0%{opacity:.7}57.1%{opacity:.3}71.4%{opacity:1}to{opacity:.8}}@keyframes spinColor6-9a0a1fc2{0%{opacity:.8}71.4%{opacity:.3}85.7%{opacity:1}to{opacity:.9}}@keyframes spinColor7-9a0a1fc2{0%{opacity:.9}85.7%{opacity:.3}to{opacity:1}}@keyframes spinColor8-9a0a1fc2{0%{opacity:1}to{opacity:.3}}.spin-wrap .spin-container .spin-box .spin-ring-circle[data-v-9a0a1fc2],.spin-wrap .spin-container .spin-box .spin-ring-rail[data-v-9a0a1fc2]{display:inline-block;overflow:hidden;animation:spinCircle-9a0a1fc2 .8s linear infinite;-webkit-animation:spinCircle-9a0a1fc2 .8s linear infinite}.spin-wrap .spin-container .spin-box .circle .trail[data-v-9a0a1fc2]{stroke-width:var(--spin-circle-width);stroke-dashoffset:0}.spin-wrap .spin-container .spin-box .circle .path[data-v-9a0a1fc2]{stroke:var(--spin-primary-color);stroke-width:var(--spin-circle-width);stroke-dashoffset:0}.spin-wrap .spin-container .spin-box .spin-dynamic-circle[data-v-9a0a1fc2]{display:inline-block;animation:spinCircle-9a0a1fc2 2s linear infinite;-webkit-animation:spinCircle-9a0a1fc2 2s linear infinite}.spin-wrap .spin-container .spin-box .spin-dynamic-circle .circle .path[data-v-9a0a1fc2]{stroke-width:5;stroke-dasharray:90,150;stroke-dashoffset:0;stroke:var(--spin-primary-color);stroke-linecap:round;animation:loadingDash-9a0a1fc2 1.5s ease-in-out infinite;-webkit-animation:loadingDash-9a0a1fc2 1.5s ease-in-out infinite}@keyframes loadingDash-9a0a1fc2{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-124px}}@keyframes spinCircle-9a0a1fc2{to{transform:rotate(360deg)}}.spin-wrap .spin-container .spin-box .spin-magic-ring[data-v-9a0a1fc2]{display:inline-block;position:relative;transform:rotate(45deg);animation:spinRotate-9a0a1fc2 2.5s linear infinite;-webkit-animation:spinRotate-9a0a1fc2 2.5s linear infinite}@keyframes spinRotate-9a0a1fc2{to{transform:rotate(405deg)}}.spin-wrap .spin-container .spin-box .spin-magic-ring .outer-ring[data-v-9a0a1fc2]{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--spin-primary-color);border-radius:50%;animation:spinOuterRing-9a0a1fc2 1.5s linear infinite;-webkit-animation:spinOuterRing-9a0a1fc2 1.5s linear infinite}@keyframes spinOuterRing-9a0a1fc2{to{transform:rotateY(360deg)}}.spin-wrap .spin-container .spin-box .spin-magic-ring .inner-ring[data-v-9a0a1fc2]{position:absolute;border-style:solid;border-color:var(--spin-magic-ring-color);border-radius:50%;animation:spinInnerRing-9a0a1fc2 1.5s linear infinite;-webkit-animation:spinInnerRing-9a0a1fc2 1.5s linear infinite}@keyframes spinInnerRing-9a0a1fc2{0%{transform:rotateY(45deg)}to{transform:rotateY(405deg)}}.spin-wrap .spin-container .spin-box .spin-tip[data-v-9a0a1fc2]{color:var(--spin-primary-color);text-align:center}.spin-wrap .spin-content[data-v-9a0a1fc2]{width:100%;height:100%;transition:opacity .3s}.spin-wrap .spin-blur[data-v-9a0a1fc2]{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.spin-small .spin-container .spin-box .spin-loading-dot[data-v-9a0a1fc2]{width:20px;height:20px}.spin-small .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]{width:8px;height:8px}.spin-small .spin-container .spin-box .spin-dot-items[data-v-9a0a1fc2]{width:20px;height:20px}.spin-small .spin-container .spin-box .spin-dot-items .dot-item[data-v-9a0a1fc2]{width:6px;height:6px}.spin-small .spin-container .spin-box .spin-line-items[data-v-9a0a1fc2]{--line-length: 8px;width:calc(var(--line-length) * 3);height:calc(var(--line-length) * 3)}.spin-small .spin-container .spin-box .spin-line-items .line-item[data-v-9a0a1fc2]{transform-origin:50% calc(var(--line-length) * 1.5);border-radius:var(--line-length);width:calc(var(--line-length) / 2.5);height:var(--line-length)}.spin-small .spin-container .spin-box .spin-ring-circle[data-v-9a0a1fc2],.spin-small .spin-container .spin-box .spin-ring-rail[data-v-9a0a1fc2]{width:24px;height:24px}.spin-small .spin-container .spin-box .spin-dynamic-circle[data-v-9a0a1fc2]{width:26px;height:26px}.spin-small .spin-container .spin-box .spin-magic-ring[data-v-9a0a1fc2]{width:24px;height:24px}.spin-small .spin-container .spin-box .spin-magic-ring .outer-ring[data-v-9a0a1fc2],.spin-small .spin-container .spin-box .spin-magic-ring .inner-ring[data-v-9a0a1fc2]{border-width:3px}.spin-small .spin-container .spin-box .spin-magic-ring .inner-ring[data-v-9a0a1fc2]{top:3px;left:3px;width:calc(100% - 6px);height:calc(100% - 6px)}.spin-small .spin-container .spin-box .spin-tip[data-v-9a0a1fc2]{font-size:14px;font-weight:400;line-height:16px;margin-top:8px}.spin-small .spin-container .spin-box .dot-tip[data-v-9a0a1fc2]{margin-top:12px}.spin-middle .spin-container .spin-box .spin-loading-dot[data-v-9a0a1fc2]{width:30px;height:30px}.spin-middle .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]{width:11px;height:11px}.spin-middle .spin-container .spin-box .spin-dot-items[data-v-9a0a1fc2]{width:30px;height:30px}.spin-middle .spin-container .spin-box .spin-dot-items .dot-item[data-v-9a0a1fc2]{width:9px;height:9px}.spin-middle .spin-container .spin-box .spin-line-items[data-v-9a0a1fc2]{--line-length: 12px;width:calc(var(--line-length) * 3);height:calc(var(--line-length) * 3)}.spin-middle .spin-container .spin-box .spin-line-items .line-item[data-v-9a0a1fc2]{transform-origin:50% calc(var(--line-length) * 1.5);border-radius:var(--line-length);width:calc(var(--line-length) / 3);height:var(--line-length)}.spin-middle .spin-container .spin-box .spin-ring-circle[data-v-9a0a1fc2],.spin-middle .spin-container .spin-box .spin-ring-rail[data-v-9a0a1fc2]{width:36px;height:36px}.spin-middle .spin-container .spin-box .spin-dynamic-circle[data-v-9a0a1fc2]{width:38px;height:38px}.spin-middle .spin-container .spin-box .spin-magic-ring[data-v-9a0a1fc2]{width:36px;height:36px}.spin-middle .spin-container .spin-box .spin-magic-ring .outer-ring[data-v-9a0a1fc2],.spin-middle .spin-container .spin-box .spin-magic-ring .inner-ring[data-v-9a0a1fc2]{border-width:5px}.spin-middle .spin-container .spin-box .spin-magic-ring .inner-ring[data-v-9a0a1fc2]{top:5px;left:5px;width:calc(100% - 10px);height:calc(100% - 10px)}.spin-middle .spin-container .spin-box .spin-tip[data-v-9a0a1fc2]{font-size:14px;font-weight:500;line-height:18px;margin-top:12px}.spin-middle .spin-container .spin-box .dot-tip[data-v-9a0a1fc2]{margin-top:16px}.spin-large .spin-container .spin-box .spin-loading-dot[data-v-9a0a1fc2]{width:40px;height:40px}.spin-large .spin-container .spin-box .spin-loading-dot .dot-item[data-v-9a0a1fc2]{width:15px;height:15px}.spin-large .spin-container .spin-box .spin-dot-items[data-v-9a0a1fc2]{width:40px;height:40px}.spin-large .spin-container .spin-box .spin-dot-items .dot-item[data-v-9a0a1fc2]{width:12px;height:12px}.spin-large .spin-container .spin-box .spin-line-items[data-v-9a0a1fc2]{--line-length: 16px;width:calc(var(--line-length) * 3);height:calc(var(--line-length) * 3)}.spin-large .spin-container .spin-box .spin-line-items .line-item[data-v-9a0a1fc2]{transform-origin:50% calc(var(--line-length) * 1.5);border-radius:var(--line-length);width:calc(var(--line-length) / 3);height:var(--line-length)}.spin-large .spin-container .spin-box .spin-ring-circle[data-v-9a0a1fc2],.spin-large .spin-container .spin-box .spin-ring-rail[data-v-9a0a1fc2]{width:48px;height:48px}.spin-large .spin-container .spin-box .spin-dynamic-circle[data-v-9a0a1fc2]{width:50px;height:50px}.spin-large .spin-container .spin-box .spin-magic-ring[data-v-9a0a1fc2]{width:48px;height:48px}.spin-large .spin-container .spin-box .spin-magic-ring .outer-ring[data-v-9a0a1fc2],.spin-large .spin-container .spin-box .spin-magic-ring .inner-ring[data-v-9a0a1fc2]{border-width:6px}.spin-large .spin-container .spin-box .spin-magic-ring .inner-ring[data-v-9a0a1fc2]{top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 12px)}.spin-large .spin-container .spin-box .spin-tip[data-v-9a0a1fc2]{font-size:16px;font-weight:500;line-height:20px;margin-top:16px}.spin-large .spin-container .spin-box .dot-tip[data-v-9a0a1fc2]{margin-top:22px}