svg+js实现圆圈数字进度条动画i效果代码-html代码-BFW代码库

svg+js实现圆圈数字进度条动画i效果代码

代码语言：html

所属分类：进度条

代码描述：svg+js实现圆圈数字进度条动画i效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
    body {
  background: #18222F;
}

.wrapper {
  position: absolute;
  width: 400px;
  height: 400px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
}

.container {
  flex: 1;
  padding: 0 20px;
}
</style>

</head>


    <body>
        <div class="wrapper">
            <div class="container chart" data-size="400" data-value="88" data-arrow="up">
            </div>
        </div>

    <!-- partial -->
    <script >
        //
// Library
//

var Dial = function(container) {
    this.container = container;
    this.size = this.container.dataset.size;
    this.strokeWidth = this.size / 8;
    this.radius = (this.size / 2) - (this.strokeWidth / 2);
    this.value = this.container.dataset.value;
    this.direction = this.container.dataset.arrow;
    this.svg;
    this.defs;
    this.slice;
    this.overlay;
    this.text;
    this.arrow;
    this.create();
}

Dial.prototype.create = function() {
    this.createSvg();
    this.createDefs();
    this.createSlice();
    this.createOverlay();
    this.createText();
    th.........完整代码请登录后点击上方下载按钮下载查看