Vue implements dynamic circular percentage progress bar

Recently, when developing a small program, I encountered a requirement to implement a circular percentage progress bar, similar to the following design diagram:

As a newbie, I felt that it would be difficult to implement, so I went to Baidu to see how others did it, but I didn’t find a satisfactory one. Either it was a static implementation, or it required a lot of DOM operations. It is better to avoid direct DOM operations in mini programs.

The following is a dynamic implementation I made in the form of a Vue component. Here is the effect diagram first:

Effect

Implementation steps

Draw a pie chart

.pie {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  margin-top: 40px;
  border-radius: 50%;
  background: #ccc;
  background-image: linear-gradient(to right, transparent 50%, #4479FD 0);
  color: transparent;
  text-align: center;
}

Achieve proportion effect

This is achieved by adding pseudo-element occlusion and movement. The code is as follows:

.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 5s linear infinite, bg 10s step-end infinite;
}
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #4479FD; }
} 

Using the CSS animation delay property

Change the animation time above to 50, 100 respectively, so that you can directly pass the corresponding delay seconds in animation-delay , for example, -60s will be displayed at 60%

animation-play-state: paused;
animation-delay: -60s;

Achieving a torus shape

Add a positioned div directly in the div

<div class="pie">
  <div class="pie-inner">
  {{num}}%
  </div>
</div>

Add a constant speed animation

startAnimate (step, limit, speed) {
  setTimeout(() => {
  // num is a percentage if (this.num < limit) {
      this.num += step
      this.startAnimate(step, limit, speed)
    } else {
      this.num = limit
    }
  }, speed)
}

Bind calculated properties to animation-delay

Convert num into corresponding delay seconds in real time

computed: {
    delay () {
      return `-${this.num}s`
    }
}

Summarize

So far, a dynamic circular percentage progress bar has been basically realized, but it is not perfect yet. If you have any comments or questions, please feel free to raise them.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.