WebixはLoadingを表示できるボードをカスタマイズします

webix.protoUI({
    name: "databoard",
    mask: null,
    defaults: {
        template: function(obj, common) {
            debugger
        },
        label: "",
        borderless: true
    },
    $renderInput: function(obj) {
        var css = "class='webixtype_" + (obj.type || "base") + "' ";
        return "" + webix.template.escape(obj.label || obj.value) + "";
    },
    $init: function(config) {
        webix.html.addCss(this.$view, "webix_el_databoard");
        let mask = webix.html.create("div", { "class": "webix_mask_inside" }, "
");
        this.mask = mask;
        webix.event(mask, "click", function(e) {
            webix.html.preventEvent(e);
        });
        webix.event(mask, "dblclick", function(e) {
            webix.html.preventEvent(e);
        });
        webix.event(mask, "onselectstart", function(e) {
            webix.html.preventEvent(e);
            return false;
        });
        this._viewobj.appendChild(mask);
    },
    showMask() {
        this.mask.style.display = 'block';
    }
}, webix.ui.layout);

.webix_el_databoard {
    position: relative;
    width: 100%;
}

.webix_el_databoard .webix_mask_inside {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    filter: alpha(opacity=20);
    opacity: .2;
    z-index: 999999;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    /** display: none; **/
    text-align: center;
    display: flex;
    align-items: center;
}

.webix_el_databoard .webix_mask_inside>div {
    margin-left: auto;
    margin-right: auto;
}

.webix_el_databoard .webix_mask_inside span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
    background: white;
    animation: load 1.04s ease infinite;
    -webkit-animation: load 1.04s ease infinite;
}

@keyframes load {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes load {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.webix_el_databoard .webix_mask_inside span:nth-child(1) {
    animation-delay: 0.13s;
    -webkit-animation-delay: 0.13s;
}

.webix_el_databoard .webix_mask_inside span:nth-child(2) {
    animation-delay: 0.26s;
    -webkit-animation-delay: 0.26s;
}

.webix_el_databoard .webix_mask_inside span:nth-child(3) {
    animation-delay: 0.39s;
    -webkit-animation-delay: 0.39s;
}

.webix_el_databoard .webix_mask_inside span:nth-child(4) {
    animation-delay: 0.52s;
    -webkit-animation-delay: 0.52s;
}