清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

<!-- 定义组件 -->
<template>
    <!-- 组件模板 -->
    <style>
        :host {
            display: block;
            width: 120px;
            height: 120px;
            font: 24px monospace;
        }

        .circle-sector {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 50%;
            background-color: #39B4CC;
            padding: 10px;
            will-change: background-image;
        }
        :host(.big) .circle-sector {
            padding: 15px;
        }
        .circle-sector .inner {
            background: #E6F4F7;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 50%;
            text-align: center; }
        .circle-sector .inner::before {
            content: "";
            height: 100%;
            visibility: hidden;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
    <div class="circle-sector">
        <div class="inner"></div>
    </div>
</template>
<script>
    // 在本文件被导入后自动执行
    (function(thisDoc) {
        "use strict"; // 启用严格模式

        // 所有实例元素对象的公共prototype
        var XProgress = Object.create(HTMLElement.prototype, {
            value: {// 公有属性
                get: function() { return this._value; },
                set: function(process) {
                    this._value = process;
                    if (!this._circleSector || !this._innerText) return;

                    if (process < .5) {
                        this._circleSector.style.backgroundImage =
                                "linear-gradient(" + (90 + 360 * process) + "deg, transparent 50%, #A2ECFB 50%)," +
                                "linear-gradient(90deg, #A2ECFB 50%, transparent 50%)"
                    } else {
                        this._circleSector.style.backgroundImage =
                                "linear-gradient(" + (90 + 360 * (process - .5)) + "deg, transparent 50%, #39B4CC 50%)," +
                                "linear-gradient(90deg, #A2ECFB 50%, transparent 50%)"
                    }
                    this._innerText.textContent = (process * 100).toFixed(1) + "%";
                    this.setAttribute("value", process);
                    this.dispatchEvent(new CustomEvent("changed", { detail: { value: process } }));
                }
            }
        });

        // 公有方法
        XProgress.animate = function(process, forTime) {
            var startTime, startProcess = this.value;
            var _this = this;

            this.cancelAnimate();

            var fn = function (time) {
                startTime = startTime || time;
                var p = (time - startTime) / forTime * (process - startProcess) + startProcess;
                if ((process > startProcess && p >= process) || (process < startProcess && p <= process)) {
                    p = process;
                    _this._animateHandle = undefined;
                } else {
                    _this._animateHandle = requestAnimationFrame(fn);
                }
                _this.value = p;

                _this.dispatchEvent(new CustomEvent(_this._animateHandle ? "animating" : "animated",
                        { detail: { value: process } }));
            };

            this._animateHandle = requestAnimationFrame(fn);
        };

        XProgress.cancelAnimate = function() {
            if (this._animateHandle !== undefined) {
                cancelAnimationFrame(this._animateHandle);
                this._animateHandle = undefined;
            }
        };

        // 组件被创建时执行，相当于构造函数
        XProgress.createdCallback = function() {
            // 创建Shadow root，自定义模板放入其中
            var sr = this.createShadowRoot();
            var template = thisDoc.querySelector("template");
            var node = document.importNode(template.content, true);

            this._circleSector = node.querySelector(".circle-sector");
            this._innerText = this._circleSector.querySelector(".inner");

            var initValue = this._value || Number(this.getAttribute("value"));

            if (!isNaN(initValue)) {
                this.value = initValue;
            }
            sr.appendChild(node);
        };

        // 注册组件
        document.registerElement("x-progress", { prototype: XProgress });
    })(document.currentScript.ownerDocument); // ownerDocument指向被导入的文档对象（本文件）
</script>