mirror of
https://github.com/electron-vite/electron-vite-vue
synced 2024-10-12 23:46:44 +08:00
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
|
|
|
|
/**
|
|
* https://tobiasahlin.com/spinkit
|
|
* https://connoratherton.com/loaders
|
|
* https://projects.lukehaas.me/css-loaders
|
|
* https://matejkustec.github.io/SpinThatShit
|
|
*/
|
|
export function useLoading() {
|
|
const className = `loaders-css__square-spin`
|
|
const styleContent = `
|
|
@keyframes square-spin {
|
|
25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
|
|
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
|
|
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
|
|
100% { transform: perspective(100px) rotateX(0) rotateY(0); }
|
|
}
|
|
.${className} > div {
|
|
animation-fill-mode: both;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: #fff;
|
|
animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
|
|
}
|
|
.app-loading-wrap {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #282c34;
|
|
z-index: 9;
|
|
}
|
|
`
|
|
const oStyle = document.createElement('style')
|
|
const oDiv = document.createElement('div')
|
|
|
|
oStyle.id = 'app-loading-style'
|
|
oStyle.innerHTML = styleContent
|
|
oDiv.className = 'app-loading-wrap'
|
|
oDiv.innerHTML = `<div class="${className}"><div></div></div>`
|
|
|
|
return {
|
|
appendLoading() {
|
|
document.head.appendChild(oStyle)
|
|
document.body.appendChild(oDiv)
|
|
},
|
|
removeLoading() {
|
|
document.head.removeChild(oStyle)
|
|
document.body.removeChild(oDiv)
|
|
},
|
|
}
|
|
}
|