Created
October 25, 2020 12:53
-
-
Save mehunk/439f7652b24a88c4265c50fbc44edfc0 to your computer and use it in GitHub Desktop.
使用 SVG 绘制的圆圈的进度图标
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-cn"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| .circular-progress { | |
| display: inline-block; | |
| } | |
| .circular-progress .circle { | |
| position: relative; | |
| } | |
| .circular-progress .circle__svg { | |
| transform: rotate(-90deg); | |
| } | |
| .circle__progress { | |
| fill: none; | |
| stroke-opacity: 0.3; | |
| stroke-linecap: round; | |
| } | |
| .circle__progress--fill { | |
| --strokeLength: 0; | |
| stroke-opacity: 1; | |
| stroke-dasharray: var(--strokeLength); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app" class="circular-progress"> | |
| <div class="circle"> | |
| <svg :width="outerCircleDiameter" :height="outerCircleDiameter" class="circle__svg"> | |
| <circle | |
| :cx="outerCircleRadius" | |
| :cy="outerCircleRadius" | |
| :r="radius" | |
| class="circle__progress circle__progress--path" | |
| :style="{ strokeWidth: strokeWidth, stroke: strokeColor }" | |
| ></circle> | |
| <circle | |
| :cx="outerCircleRadius" | |
| :cy="outerCircleRadius" | |
| :r="radius" | |
| class="circle__progress circle__progress--fill" | |
| :style="fillStyle" | |
| ></circle> | |
| </svg> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/vue@next"></script> | |
| <script> | |
| const app = { | |
| data() { | |
| return { | |
| radius: 38, | |
| strokeWidth: 10, | |
| strokeColor: '#aaff00', | |
| progress: 16.88 | |
| } | |
| }, | |
| computed: { | |
| outerCircleRadius() { | |
| return this.radius + this.strokeWidth; | |
| }, | |
| outerCircleDiameter() { // 外圆的直径 | |
| return (this.radius + this.strokeWidth) * 2; | |
| }, | |
| circumference() { // 周长 | |
| return 2 * Math.PI * this.radius | |
| }, | |
| offset() { // 偏移量 | |
| return (100 - this.progress) / 100 * this.circumference; | |
| }, | |
| fillStyle() { | |
| return { | |
| '--strokeLength': this.circumference, | |
| strokeWidth: this.strokeWidth, | |
| stroke: this.strokeColor, | |
| strokeDashoffset: this.offset, | |
| } | |
| } | |
| } | |
| } | |
| Vue | |
| .createApp(app) | |
| .mount('#app') | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment