<template>
    <i class="loading-icon" :style="style">
    </i>
</template>
<script>
export default {
    name: 'progressbar',
    props: {
        size: {
            default: 0.76
        },
        color: {
            default: '#999'
        }
    },
    computed: {
        style() {
            return {
                width: this.size + 'rem',
                height: this.size + 'rem'
            }
        }
    }
}
</script>
<style lang="less" scoped>
.loading-icon {
    background: transparent url(../assets/icon_loading.svg) no-repeat;
    background-size: 100%;
    -webkit-animation: weuiLoading 1s steps(12, end) infinite;
    animation: weuiLoading 1s steps(12, end) infinite;
}

@-webkit-keyframes weuiLoading {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes weuiLoading {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}
</style>
