圆形进度条效果-html代码-BFW代码库

圆形进度条效果

代码语言：html

所属分类：进度条

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> SVG Round progress bar</title>
    <style>
    body{
        margin:70px;
    }
        #progress-fill .color-one {
            stop-color: #5A7ABC;
        }
        #progress-fill .color-two {
            stop-color: #ED495D;
        }

        .progress-circle {
            fill: transparent;
            stroke: #39dd92;
            stroke-width: 10;
            stroke-dasharray: 255;
            -webkit-transition: stroke-dashoffsetease-out.4s;
            -moz-transition: stroke-dashoffsetease-out.4s;
            -ms-transition: stroke-dashoffsetease-out.4s;
            transition: stroke-dashoffsetease-out.4s;
        }
    </style>

</head>
<body translate="no">
    <svg version="1.1" width="100px" height="100px">
        <linearGradient id="progress-fill">
            <stop offset="0" class="color-one" />
            <stop offset="1" class="color-two" />
        </linearGradient>
        <circle r="40" cx="50" cy="50" fill="transparent" stroke-width="10" stroke="#EEE"></circle>
        <circle r="40" cx="50" cy="50" id="test" class="progress-circle" stroke-width="10"&.........完整代码请登录后点击上方下载按钮下载查看