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>