<template>
  <div class="app-spinner">
    <svg width="82" height="82">
      <g class="g-circles" fill="none" stroke-width="2" stroke-dasharray="125">
        <circle r="20" cx="40" cy="40" />
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: "app-spinner"
};
</script>

<style lang="sass" scoped>

@import "../../assets/_vars"

.app-spinner
  position: fixed
  left: 0
  top: 0
  background: rgba(0,0,0,0.32)
  width: 100%
  height: 100%
  display: flex
  justify-content: center
  align-items: center
  svg
    animation: 4s ease-in-out infinite dash

@keyframes dash
  0%
    stroke: $gray6
    stroke-dashoffset: 125
  16.66%
    stroke: $gray6
    stroke-dashoffset: 0
  33.33%
    stroke: $gray6
    stroke-dashoffset: -125
  50%
    stroke-dashoffset: -250
    stroke: $orange1
  66.66%
    stroke-dashoffset: -375
    stroke: $orange1
  83.33%
    stroke-dashoffset: -500
    stroke: $green1
  100%
    stroke-dashoffset: -625
    stroke: $green1
</style>
