eiru_pos/src/components/common/Spinner.vue

<template lang="pug">
    .spinner(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
</template>

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

<style lang="sass">
    @import '../../assets/variables'
    .spinner 
        $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-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)

        @keyframes spinner-wave
            0%, 40%, 100%
                transform: scaleY(0.4)
            20%
                transform: scaleY(1.0)
</style>