<template>
  <div id="_main-loading">
    <div class="_loading-icon-container">
      <LoadingIcon width="100" height="100" :fill="GLOBALS.__THEME_PRIMARY_COLOR__"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MainLoading',
  props: {
    // ..
  }
}
</script>

<style lang="scss" scoped>
#_main-loading {
  position: fixed;
  z-index: 999;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  ._loading-icon-container {
    position: absolute;
    // To center vertically
    margin-top: 50vh;
    transform: translateY(-50%);
    // To center horizontally
    left: 50vw;
    margin-left: -50px; // 100px/2 = 50px
  }
}
</style>
