zoukankan      html  css  js  c++  java
  • 用svg实现一个环形进度条

    svg实现环形进度条需要用到的知识:

    1、会使用path的d属性画一个圆环

    //用svg的path元素的A命令画圆
    
    <path
        d="
            M cx cy
            m 0 -r 
            a r r 0 1 0 0 2r 
            a r r 0 1 0 0 -2r"
    >
    ></path>
    
    //cx cy起点   r  半径

    2、熟悉stroke,stroke-linecap,stroke-width,stroke-dasharray、stroke-dashoffset

    话不多说,直接上代码

    <div style=" 200px;height: 200px;">
        <svg viewBox="0 0 100 100">
            <path
                d="M 50 50 m -40 0 a 40 40 0 1 0 80 0  a 40 40 0 1 0 -80 0"
                fill="none"
                stroke="#e5e9f2"
                stroke-width="5">
            ></path>
            <path
                d="M 50 50 m -40 0 a 40 40 0 1 0 80 0  a 40 40 0 1 0 -80 0"
                fill="none"
                stroke="#20a0ff"
                stroke-linecap="round"
                class="my-svg-path"
                transform="rotate(90,50,50)"
                stroke-width="5">
            </path>
        </svg>
    </div>
    .my-svg-path{
        stroke-dasharray: 252.2px, 252.2px;
        stroke-dashoffset: 22px;
        transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;
        transform: rotateZ(90deg);
        transform-origin: 50% 50%;
    }

    效果:

  • 相关阅读:
    pylab
    通过在 Page 指令或 配置节中设置 validateRequest=false 可以禁用请求验证
    PRIMUS
    Ubuntu 下安装AMBER10/AmberTools 1.2
    SUPCOMB
    biopython
    python IDE
    SASREF
    PEAK
    ANDROID移植: WIFI设计原理(源码分析
  • 原文地址:https://www.cnblogs.com/guojikun/p/10663487.html
Copyright © 2011-2022 走看看