JavaScript implements circular progress bar effect

JavaScript implements circular progress bar effect

This article example shares the specific code of JavaScript to achieve the circular progress bar effect for your reference. The specific content is as follows 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    .itemwait{
      position:absolute;
      top : 0;
      bottom:0;
      left:0;
      right:0;
      margin: 0 auto; 
    }
    .progress{
      stroke-dasharray: 251; 
      stroke-dashoffset: 0;
      /* 
      stroke-dasharray: dashed line stroke-dashoffset: offset interval*/
    }
  </style>
</head>
<body>
  <svg width="200" height="200" version="1.1" class='itemwait'>
    <circle class='progress' cx="100" cy="50" r="40" stroke="pink" stroke-width="5" fill="transparent" />
    <text class='text' x="100" y="50" fill='pink' text-anchor='middle' alignment-baseline='middle'>Start loading</text>
  </svg>
</body>
<script async type='text/javascript'>
//js code see below</script>

</html>

1. Native js implementation

const loadingArr = [1,2,10,20,40,70,90,100]
  let index=0
  var timer = setInterval(()=>{
    let total = document.querySelector('.progress').getTotalLength();
    let progress = document.querySelector('.progress')
    console.log(typeof total)
    progress.style.strokeDashoffset = (total) * (1-loadingArr[index]/100)
    if(index<=loadingArr.length){
      document.querySelector('.text').textContent=`${loadingArr[index]}%`   
  }
    index++
    if(index===loadingArr.length){
      clearInterval(timer)
      document.querySelector('.text').textContent='Loading completed'
    }
  },500)

2. jQuery Implementation

let index = 0
  var $circle = $('.progress');
  var r = $circle.attr('r');
  var timer = setInterval(() => {
    var total = Math.PI * (r * 2);
    var pct = (1-index / 100) * total;
    console.log(typeof pct,pct)
    if (index <= 100) {
      $('.text').text(`${index}%`);
      $circle.css({ strokeDashoffset: pct });
    }
    index = index + 10
    if (index > 100) {
      $('.text').text('Loading completed');
      clearInterval(timer)
      
    }
  }, 500)

3. Initially implement it according to your own ideas

const loadingArr = [1,2,10,20,40,70,90,100]
  let index=0
  var timer = setInterval(()=>{
    let total = document.querySelector('.progress').getTotalLength();
    let progress = document.querySelector('.progress')
    console.log(typeof total)
    progress.style.strokeDashoffset = (total) * (1-loadingArr[index]/100)
    $('.text').text(function(){
      if(index<=loadingArr.length){
       return `${loadingArr[index]}%`
      }
    })
    index++
    if(index===loadingArr.length){
      clearInterval(timer)
      $('.text').text('Loading completed')
    }
  },500)

Summarize

Knowledge points: svg drawing, js native operation, jQuery

  • stroke-dasharray: dashed line
  • stroke-dashoffset: offset interval

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.

You may also be interested in:
  • Several methods of javascript progress bar
  • How to implement progress bar in js
  • JavaScript to achieve web page loading progress bar code is super simple
  • js progress bar implementation code
  • JS progress bar effect implementation code organization
  • JS realizes the effect of circular progress bar (from 0 to 100%)
  • Simple progress bar control written in Javascript jquery css
  • Progress bar effect implemented with CSS+JS
  • js realizes audio control progress bar function
  • Using Session with Javascript in PHP to implement file upload progress bar function

<<:  MySQL query specifies that the field is not a number and comma sql

>>:  Common usage of regular expressions in Mysql

Recommend

Discussion on style customization and browser compatibility issues when using input element [type="file"]

I encountered such a problem when doing the writte...

Detailed explanation of software configuration using docker-compose in linux

Preface This article will share some docker-compo...

How to understand the difference between ref toRef and toRefs in Vue3

Table of contents 1. Basics 1.ref 2. toRef 3. toR...

Use of MySQL truncate table statement

The Truncate table statement is used to delete/tr...

Example analysis of the impact of MySQL index on sorting

This article uses examples to illustrate the impa...

Detailed installation and use tutorial of mysql 8.0.15 under windows

This article shares with you the detailed install...

Node uses koa2 to implement a simple JWT authentication method

Introduction to JWT What is JWT The full name is ...

Why can't my tomcat start?

Table of contents Phenomenon: Port usage: Spellin...

TypeScript installation and use and basic data types

The first step is to install TypeScript globally ...

Calculation of percentage value when the css position property is absolute

When position is absolute, the percentage of its ...

Promise encapsulation wx.request method

The previous article introduced the implementatio...

HTML code analysis of text conversion effects for left and right movement

<div align="center"> <table sty...

JS implements random generation of verification code

This article example shares the specific code of ...

Detailed explanation of JavaScript Promise and Async/Await

Table of contents Overview Four examples Example ...

Mysql 5.6 adds a method to modify username and password

Log in to MySQL first shell> mysql --user=root...