原生js封装一段HTML，并动态加载其css

起因：

如图所示，在昨天小颖被通知要求写个调察问卷的H5，由于页面不多，所以也不想用框架，就用的H5+VUE，考虑到调接口后需要给用于一个Loading的效果，但好几个页面中都要调接口，小颖比较懒就不想写好几遍，就想着能不能把Loading的这段HTML和CSS封装到一起，然后只需要在需要的页面中引入就可以拉，然后就有了这篇文章········· 废话不多说啦，给小伙伴们上代码~~~~~~~~~~~~~~~~~~~~~~~

具体实现步骤：

第一步创建：loader.js

//创建一个Loader：
const LoaderObj = {
    // Loader(container) {
    Loader() {
        //容器实例属性：
        // this.container=container;
        this.container = document.getElementsByTagName('body')[0];;
        //调用入口方法：
        this.init();
    },
    template: `
        <div class="loading-box" id="loadingBox">
            <div class="spinner-container container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container2">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container3">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
        </div>`,
    init: function () {
        this.createDom();
    },
    createDom: function () {
        this.container.innerHTML += this.template;
        this.loadCSS('../static/css/Loader.css');
    },
    loadCSS: function (href) {
        var cssLink = document.createElement("link");
        cssLink.rel = "stylesheet";
        cssLink.type = "text/css";
        cssLink.href = href;
        document.getElementsByTagName("head")[0].appendChild(cssLink);
    },
    // 显示加载提示
    showLoading: function () {
        document.getElementById('loadingBox').style.display = 'block';
    },
    // 隐藏加载提示
    hideLoading: function () {
        document.getElementById('loadingBox').style.display = 'none';
    },
}
LoaderObj.Loader();

注意： 引入css时，this.loadCSS('../static/css/Loader.css'); 这段代码，大家需要根据自己的文件存放路径来实现引入csss哦

第二步创建：Loader.css

.loading-box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    display: none;
}

.container1>div,
.container2>div,
.container3>div {
    width: 24px;
    height: 24px;
    background-color: #4d4b4b;

    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.loading-box .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 {
    top: 0;
    left: 0;
}

.circle2 {
    top: 0;
    right: 0;
}

.circle3 {
    right: 0;
    bottom: 0;
}

.circle4 {
    left: 0;
    bottom: 0;
}

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0.0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bouncedelay {

    0%,
    80%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

第三步：引入我们封装好的loader.js

    <script src="./static/js/loader.js"></script>
    <script type="text/javascript">
        LoaderObj.showLoading();
    </script>

这里因为目前还没调接口，所以暂时只写了显示Loading，当接口返回数据或者调用失败时则需要调用

LoaderObj.hideLoading();

实现隐藏 Loading