anime+svg实现loading加载进度条描边动画效果代码-html代码-BFW代码库

anime+svg实现loading加载进度条描边动画效果代码

代码语言：html

所属分类：进度条

代码描述：anime+svg实现loading加载进度条描边动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Rubik', sans-serif;
    background: #212529;
    color: #f8f9fa;
}

.css-example {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.custom-counter {
    position: relative;
    width: 5em;
    height: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.custom-counter > .svgline {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.custom-counter > .svgline > .svgpath {
    stroke: #6c757d;
    fill: #343a40;
    stroke-linejoin: round;
    stroke-linecap: round;
}
</style>


  
  
</head>

<body >
  <div class='css-example'>
    <div class='custom-counter' id='counter'>
        <svg class='svgline'>
            <path class='svgpath' />
        </svg>
        <div class='number'></div>
    </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.1.js"></script>
      <script>
const { anime } = window;

class Utils {
    static get1em(element) {
        return parseFloat(
            window.getComputedStyle(element)
                .getPropertyValue('font-size'),
        );
    }
}

class Counter {
    #root;
    #elements;
    #options;
    #isAnimating;

    constructor(options) {
        this.#root = options.root;
        this.#elements = {
            svg: this.#root.querySelector('.svgline'),
            path: this.#root.querySelector('.svgpath'),
            number: this.#root.querySelector('.number'),
        };
        this.#options = options;
        this.#isAnimating = false;
    }

    #updateSize() {
        const rect = this.#root.getBoundingClientRect();
        const { width, height } = rect;
        const em = Utils.get1em(this.#root);
        const strokeWidth = (this.#options.lineWidth || 0.3) * em;
        const radius = (this.#options.radius || 0) * em;
        const a = (this.#options.triangleSize || 0) * em;
        
        const viewBox = `
            ${-strokeWidth / 2}
            ${-strokeWidth / 2}
            ${rect.width + strokeWidth}
            ${rect.height + strokeWidth}`;
        
        const d = `
            M ${width / 2} ${a}
            L ${width / 2 + a} 0
            L ${width - radius} 0
            A ${radius} ${radius} 0 0 1 ${width} ${radius}
            L ${width} ${height / 2 - a}
            L ${width - a} ${height / 2}
            L ${width} ${height / 2 + a}
            L ${width} ${height - radius}
            A ${radius} ${radius} 0 0 1 ${width - radius} ${height}
            L ${width / 2 + a} ${height}
            L ${width / 2} ${height - a}
            L ${width / 2 - a} ${height}
            L ${radius} ${height}
            A ${radius} ${radius} 0 0 1 0 ${height - radius}
            L 0 ${height / 2 + a}
            L ${a} ${height / 2}
            L 0 ${height / 2 - a}
            L 0 ${radius}
            A ${radius} ${radius} 0 0 1 ${radius} 0
        .........完整代码请登录后点击上方下载按钮下载查看