60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import flowIcon from '../assets/flow.png'
|
|
|
|
class Preloader {
|
|
element: HTMLElement
|
|
|
|
/**
|
|
* Creates the preloader.
|
|
*/
|
|
constructor () {
|
|
this.element = document.createElement('preloader')
|
|
|
|
this.element.innerHTML = `
|
|
<img src="${flowIcon}" width="150px">
|
|
<div class="done"></div>
|
|
<div class="status"></div>
|
|
`
|
|
|
|
document.body.appendChild(this.element)
|
|
}
|
|
|
|
/**
|
|
* Sets the status text of the preloader.
|
|
*
|
|
* @param value The preloader status text.
|
|
*/
|
|
setStatus (value: string): void {
|
|
(this.element.querySelector('.status') as HTMLElement).innerText = value
|
|
}
|
|
|
|
/**
|
|
* Sets loading state of an instance to pending.
|
|
*
|
|
* @param value The name of an instance.
|
|
*/
|
|
setPending (value: string): void {
|
|
(this.element.querySelector('.done') as HTMLElement).innerHTML += `<div class="${value.split(' ').join('-')}"><i class='icon bx bx-minus' ></i>${value}</div>`
|
|
}
|
|
|
|
/**
|
|
* Sets loading state of an instance to done.
|
|
*
|
|
* @param value The name of an instance.
|
|
*/
|
|
async setDone (value: string): Promise<void> {
|
|
const icon = this.element.querySelector('.done')?.querySelector(`.${value.split(' ').join('-')}`)?.querySelector('.icon')
|
|
icon?.classList.remove('bx-minus')
|
|
icon?.classList.add('bx-check')
|
|
await new Promise(resolve => setTimeout(resolve, 300))
|
|
}
|
|
|
|
/**
|
|
* Removes the preloader.
|
|
*/
|
|
finish (): void {
|
|
this.element.style.opacity = '0'
|
|
this.element.style.pointerEvents = 'none'
|
|
}
|
|
}
|
|
|
|
export default Preloader
|