Simple Loading Progress

progress.ts

interface ProgressOptions {
  onComplete?: gsap.Callback
}

// Loadng Progress
class Progress {
  public wrapper: HTMLElement | null
  public bg: HTMLElement | null
  public content: HTMLElement | null
  public indicator: HTMLElement | null

  public tl: GSAPTimeline | null
  private _options: ProgressOptions

  constructor(_options: ProgressOptions) {
    const defaultOptions = {
      onComplete: () => {},
    }

    this._options = { ...defaultOptions, ..._options }

    this._createElements()
  }

  private _createElements() {
    this.wrapper = document.createElement('div')
    this.wrapper.classList.add('progress')
    this.bg = document.createElement('div')
    this.bg.classList.add('progress__bg')
    this.content = document.createElement('div')
    this.content.classList.add('progress__content')
    
    const template = document.getElementById('progress-content')
    this.content.innerHTML = template.innerHTML
    
    this.wrapper.appendChild(this.bg)
    this.wrapper.appendChild(this.content)

    document.body.appendChild(this.wrapper)
  }
  
  public hide() {
    document.body.classList.add('loaded')
    this._closeAnimation()
  }
  
  private _closeAnimation() {
    this.tl = gsap.timeline({
      paused: true,
      onComplete: this._onComplete.bind(this),
    })

    // more animation ...
    
    this.tl.to(this.wrapper, {
      duration: 1,
      opacity: 0,
      ease: 'expo.out',
    })

    this.tl.play()
  }

  private _onComplete() {
    this._options.onComplete()

    this.destroy()
  }
  
  public destroy() {
    this.tl.kill()
    this.tl = null

    document.body.removeChild(this.wrapper)
    this.wrapper = null
    this.bg = null
    this.content = null
  }
}