30 lines
1.7 KiB
JavaScript
30 lines
1.7 KiB
JavaScript
window.$owl = window.$owl || {}
|
|
|
|
window.$owl.appLoader = () => {
|
|
const value = localStorage.getItem(window.$adminApiPrefix.replace(/^\//, '') + '-settings')
|
|
const settings = JSON.parse(value == 'undefined' ? '{}' : value)
|
|
const color = settings?.system_theme_setting?.themeColor || '#1C1C1C'
|
|
const bgColor = settings?.system_theme_setting?.darkTheme ? '#1f1f1f' : '#FFFFFF'
|
|
|
|
const loader = `
|
|
<div id="app-loader">
|
|
<style>
|
|
body{ margin: 0; padding: 0; }
|
|
#app-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 20px; display: flex; align-items: center; justify-content: center; background-color: ${bgColor}; z-index: 9999; }
|
|
.loader { position: relative; display: inline-block; font-size: 20px; width: 40px; height: 40px; transform: rotate(45deg); animation: antRotate 1.2s infinite linear;}
|
|
.loader i { width: 16px; height: 16px; border-radius: 100%; background-color: ${color}; transform: scale(0.75); display: block; position: absolute; opacity: 0.3; animation: antSpinMove 1s infinite linear alternate; transform-origin: 50% 50%; }
|
|
.loader i:nth-child(1) { left: 0; top: 0; } .loader i:nth-child(2) { right: 0; top: 0; animation-delay: 0.4s; }
|
|
.loader i:nth-child(3) { right: 0; bottom: 0; animation-delay: 0.8s; } .loader i:nth-child(4) { left: 0; bottom: 0; animation-delay: 1.2s; }
|
|
@keyframes antSpinMove { to { opacity: 1; } } @keyframes antRotate { to { transform: rotate(405deg); } }
|
|
</style>
|
|
<div>
|
|
<span class="loader"><i></i> <i></i> <i></i> <i></i></span>
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
document.body.children.item(0).insertAdjacentHTML('afterend', loader)
|
|
}
|
|
|
|
window.$owl.appLoader()
|