create-at 2019-04-04

All adopt single instance mode and are implemented by native js

Compatible with the old version of browser kernel, please modify the place where es6 syntax is used

loading

Code: all styles are created by js and injected into the head. If you need to modify, please modify the values of loadingstyle and loadingchildstyle immediately.

const loading = (() => {
    let loadingEle  = null
    return (status) => {
        if(!loadingEle) {
            const divEle = document.createElement('div')
            const styleEle = document.createElement('style')
            // Bottom mask style
            const loadignStyle = '.loading{position: fixed;z-index: 1000;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0, .6)}'
            // loading animation style
            const loadignChildStyle = '.loading div{position: absolute;width: 30px;height: 30px;top: 50%;left: 50%;margin: -15px 0 0 -15px;border: 1px solid #fff;border-right: 1px solid transparent;border-radius: 50%;animation: loading 1s linear infinite;}'
            divEle.setAttribute('class', 'loading')
            divEle.innerHTML = '<div></div>'
            styleEle.innerHTML = `${loadignStyle} ${loadignChildStyle} @keyframes loading {to {transform: rotate(360deg)}}`
            document.querySelector('head').append(styleEle)
            document.querySelector('body').append(divEle)
            loadingEle = divEle
        } else {
            // Control the display and hiding of loading
            const dispalyStatus = status ? 'block': 'none';
            loadingEle.setAttribute('style', `display:${dispalyStatus}`)
        }
    }
})()

Any place where the loading function can be called is called immediately; the parameter passed in is displayed as true, and the parameter not passed or false is not displayed.

toast pop-up

const toast = (() => {
    let once = null
    let clearTime
    return (text, time) => {
        if(!time || time<1000 ) time = 1500
        const updata = () => {
            once.innerHTML = text || ''
            once.setAttribute('style', 'position: fixed;left: 50%;z-index: 9000;max-width: 300px;padding: 5px 12px;-webkit-transform: translateX(-50%);text-align: center;border-radius: 4px;font-size: 14px;color: #fff;background-color: rgba(0,0,0,0.6);')
            clearTime = setTimeout(() => {
                once.setAttribute('style', 'display:none')
                clearTimeout(clearTime)
            }, time);
        }
        if(!once) {
            const bodyEle = document.querySelector('body')
            const div = document.createElement('div');
            bodyEle.appendChild(div)
            once = div
            updata()
        } else {
            updata()
        }
    }
})()

Parameter: the time of text (pop-up text) time is set to 1500 milliseconds by default or less than 1000

The toast method can be called anywhere

Welcome to exchange Github