.loading-container {
    display: table;
    width: 100%;
    min-height: 45%;
}

.loader {
    position: relative;
    margin: 20px auto 0;
    width: 70px;
    padding-left: 20px;
    /* transform: scale(.9); */
}

    .loader * {
        animation-play-state: paused;
    }

    .loader:hover {
        opacity: 1;
    }

        .loader:hover * {
            animation-play-state: running;
        }

/** Settings */
.loading-spokes {
    position: relative;
    margin: auto;
    height: 45px;
}

    .loading-spokes .spoke-container {
        position: absolute;
        top: 100%;
        left: calc(50% - 10px*1.5);
        transform-origin: 50% -100%;
    }

        .loading-spokes .spoke-container .spoke {
            background: #888888;
            width: 1px;
            height: 4px;
            animation: spoke 1s infinite;
            animation-delay: inherit;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+1) {
            transform: translateX(100%) rotate(-105deg);
            animation-delay: -1.375s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+2) {
            transform: translateX(100%) rotate(-75deg);
            animation-delay: -1.25s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+3) {
            transform: translateX(100%) rotate(-45deg);
            animation-delay: -1.125s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+4) {
            transform: translateX(100%) rotate(-15deg);
            animation-delay: -1s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+5) {
            transform: translateX(100%) rotate(15deg);
            animation-delay: -0.875s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+6) {
            transform: translateX(100%) rotate(45deg);
            animation-delay: -0.75s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+7) {
            transform: translateX(100%) rotate(75deg);
            animation-delay: -0.625s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+8) {
            transform: translateX(100%) rotate(105deg);
            animation-delay: -0.5s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+9) {
            transform: translateX(100%) rotate(135deg);
            animation-delay: -0.375s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+10) {
            transform: translateX(100%) rotate(165deg);
            animation-delay: -0.25s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+11) {
            transform: translateX(100%) rotate(195deg);
            animation-delay: -0.125s;
        }

        .loading-spokes .spoke-container:nth-of-type(0n+12) {
            transform: translateX(100%) rotate(225deg);
            animation-delay: 0;
        }

/* .loading-spokes .spoke-container:nth-of-type(0n+1) {
    transform: translateX(100%) rotate(-90deg);
    animation-delay: -0.875s;
  }
  .loading-spokes .spoke-container:nth-of-type(0n+2) {
    transform: translateX(100%) rotate(-45deg);
    animation-delay: -0.75s;
  }
  .loading-spokes .spoke-container:nth-of-type(0n+3) {
    transform: translateX(100%);
    animation-delay: -0.625s;
  }
  .loading-spokes .spoke-container:nth-of-type(0n+4) {
    transform: translateX(100%) rotate(45deg);
    animation-delay: -0.5s;
  }
  .loading-spokes .spoke-container:nth-of-type(0n+5) {
    transform: translateX(100%) rotate(90deg);
    animation-delay: -0.375s;
  }
  .loading-spokes .spoke-container:nth-of-type(0n+6) {
    transform: translateX(100%) rotate(135deg);
    animation-delay: -0.25s;
  }
  .loading-spokes .spoke-container:nth-of-type(0n+7) {
    transform: translateX(100%) rotate(180deg);
    animation-delay: -0.125s;
  }
  .loading-spokes .spoke-container:nth-of-type(0n+8) {
    transform: translateX(100%) rotate(225deg);
    animation-delay: 0;
  } */
@keyframes spoke {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}