.fui-load__ani.data-v-ffc2d581 { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } .fui-load__ani-fixed.data-v-ffc2d581 { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; z-index: 996; justify-content: center; align-items: center; } .fui-load__ani-1.data-v-ffc2d581{ flex-direction: row; } .fui-load__ani-1 view.data-v-ffc2d581 { width: 36rpx; height: 36rpx; border-radius: 50%; display: inline-block; animation: ani_1-ffc2d581 1.4s infinite ease-in-out; animation-fill-mode: both; } .fui-load__ani-1 .fui-load__ani-a.data-v-ffc2d581 { animation-delay: -0.30s; } .fui-load__ani-1 .fui-load__ani-b.data-v-ffc2d581 { animation-delay: -0.15s; } @keyframes ani_1-ffc2d581 { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1) } } .fui-load__ani-2.data-v-ffc2d581 { position: relative; width: 60rpx; height: 60rpx; display: inline-block; vertical-align: middle; } .fui-load__ani-line.data-v-ffc2d581 { width: 8rpx; position: absolute; border-top-left-radius: 8rpx; border-top-right-radius: 8rpx; bottom: 0; transform: translateZ(0); } .fui-load__ani-c.data-v-ffc2d581 { animation: ani_2-ffc2d581 0.5s ease alternate infinite; } .fui-load__ani-d.data-v-ffc2d581 { left: 20rpx; animation: ani_2-ffc2d581 0.5s 0.2s ease alternate infinite; } .fui-load__ani-e.data-v-ffc2d581 { left: 40rpx; animation: ani_2-ffc2d581 0.5s 0.4s ease alternate infinite; } @keyframes ani_2-ffc2d581 { 0% { height: 0; } 100% { height: 75%; } } .fui-load__ani-3.data-v-ffc2d581 { width: 40rpx; height: 40rpx; border: 2px solid transparent; border-radius: 50%; animation: 0.9s ani_3-ffc2d581 linear infinite; } @keyframes ani_3-ffc2d581 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fui-load__ani-4.data-v-ffc2d581 { width: 52rpx; height: 52rpx; border: 1px solid; border-radius: 50%; animation: .9s ani_3-ffc2d581 linear infinite; position: relative; } .fui-load__ani-f.data-v-ffc2d581 { width: 16rpx; height: 16rpx; position: absolute; top: -8rpx; left: 50%; border-radius: 50%; opacity: .6; } .fui-load__ani-5.data-v-ffc2d581 { position: relative; width: 16rpx; height: 16rpx; border-radius: 50%; animation: ani_4 1s infinite linear; } .fui-load__ani-g.data-v-ffc2d581, .fui-load__ani-h.data-v-ffc2d581 { display: inline-block; position: absolute; top: 0; width: 16rpx; height: 16rpx; border-radius: 50%; opacity: 0.25; } .fui-load__ani-g.data-v-ffc2d581 { left: -30rpx; animation: ani_4_2-ffc2d581 1s infinite linear; } .fui-load__ani-h.data-v-ffc2d581 { left: 30rpx; animation: ani_4_1-ffc2d581 1s infinite linear; } @keyframes ani_4_1-ffc2d581 { 0% { opacity: 0.25; } 33% { opacity: 1; } 66% { opacity: 0.25; } } @keyframes ani_4_2-ffc2d581 { 33% { opacity: 0.25; } 66% { opacity: 1; } 100% { opacity: 0.25; } } .fui-load__ani-bcolor.data-v-ffc2d581 { border-color: var(--fui-color-primary, #465CFF) !important; } .fui-load__ani-border.data-v-ffc2d581 { border-left-color: var(--fui-color-primary, #465CFF) !important; border-right-color: var(--fui-color-primary, #465CFF) !important; } .fui-load__ani-bg.data-v-ffc2d581 { background: var(--fui-color-primary, #465CFF) !important; }