snap.svg实现大气进度条曲线图表仪表盘效果代码-html代码-BFW代码库

snap.svg实现大气进度条曲线图表仪表盘效果代码

代码语言：html

所属分类：图表

代码描述：snap.svg实现大气进度条曲线图表仪表盘效果代码，适合后台仪表盘数据展示。

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr-2.js"></script>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato:400,700);

    body, html {
      font-family: Lato;
    }
    
    h1 {
      font-size: 28px;
      line-height: 40px;
      margin-top: 20px;
    }
    h1 a {
      text-decoration: none;
      color: #48c15e;
    }
    h1 p {
      font-size: 22px;
    }
    
    #grid {
      -moz-transform: translate(1px, 0px);
      -ms-transform: translate(1px, 0px);
      -webkit-transform: translate(1px, 0px);
      transform: translate(1px, 0px);
    }
    
    /* GRAPH - 1 */
    #graph-1 {
      stroke: url(#gradient-1);
      stroke-width: 1.5;
      fill: transparent;
      stroke-linecap: round;
      stroke-linejoin: round;
      -moz-animation: lineani 1.3s linear forwards;
      -webkit-animation: lineani 1.3s linear forwards;
      animation: lineani 1.3s linear forwards;
    }
    
    #graph-2 {
      stroke: url(#gradient-2);
      stroke-width: 1.5;
      fill: transparent;
      stroke-linecap: round;
      stroke-linejoin: round;
      -moz-animation: lineani 1.3s linear forwards;
      -webkit-animation: lineani 1.3s linear forwards;
      animation: lineani 1.3s linear forwards;
    }
    
    #poly-1 {
      fill: url(#gradient-3);
    }
    
    #poly-2 {
      fill: url(#gradient-4);
    }
    
    @-moz-keyframes lineani {
      to {
        stroke-dashoffset: 0;
      }
    }
    @-webkit-keyframes lineani {
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes lineani {
      to {
        stroke-dashoffset: 0;
      }
    }
    .underlay {
      stroke-width: 5;
      fill: transparent;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke: #24303a;
    }
    
    #circle-graph-1 {
      stroke: url(#gradient-1);
      stroke-width: 5;
      fill: transparent;
      stroke-linecap: round;
   .........完整代码请登录后点击上方下载按钮下载查看