纯css实现环形饼状图表效果代码-html代码-BFW代码库

纯css实现环形饼状图表效果代码

代码语言：html

所属分类：图表

代码描述：纯css实现环形饼状图表效果代码，无js代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          box-sizing: border-box;
        }
        :root {
          --size: 25;
          --color-one: #ea4335;
          --color-two: #4285f4;
          --color-three: #34a853;
          --color-four: #fbbc05;
        }
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
          background: hsl(0, 0%, 96%);
        }
        @property --nose {
          syntax: '<percentage>';
          initial-value: 0%;
          inherits: false;
        }
        @property --tail {
          syntax: '<percentage>';
          initial-value: 0%;
          inherits: false;
        }
        .loader {
        /*   background: purple; */
          height: calc(var(--size) * 1vmin);
          width: calc(var(--size) * 1vmin);
          border-radius: 50%;
          position: relative;
          -webkit-mask: conic-gradient(
            from 0,
            transparent 0 var(--tail),
            #000 0 var(--nose),
            transparent 0 var(--nose)
          );
                  mask: conic-gradient(
            from 0,
            transparent 0 var(--tail),
            #000 0 var(--nose),
            transparent 0 var(--nose)
          );
          -webkit-animation: load 2.5s both ease-in-out;
                  animation: load 2.5s both ease-in-out;
        }
        
        .loader__segment {
          height: 100%;
          width: 100%;
          border-width: 5vmin;
          border-style: solid;
          border-color: hsl(var(--hue), 100%, 50%);
          border-radius: 50%;
          position: abso.........完整代码请登录后点击上方下载按钮下载查看