vue_common_components/Spinner.vue

<template lang="pug">
    .spinner
        .spinner-wave(v-if="type === 'wave'")
            .spinner-rect.spinner-rect-1
            .spinner-rect.spinner-rect-2
            .spinner-rect.spinner-rect-3
            .spinner-rect.spinner-rect-4
            .spinner-rect.spinner-rect-5
        .spinner-circle(v-if="type === 'circle'")
            .spinner-circle-1.spinner-child
            .spinner-circle-2.spinner-child
            .spinner-circle-3.spinner-child
            .spinner-circle-4.spinner-child
            .spinner-circle-5.spinner-child
            .spinner-circle-6.spinner-child
            .spinner-circle-7.spinner-child
            .spinner-circle-8.spinner-child
            .spinner-circle-9.spinner-child
            .spinner-circle-10.spinner-child
            .spinner-circle-11.spinner-child
            .spinner-circle-12.spinner-child
</template>

<script>
    export default {
        props: {
            type: String,
            default: 'wave'
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .spinner
        .spinner-wave
            $rect-count: 5
            $animation-duration: 1000ms
            $delay-range: 400ms

            width: 50px
            height: 40px
            text-align: center
            font-size: 10px
            margin: 40px auto

            .spinner-rect
                width: 5px
                height: 100%
                background: $app-main-color
                margin: 0 3px 0 0
                display: inline-block
                animation: spinner-rect-wave $animation-duration infinite ease-in-out

            @for $i from 1 through $rect-count
                .spinner-rect-#{$i}
                    animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)

        .spinner-circle
            $circle-count: 12
            $animation-duration: 1200ms

            margin: 40px auto
            width: 40px
            height: 40px
            position: relative

            .spinner-child
                width: 100%
                height: 100%
                position: absolute
                left: 0
                top: 0
            
            .spinner-child:before
                content: ''
                display: block
                margin: 0 auto
                width: 15%
                height: 15%
                background: $app-main-color
                border-radius: 100%
                animation: spinner-circle-bounce $animation-duration infinite ease-in-out both
            
            @for $i from 2 through $circle-count
                .spinner-circle#{$i}
                    transform: rotate(360deg / $circle-count * ($i - 1))
                .spinner-circle#{$i}:before
                    animation-delay: - $animation-duration + $animation-duration / $circle-count * ($i - 1)
    
    @keyframes spinner-rect-wave
        0%, 40%, 100%
            transform: scaleY(0.4)
        20%
            transform: scaleY(1.0)

    @keyframes spinner-circle-bounce
        0%, 80%, 100%
            transform: scale(0)
        40%
            transform: scale(1.0)
</style>