.spinner-wrapper {
  padding-bottom: 8px;
}

.spinner {
  width: 66px;
  height: 66px;
  -webkit-animation: contanim 2s linear infinite;
          animation: contanim 2s linear infinite;
  margin-left: auto;
  margin-right: auto;
}

.spinner-circle {
  fill: none;
  stroke-width: 8px;
  stroke-linecap: round;
}

.flexbox-spinner-wrapper { 
  height: calc(100% - 110px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
}

.flexbox-spinner {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flexbox-parent { 
  position: relative;
}

.flexbox-parent > .flexbox-spinner-wrapper {
  height: 100%;
  width: 100%;
}

.tab-pane > .flexbox-spinner-wrapper {
  height: calc(100% - 256px);
  width: 100%;
}

@media {
  .flexbox-spinner-wrapper {
    width: 100%;
  }

  .tab-pane > .flexbox-spinner-wrapper {
    height: 100%;
    width: 100%;
  }

  .sidenav-collapsed .flexbox-spinner-wrapper {
    width: 100%;
  }

svg #spinner {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

svg#spinner:nth-child(1) circle {
  stroke: #007bff;
  stroke-dasharray: 1, 300;
  stroke-dashoffset: 0;
  -webkit-animation: strokeanim 3s calc(.2s * (.5)) ease infinite;
          animation: strokeanim 3s calc(.2s * (.5)) ease infinite;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

@-webkit-keyframes strokeanim {
  0% {
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 120, 300;
    stroke-dashoffset: -58.548324585;
  }
  100% {
    stroke-dasharray: 120, 300;
    stroke-dashoffset: -175.6449737549;
  }
}

@keyframes strokeanim {
  0% {
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 120, 300;
    stroke-dashoffset: -58.548324585;
  }
  100% {
    stroke-dasharray: 120, 300;
    stroke-dashoffset: -175.6449737549;
  }
}
@-webkit-keyframes contanim {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes contanim {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}