<template>
  <md-dialog :md-active.sync="this.l" class="bbb">
    <md-progress-spinner :md-diameter="200" :md-stroke="10" md-mode="indeterminate"/>
    <h1 style="color: #fd8846; text-align: center">Загрузка</h1>
    <h3 style="color: #fd8846; text-align: center">{{100 - (this.$API.load_stages.stages.length * 100 / this.$API.load_stages.count_stages).toFixed(0)}}%</h3>
    <p v-for="stage in this.$API.load_stages.stages" :key="stage" style="text-align: center; margin: 0%">{{$API.load_stages.human(stage)}}</p>
  </md-dialog>
</template>

<script>
export default {
  name: 'LoaderPage',
  data: () => ({
    l: true
  }),
  methods: {
    setL(v) {
      this.l = v;
    }
  }
}
</script>

<style>
.md-progress-spinner {
  stroke: #fd8846 !important;
  margin: 90px;
}

.bbb {
  background: black;
}
</style>