@frontend_worker/search-selector/src/styles/components/spin.less

《远程搜索+单选》组件区别于element-ui或iview组件库的select远程搜索， ①将头部显示的值和下拉选项显示的值独立开来， ②避免远程加载时头部默认值显示异常， ③支持插槽自定义 ④将搜索框值放置于下拉弹框里面

@spin-prefix-cls: ~"@{css-prefix}spin";
@spin-dot-size-small: 12px;
@spin-dot-size-small-radius: 6px;
@spin-dot-size: 20px;
@spin-dot-size-radius: 10px;
@spin-dot-size-large: 30px;
@spin-dot-size-large-radius: 15px;

.@{spin-prefix-cls} {
    color: @primary-color;
    vertical-align: middle;
    text-align: center;

    &-dot {
        position: relative;
        display: block;
        border-radius: 50%;
        background-color: @primary-color;
        .square(@spin-dot-size);
        animation: ani-spin-bounce 1s 0s ease-in-out infinite;
    }

    &-large &-dot {
        .square(@spin-dot-size-large);
    }

    &-small &-dot {
        .square(@spin-dot-size-small);
    }

    &-fix {
        position: absolute;
        top: 0;
        left: 0;
        z-index: @zindex-spin;
        .square(100%);
        background-color: rgba(255,255,255,.9);
    }
    &-fullscreen{
        z-index: @zindex-spin-fullscreen;
        &-wrapper{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }

    &-fix &-main {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    &-fix &-dot {
        display: inline-block;
    }

    &-text,
    &-show-text &-dot {
        display: none;
    }

    &-show-text &-text {
        display: block;
    }
}

// use in Table loading, Table right border is not included in .zz-table-wrapper, so fix it
// .@{table-prefix-cls}-wrapper{
//     > .@{spin-prefix-cls}-fix{
//         border: 1px solid @border-color-base;
//     }
// }

@keyframes ani-spin-bounce {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

// =====================================================
// circular样式
@keyframes zz-spin-circular-up-animate {
    0% {
        transform: rotate(-90deg);
    }
    16.6666% {
        transform: rotate(-180deg);
    }
    88.3333% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}

@keyframes zz-spin-circular-down-animate {
    0% {
        transform: rotate(0);
    }
    16.6666% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-180deg);
    }
    88.3333% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(0);
    }
}

@keyframes zz-spin-circular-wrapper-animate {
    0% {
        transform: rotate(0) scale(1, 1);
    }
    100% {
        transform: rotate(360deg) scale(1, 1);
    }
}
// 大公共样式
.zz-spin-circular-large {
    width: @spin-dot-size-large;
    height: @spin-dot-size-large-radius;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
.zz-spin-circular-large-circle {
    box-sizing: border-box;
    width: @spin-dot-size-large;
    height: @spin-dot-size-large;
    border-radius: @spin-dot-size-large-radius;
    border: 3px solid @primary-color;
    position: absolute;
    left: 0;
    top: 0;
}
// 中公共样式
.zz-spin-circular-default {
    width: @spin-dot-size;
    height: @spin-dot-size-radius;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
.zz-spin-circular-default-circle {
    box-sizing: border-box;
    width: @spin-dot-size;
    height: @spin-dot-size;
    border-radius: @spin-dot-size-radius;
    border: 2px solid @primary-color;
    position: absolute;
    left: 0;
    top: 0;
}
// 小公共样式
.zz-spin-circular-small {
    width: @spin-dot-size-small;
    height: @spin-dot-size-small-radius;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
.zz-spin-circular-small-circle {
    box-sizing: border-box;
    width: @spin-dot-size-small;
    height: @spin-dot-size-small;
    border-radius: @spin-dot-size-small-radius;
    border: 1.5px solid @primary-color;
    position: absolute;
    left: 0;
    top: 0;
}

.@{spin-prefix-cls} {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    &-wrapper {
        position: relative;
        transform: rotate(0) scale(0.4, 0.4);
        overflow: hidden;
    }
    // 大
    &-wrapper-large {
        width: @spin-dot-size-large;
        height: @spin-dot-size-large;
        animation: zz-spin-circular-wrapper-animate 0.6s linear infinite;
        // .spin-up-wrapper,
        .spin-down-wrapper {
            .zz-spin-circular-large;
            .spin-up {
                border-radius: @spin-dot-size-large @spin-dot-size-large 0 0;
                transform: rotate(-90deg);
                transform-origin: bottom center;
                transform: translate(-@spin-dot-size-large-radius,0);
                animation: zz-spin-circular-up-animate 1.2s linear infinite;
                border-radius: 0 0 6px 0;
            }
            .spin-down {
                border-radius: 0 0 @spin-dot-size-large @spin-dot-size-large;
                top: auto;
                bottom: 0;
                transform-origin: top center;
                animation: zz-spin-circular-down-animate 1.2s linear infinite;
            }
            .spin-up,
            .spin-down {
                .zz-spin-circular-large;
                .circle-up,
                .circle-down {
                    .zz-spin-circular-large-circle
                }
                .circle-down {
                    top: auto;
                    bottom: 0;
                }
            }
        }
        .spin-down-wrapper {
            top: auto;
            bottom: 0;
        }
    }
    // 中
    &-wrapper-default {
        width: @spin-dot-size;
        height: @spin-dot-size;
        animation: zz-spin-circular-wrapper-animate 0.6s linear infinite;
        // .spin-up-wrapper,
        .spin-down-wrapper {
            .zz-spin-circular-default;
            .spin-up {
                border-radius: @spin-dot-size @spin-dot-size 0 0;
                transform: rotate(-90deg);
                transform-origin: bottom center;
                transform: translate(-@spin-dot-size-radius,0);
                animation: zz-spin-circular-up-animate 1.2s linear infinite;
                border-radius: 0 0 6px 0;
            }
            .spin-down {
                border-radius: 0 0 @spin-dot-size @spin-dot-size;
                top: auto;
                bottom: 0;
                transform-origin: top center;
                animation: zz-spin-circular-down-animate 1.2s linear infinite;
            }
            .spin-up,
            .spin-down {
                .zz-spin-circular-default;
                .circle-up,
                .circle-down {
                    .zz-spin-circular-default-circle
                }
                .circle-down {
                    top: auto;
                    bottom: 0;
                }
            }
        }
        .spin-down-wrapper {
            top: auto;
            bottom: 0;
        }
    }
    // 小
    &-wrapper-small {
        width: @spin-dot-size-small;
        height: @spin-dot-size-small;
        animation: zz-spin-circular-wrapper-animate 0.6s linear infinite;
        // .spin-up-wrapper,
        .spin-down-wrapper {
            .zz-spin-circular-small;
            .spin-up {
                border-radius: @spin-dot-size-small @spin-dot-size-small 0 0;
                transform: rotate(-90deg);
                transform-origin: bottom center;
                transform: translate(-@spin-dot-size-small-radius,0);
                animation: zz-spin-circular-up-animate 1.2s linear infinite;
                border-radius: 0 0 6px 0;
            }
            .spin-down {
                border-radius: 0 0 @spin-dot-size-small @spin-dot-size-small;
                top: auto;
                bottom: 0;
                transform-origin: top center;
                animation: zz-spin-circular-down-animate 1.2s linear infinite;
            }
            .spin-up,
            .spin-down {
                .zz-spin-circular-small;
                .circle-up,
                .circle-down {
                    .zz-spin-circular-small-circle
                }
                .circle-down {
                    top: auto;
                    bottom: 0;
                }
            }
        }
        .spin-down-wrapper {
            top: auto;
            bottom: 0;
        }
    }
}