.loading {
    position: relative;
    width: 48px;
    height: 48px;
    transform: translate(-6px, 6px);

    .loading-segment {
        position: absolute;
        left: 28px;
        height: 10px;
        width: 4px;
        background-color: rgba(234, 234, 234, 0.3);
        border-radius: 10px;
        -ms-transform-origin: 50% 170%;
        -o-transform-origin: 50% 170%;
        -moz-transform-origin: 50% 170%;
        -webkit-transform-origin: 50% 170%;
        transform-origin: 50% 170%;
        animation-duration: 1000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-name: loader-throbber;

        &:nth-child(1) {
            transform: rotate(0deg);
            animation-delay: 0ms;
        }

        &:nth-child(2) {
            transform: rotate(45deg);
            animation-delay: 125ms;
        }

        &:nth-child(3) {
            transform: rotate(90deg);
            animation-delay: 250ms;
        }

        &:nth-child(4) {
            transform: rotate(135deg);
            animation-delay: 375ms;
        }

        &:nth-child(5) {
            transform: rotate(180deg);
            animation-delay: 500ms;
        }

        &:nth-child(6) {
            transform: rotate(225deg);
            animation-delay: 625ms;
        }

        &:nth-child(7) {
            transform: rotate(270deg);
            animation-delay: 750ms;
        }

        &:nth-child(8) {
            transform: rotate(315deg);
            animation-delay: 875ms;
        }
    }
}

@keyframes loader-throbber {
    0% {
        background-color: #808080;
    }
    100% {
        background-color: #fff;
    }
}