halo-theme-butterfly/templates/assets/plugins/loading/hourglass.min.js

一个Halo博客主题，Butterfly

(()=>{function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},n(e)}function e(n,e){for(var t=0;t<e.length;t++){var o=e[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,r(o.key),o)}}function t(n,e,t){return(e=r(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function r(e){var t=function(e,t){if("object"!=n(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,t||"default");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==n(t)?t:t+""}var o=new(function(){return n=function n(){!function(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}(this,n),t(this,"cssText",'\n    .loading-container {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width:100vw;\n        height:100vh;\n    }\n  \n    .loading-body {\n        position: relative;\n        --c1: #673b14;\n        --c2: #f8b13b;\n        width: 40px;\n        height: 80px;\n        border-top: 4px solid var(--c1);\n        border-bottom: 4px solid var(--c1);\n        background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;\n        display: grid;\n        overflow: hidden;\n        animation: l5-0 2s infinite linear;\n      }\n      \n      .loading-body::before,\n      .loading-body::after {\n        content: "";\n        grid-area: 1/1;\n        width: 75%;\n        height: calc(50% - 4px);\n        margin: 0 auto;\n        border: 2px solid var(--c1);\n        border-top: 0;\n        box-sizing: content-box;\n        border-radius: 0 0 40% 40%;\n        -webkit-mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat,\n          linear-gradient(#000 0 0);\n        -webkit-mask-composite: destination-out;\n        mask-composite: exclude;\n        background: linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,\n          linear-gradient(var(--c2) 0 0) center/0 100%;\n        background-repeat: no-repeat;\n        animation: inherit;\n        animation-name: l5-1;\n      }\n      \n      .loading-body::after {\n        transform-origin: 50% calc(100% + 2px);\n        transform: scaleY(-1);\n        --s: 3px;\n        --d: 180deg;\n      }\n      \n      @keyframes l5-0 {\n        80% {\n          transform: rotate(0)\n        }\n      \n        100% {\n          transform: rotate(0.5turn)\n        }\n      }\n      \n      @keyframes l5-1 {\n        10%,70% {\n          background-size: 100% 205%,var(--s,0) 100%\n        }\n      \n        70%,100% {\n          background-position: top,center\n        }\n      }\n  '),t(this,"style",document.createElement("style")),t(this,"container",document.createElement("div")),this.style.textContent=this.cssText,document.head.appendChild(this.style)},(r=[{key:"start",value:function(){this.container.className="loading-container",this.container.innerHTML='<dvi class="loading-body"></dvi>',document.body.appendChild(this.container)}},{key:"destroy",value:function(){document.body.classList.remove("loading"),this.container.remove(),this.style.remove()}}])&&e(n.prototype,r),o&&e(n,o),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r,o}());o.start(),window.addEventListener("load",(function(){return o.destroy()}))})();