feat: add circle progress

Xutaotaotao · Xutaotaotao · commit 57abafb0c10b · 2020-05-04T22:50:04.000+08:00
diff --git a/doc/markdown/nProgress/en-US/index.md b/doc/markdown/nProgress/en-US/index.md
@@ -6,6 +6,7 @@ When an operation takes a long time to complete, the user is shown the current p
 
 
 ## Examples
+### Basic Use
 :::demo
 ```html
   <template>
@@ -18,10 +19,21 @@ When an operation takes a long time to complete, the user is shown the current p
 ```
 :::
 
+### Circular progress bar
+:::demo
+```html
+  <template>
+    <n-progress type="circle" width="100" stroke-width="10" color="rgb(52, 152, 255)" :percent="50"/>
+  </template>
+
+```
+:::
+
 ### API
 
 | Property | Description | Type | Default |
 | :--- | :--- | :--- | :--- |
 | color | Line color | String | |
 | percent | Progress percentage | Number | 0 |
-| width | Progress bar width | Number | 10 |
+| width | Progress bar width,when type is circle,it means canvas width | Number | 10 |
+| stroke-width | When type is circle,it means the width of the circle | Number | 10 |
diff --git a/doc/markdown/nProgress/zh-CN/index.md b/doc/markdown/nProgress/zh-CN/index.md
@@ -5,6 +5,8 @@
 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
 
 ## 代码演示
+
+### 基本使用
 :::demo
 ```html
   <template>
@@ -16,10 +18,23 @@
 ```
 :::
 
+### 进度圈
+:::demo
+```html
+  <template>
+    <n-progress type="circle" width="100" stroke-width="10" color="rgb(52, 152, 255)" :percent="50"/>
+  </template>
+
+```
+:::
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 |
 | :--- | :--- | :--- | :--- |
+| type | 进度条形状，可选`line`,`circle` | String | `line` |
 | color | 进度条颜色 | String | |
 | percent | 进度百分比 | Number | 0 |
-| width | 进度条宽度（像素) | Number | 10 |
+| width | 进度条宽度（像素),type为circle时，代表画布宽度 | Number | 10 |
+| stroke-width | type为circle时使用，代表圆圈的宽度 | Number | 10 |
+
diff --git a/packages/nProgress/src/index.vue b/packages/nProgress/src/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="n-progress">
-    <div class="n-progress-line">
+    <div
+      v-if="type === 'line'"
+      class="n-progress-line"
+    >
       <div
         class="n-progress-line-outer"
         :style="{height: `${width}px`}"
@@ -18,13 +21,51 @@
         {{ progressWidth }}
       </div>
     </div>
+    <div
+      v-else
+      class="n-progress-circle"
+      :style="{width: `${width}px`}"
+    >
+      <svg
+        style="transform: rotate(-90deg)"
+        :width="width"
+        :height="width"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          :r="(width-strokeWidth)/2"
+          :cy="width/2"
+          :cx="width/2"
+          :stroke-width="strokeWidth"
+          :stroke="backgroundColor"
+          fill="none"
+        />
+        <circle
+          ref="$bar"
+          :r="(width-strokeWidth)/2"
+          :cy="width/2"
+          :cx="width/2"
+          :stroke="color"
+          :stroke-width="strokeWidth"
+          :stroke-linecap="isRound ? 'round' : 'square'"
+          :stroke-dasharray="(width-strokeWidth)*3.14"
+          :stroke-dashoffset="(width - strokeWidth) * 3.14 * (100 - percent) / 100"
+          fill="none"
+        />
+      </svg>
+      <span>{{ percent + `%` }}</span>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'NProgress',
   props: {
+    type: {
+      type: String,
+      default: 'line'
+    },
     percent: {
       type: Number,
       default: 0
@@ -33,15 +74,73 @@ export default {
       type: String,
       default: '#e5e5ea'
     },
+    backgroundColor: {
+      type: String,
+      default: '#e5e5ea'
+    },
+    isAnimation: {
+      type: Boolean,
+      default: true
+    },
+    isRound: {
+      type: Boolean,
+      default: true
+    },
+    id: {
+      type: [String, Number],
+      default: 1
+    },
+    duration: {
+      type: [String, Number],
+      default: 1000
+    },
+    delay: {
+      type: [String, Number],
+      default: 200
+    },
+    timeFunction: {
+      type: String,
+      default: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)'
+    },
     width: {
-      type: Number,
+      type: [Number, String],
+      default: 10
+    },
+    strokeWidth: {
+      type: [Number, String],
       default: 10
     }
+
+  },
+  data () {
+    return {
+      idStr: `circle_progress_keyframes_${Date.parse(new Date())}`
+    };
   },
   computed: {
     progressWidth () {
       return `${this.percent}%`;
     }
+  },
+  mounted () {
+    if (this.type === 'circle' && this.isAnimation) {
+      if (document.getElementById(this.idStr)) {
+        console.warn('vue-circle-progress should not have same id style');
+        document.getElementById(this.idStr).remove();
+      }
+
+      let style = document.createElement('style');
+      style.id = this.idStr;
+      style.type = 'text/css';
+      style.innerHTML = `
+      @keyframes circle_progress_keyframes_name_${this.idStr} {
+      from {stroke-dashoffset: ${(this.width - this.radius) * 3.14}px;}
+      to {stroke-dashoffset: ${(this.width - this.radius) * 3.14 * (100 - this.progress) / 100}px;}}
+      .circle_progress_bar${this.idStr} {animation: circle_progress_keyframes_name_${this.idStr} ${this.duration}ms ${this.delay}ms ${this.timeFunction} forwards;}
+      `;
+      document.getElementsByTagName('head')[0].appendChild(style);
+      this.$refs.$bar.classList.add(`circle_progress_bar${this.idStr}`);
+    }
   }
 };
 </script>
@@ -77,5 +176,23 @@ export default {
         color:#575757
       }
     }
+    .n-progress-circle {
+      position:relative;
+      span{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        color: rgba(0,0,0,.65);
+        font-size: 1em;
+        line-height: 1;
+        white-space: normal;
+        text-align: center;
+        -webkit-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+      }
+    }
   }
 </style>
