:root {
  --v-border-color: 46, 38, 61;
  --v-border-opacity: 0.12;
}
.pre-app-loader-wrapper {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pre-app-loader {
    height: 32px;
    width: 32px;

    align-items: center;
    display: inline-flex;
    justify-content: center;
    position: relative;
    vertical-align: middle;
}
.pre-app-loader>svg {
    animation: progress-circular-rotate 1.4s linear infinite;
    transform-origin: center center;
    transition: all .2s ease-in-out;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}
.pre-app-loader__overlay {
  animation: progress-circular-dash 1.4s ease-in-out infinite, progress-circular-rotate 1.4s linear infinite;
  stroke-dasharray: 25, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transform-origin: center center;
  transform: rotate(-90deg);
  stroke: grey;
  transition: all 0.2s ease-in-out, stroke-width 0s;
  z-index: 2;
}
.pre-app-loader__underlay {
    color: rgba(var(--v-border-color), var(--v-border-opacity));
    stroke: currentColor;
    z-index: 1;
}
@keyframes progress-circular-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0px
    }

    50% {
        stroke-dasharray: 100,200;
        stroke-dashoffset: -15px
    }

    to {
        stroke-dasharray: 100,200;
        stroke-dashoffset: -124px
    }
}

@keyframes progress-circular-rotate {
    to {
        transform: rotate(270deg)
    }
}