vue 最简单的环形进度条_progressBar

在做android开发的时候使用progressBar是比较方面的 ，因为官方提供了组件直接使用就可以。可vue官方并没有类似组件需要自己实现，百度、github看了一圈，发现实现一个简单的环形进度条做的都比较复杂，画挡板、画三个圈，一个底环、一个圆环、一个移动的环，太冗余，所以自己琢磨了一下分享出来，希望有所帮助。

思路：画一个圈进行旋转：

先看看效果：

    <template>

    <div class= "box" >

    <div class= "clip" :style= "clipStyle"></div>

    </div>

    </template>

<script>

export default {

    name: "test",

    mounted(){ 

        let rotate =0

        setInterval(() => {

            if (rotate >= 100) {

            rotate = 0;

            }

            rotate++;

            let transform = "rotate(" + 3.6 * rotate + "deg)"

            this.$data.clipStyle.transform= transform

        }, 20);

    },

    data(){

        return {

            clipStyle:{

                transform:"rotate(" + 3.6 * 0+ "deg)"

            }

        }

    }

};

</script>

<style scoped>

.box{

    position: relative;

    width: 200px;

    height: 200px;

    overflow: hidden;

}

.clip{

    height: 100%;

    box-sizing: border-box;

    border-top: 10px solid lightblue;

    border-left: 10px solid lightblue;

    border-right: 10px solid #ccc;

    border-bottom: 10px solid #ccc;

    border-radius: 50%;

}

</style>