<template>
    <div class="zz-spin">
        <span :class="classes">
            <span class="spin-up-wrapper">
                <span class="spin-up">
                    <span class="circle-up" :style="color ? `border-color:${color}` : ''"></span>
                </span>
            </span>
            <span class="spin-down-wrapper">
                <span class="spin-down">
                    <span class="circle-down" :style="color ? `border-color:${color}` : ''"></span>
                </span>
            </span>
        </span>
    </div>
</template>
<script>
    export default {
        props: {
            size: {
                type: String,
                default: 'default'
            },
            color: {
                type: String,
            }
        },
        computed: {
            classes () {
                return ['zz-spin-wrapper', `zz-spin-wrapper-${this.size}`];
            }
        }
    };
</script>
