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;
      stroke-linejoin: round;
    }
    
    .chart-circle {
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    
    #circle-graph-2 {
      stroke: url(#gradient-2);
      stroke-width: 5;
      fill: transparent;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    
    body {
      background-color: #24303a;
      color: white;
      text-align: center;
    }
    
    .charts-container {
      padding: 20px;
      width: 100%;
      max-width: 1024px;
      display: inline-block;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    .chart {
      color: #4a667a;
      text-align: left;
      position: relative;
      height: auto;
      background-color: #1e2730;
      display: inline-block;
      float: left;
      position: relative;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 10px;
      padding: 15px 20px 65px 20px;
    }
    .chart.circle {
      padding: 15px 20px 40px 20px;
    }
    @media screen and (max-width: 700px) {
      .chart {
        width: calc(100% - 20px);
      }
    }
    @media screen and (min-width: 700px) {
      .chart {
        width: calc(50% - 20px);
      }
    }
    
    .title {
      font-size: 22px;
      margin-bottom: 12px;
    }
    
    .chart-circle {
      .........完整代码请登录后点击上方下载按钮下载查看