.loader {
  /*left: 50%;
  top: 50%;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); */
  display: none; 
}
  .loader #spinner {
    box-sizing: border-box;
    stroke: #673AB7;
    stroke-width: 3px;
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
            animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; 
  }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg); } }

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg); } }

@-webkit-keyframes line {
  0% {
    --p: calc(2 * 3.14159 * 8); /* perimeter */
    stroke-dasharray: 2, calc(var(--p) - 2);
    stroke-dasharray: 2, 48.2655;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    --p: calc(2 * 3.14159 * 8); /* perimeter */
    stroke-dasharray: calc(var(--p) * 0.75), calc(var(--p) * 0.25);
    stroke-dasharray: 37.699, 12.566;
    stroke-dashoffset: 0; }
  100% {
    --p: calc(2 * 3.14159 * 8); /* perimeter */
    stroke-dasharray: 2, calc(var(--p) - 2);
    stroke-dashoffset: - calc(var(--p) * 0.75);
    stroke-dasharray: 2, 48.2655;
    stroke-dashoffset: -37.699;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

@keyframes line {
  0% {
    --p: calc(2 * 3.14159 * 8); /* perimeter */
    stroke-dasharray: 2, calc(var(--p) - 2);
    stroke-dasharray: 2, 48.2655;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    --p: calc(2 * 3.14159 * 8); /* perimeter */
    stroke-dasharray: calc(var(--p) * 0.75), calc(var(--p) * 0.25);
    stroke-dasharray: 37.699, 12.566;
    stroke-dashoffset: 0; }
  100% {
    --p: calc(2 * 3.14159 * 8); /* perimeter */
    stroke-dasharray: 2, calc(var(--p) - 2);
    stroke-dashoffset: - calc(var(--p) * 0.75);
    stroke-dasharray: 2, 48.2655;
    stroke-dashoffset: -37.699;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }