jquery实现圆环圆形加载进度条动画效果代码-html代码-BFW代码库

jquery实现圆环圆形加载进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：jquery实现圆环圆形加载进度条动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        .container {
            width: 110px;
            height: 110px;
            margin: 100px auto;
        }
        .prec {
            top: 30px;
            position: relative;
            font-size: 30px;
        }

        .circle {
            position: relative;
            top: 5px;
            left: 5px;
            text-align: center;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            background-color: #E6F4F7;
        }

        .active-border {
            position: relative;
            text-align: center;
            width: 110px;
            height: 110px;
            border-radius: 100%;

            background-color: #39B4CC;
            background-image:
            linear-gradient(91deg, transparent 50%, #A2ECFB 50%),
            linear-gradient(90deg, #A2ECFB 50%, transparent 50%);

        }
    </style>
    <script>

    </script>
</head>
<body>
    <div class="container">
        <div id="activeBorder" class="active-border">
            <div id="circle" class="circle">
                <span class="prec 270" id="prec">0%</span>
            </div>
        </div>
    <.........完整代码请登录后点击上方下载按钮下载查看