better loading component and example for this

[webafra]

I implemented a better and simpler tool that might be better than loading component : I sampled another tool: http://element.eleme.io/#/en-US/component/loading

Vue.directive('ploading', {
    bind: function (el, binding) {
        if(binding.value) {
            let defaultClassName = el.getAttribute('class');
            el.className = `${defaultClassName} el-loading-parent--relative`;
            let myLoadingTag = document.createElement('div');
            myLoadingTag.setAttribute('class', 'el-loading-mask');
            let pText = '';
            if(el.hasAttribute('data-ploading-text')) {
                pText = el.getAttribute('data-ploading-text');
            }
            myLoadingTag.innerHTML = `<div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg><p class="el-loading-text">${pText}</p></div>`;
            el.appendChild(myLoadingTag);
        }
    },
    update: function (el, binding, vnode, oldvnode) {
        if(!binding.value) {
            for(let prop in vnode.elm.childNodes) {
                if(vnode.elm.childNodes[prop]) {
                    let getLoadingTag = vnode.elm.childNodes[prop].className;
                    if(getLoadingTag && getLoadingTag === 'el-loading-mask') {
                        vnode.elm.childNodes[prop].remove();
                    }
                }
            }
        }
    },
});

style :

.el-loading-parent--relative{position:relative!important}
.el-loading-parent--hidden{overflow:hidden!important}
.el-loading-mask{position:absolute;z-index:2000;background-color:rgba(255,255,255,.9);margin:0;top:0;right:0;bottom:0;left:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.el-loading-mask.is-fullscreen{position:fixed}
.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}
.el-loading-mask.is-fullscreen .el-loading-spinner .circular{height:50px;width:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-col-pull-0,.el-col-pull-1,.el-col-pull-10,.el-col-pull-11,.el-col-pull-13,.el-col-pull-14,.el-col-pull-15,.el-col-pull-16,.el-col-pull-17,.el-col-pull-18,.el-col-pull-19,.el-col-pull-2,.el-col-pull-20,.el-col-pull-21,.el-col-pull-22,.el-col-pull-23,.el-col-pull-24,.el-col-pull-3,.el-col-pull-4,.el-col-pull-5,.el-col-pull-6,.el-col-pull-7,.el-col-pull-8,.el-col-pull-9,.el-col-push-0,.el-col-push-1,.el-col-push-10,.el-col-push-11,.el-col-push-12,.el-col-push-13,.el-col-push-14,.el-col-push-15,.el-col-push-16,.el-col-push-17,.el-col-push-18,.el-col-push-19,.el-col-push-2,.el-col-push-20,.el-col-push-21,.el-col-push-22,.el-col-push-23,.el-col-push-24,.el-col-push-3,.el-col-push-4,.el-col-push-5,.el-col-push-6,.el-col-push-7,.el-col-push-8,.el-col-push-9,.el-row{position:relative}.el-loading-spinner .el-loading-text{color:#409EFF;margin:3px 0;font-size:14px}.el-loading-spinner .circular{height:42px;width:42px;-webkit-animation:loading-rotate 2s linear infinite;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{-webkit-animation:loading-dash 1.5s ease-in-out infinite;animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#409EFF;stroke-linecap:round}.el-loading-spinner i{color:#409EFF}@-webkit-keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}

use on html :

<div v-ploading="true">
  // other html code
</div>

[luisDanielRoviraContreras]

I do not understand exactly what the problem is, if there is any problem please notify to reopen

[webafra]

@luisDanielRoviraContreras : No problem ... This is a request for easy use of Loading and can be a good alternative to the current option.

set a directive to html tag ( v-loading="" ) better than current loading :)