468,769 Members | 2,289 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

svg implementation of circular progress bar

html
matters needing attention:
viewBox fill canvas;
:stroke-dasharray Perimeter;
:stroke-dashoffset Proportion of non transparency;
Expand|Select|Wrap|Line Numbers
  1. <svg :width="size"
  2.              :height="size"
  3.              viewBox="0 0 100 100">
  4.             <!-- bgc -->
  5.             <circle r="50" cx="50" cy="50"
  6.                     fill="transparent"
  7.                     ref="pbgc"
  8.                     class="progress-bgc"></circle>
  9.             <!-- bar -->
  10.             <circle r="50" cx="50" cy="50"
  11.                     fill="transparent"
  12.                     ref="pbar"
  13.                     :stroke-dasharray="dashArray"
  14.                     :stroke-dashoffset="dashOffset"
  15.                     class="progress-bar"></circle>
  16.         </svg>
  17.  
css
matters needing attention:
Transform-origin Operate by Center;
Transform:route(-90deg) Rotate 90CCW;
Expand|Select|Wrap|Line Numbers
  1. circle {
  2.         stroke-width: 6px;
  3.         transform-origin: center;
  4.     }
  5.  
  6.     .progress-bgc {
  7.         transform: scale(0.9);
  8.         /*stroke: rgba(66, 66, 66, 0.5);*/
  9.     }
  10.  
  11.     .progress-bar {
  12.         /*stroke: rgb(66, 66, 66);*/
  13.         transform: rotate(-90deg) scale(0.9);
  14.     }
  15.  
js
The following is the property value passed in through the tag setting property:
Expand|Select|Wrap|Line Numbers
  1.             size: {
  2.                 type: Number,
  3.                 default: 100
  4.             },
  5.             percent:{
  6.                 type:Number,
  7.                 default:0
  8.             },
  9.  
Perimeter and incoming progress are calculated:
Expand|Select|Wrap|Line Numbers
  1. data(){
  2.             return{
  3.                 dashArray:Math.PI * 2 * 50
  4.             }
  5.         },
  6.         computed:{
  7.             dashOffset(){
  8.                 return (1 - this.percent) * this.dashArray //  clockwise,it is necessary to take the anti operation
  9.             }
  10.         }
  11.  
Jun 24 '21 #1
0 3700

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by ernesto basc?n pantoja | last post: by
4 posts views Thread by Henke | last post: by
2 posts views Thread by William Stacey | last post: by
2 posts views Thread by randy1200 | last post: by
7 posts views Thread by toton | last post: by
1 post views Thread by Carl Ganz | last post: by
1 post views Thread by Marin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.