.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.balls {
        animation: balls-animate 1s linear infinite
    }

        .spinner.balls::before {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            background-color: #28A745;
            position: absolute;
            top: 0;
            left: 0;
            animation: balls-animate-before 1s ease-in-out infinite
        }

        .spinner.balls::after {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            background-color: #71C585;
            position: absolute;
            bottom: 0;
            right: 0;
            animation: balls-animate-after 1s ease-in-out infinite
        }

@keyframes balls-animate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes balls-animate-before {
    0% {
        transform: translate(-5px, -5px)
    }

    50% {
        transform: translate(0px, 0px)
    }

    100% {
        transform: translate(-5px, -5px)
    }
}

@keyframes balls-animate-after {
    0% {
        transform: translate(5px, 5px)
    }

    50% {
        transform: translate(0px, 0px)
    }

    100% {
        transform: translate(5px, 5px)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.boxes::before {
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        content: " ";
        background: #28A745;
        position: absolute;
        top: 30px;
        left: 0;
        animation: boxes-animate-before 1s ease-in-out infinite
    }

    .spinner.boxes::after {
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        content: " ";
        background: #28A745;
        position: absolute;
        top: 30px;
        right: 0;
        animation: boxes-animate-after 1s ease-in-out infinite
    }

@keyframes boxes-animate-before {
    0% {
        transform: translateX(-30px) rotate(45deg)
    }

    50% {
        transform: translateX(-10px) rotate(225deg)
    }

    100% {
        transform: translateX(-30px) rotate(45deg)
    }
}

@keyframes boxes-animate-after {
    0% {
        transform: translateX(30px) rotate(45deg)
    }

    50% {
        transform: translateX(10px) rotate(-225deg)
    }

    100% {
        transform: translateX(30px) rotate(45deg)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.bubble {
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        background: #28A745;
        animation: bubble-animate 1s linear infinite
    }

        .spinner.bubble::before {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            background: #28A745;
            position: absolute;
            left: -37.5px;
            animation: bubble-animate-before 1s ease-in-out infinite
        }

        .spinner.bubble::after {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            background: #28A745;
            position: absolute;
            right: -37.5px;
            animation: bubble-animate-after 1s ease-in-out infinite
        }

@keyframes bubble-animate {
    0% {
        opacity: .5;
        transform: scale(1) translateX(0px)
    }

    25% {
        opacity: 1;
        transform: scale(1.1) translateX(-30px)
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateX(30px)
    }

    100% {
        opacity: .5;
        transform: scale(1) translateX(0px)
    }
}

@keyframes bubble-animate-before {
    0% {
        opacity: .5;
        transform: scale(1)
    }

    25% {
        transform: scale(1.1)
    }

    50%,100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes bubble-animate-after {
    0%,50% {
        opacity: .5;
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    75%,100% {
        opacity: 1;
        transform: scale(1)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.eclipse {
        width: 24px;
        height: 24px;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 50%;
        background: #28A745;
        margin: 12px;
        animation: eclipse-animate 1s ease-out infinite
    }

        .spinner.eclipse::before {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            border-top: solid 6px transparent;
            border-bottom: solid 6px transparent;
            position: absolute;
            top: -18px;
            left: -18px;
            border-right: solid 6px #28A745;
            border-left: solid 6px transparent
        }

        .spinner.eclipse::after {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            border-top: solid 6px transparent;
            border-bottom: solid 6px transparent;
            position: absolute;
            top: -18px;
            left: -18px;
            border-right: solid 6px transparent;
            border-left: solid 6px #28A745
        }

@keyframes eclipse-animate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.flip {
        transform-style: preserve-3d;
        perspective: 10em
    }

        .spinner.flip::before {
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            background: #28A745;
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            animation: flip-animate-before 2s linear infinite
        }

@keyframes flip-animate-before {
    0% {
        transform: rotateY(0deg) rotateX(0deg)
    }

    25% {
        transform: rotateY(360deg) rotateX(0deg)
    }

    50% {
        transform: rotateY(360deg) rotateX(360deg)
    }

    75% {
        transform: rotateY(0deg) rotateX(360deg)
    }

    100% {
        transform: rotateY(0deg) rotateX(0deg)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.heart {
        animation: heart-animate 2s ease-in-out infinite
    }

        .spinner.heart::before {
            border-radius: 30px 30px 0 0;
            content: " ";
            width: 30px;
            height: 44px;
            display: inline-block;
            box-sizing: border-box;
            background-color: #28A745;
            transform: rotate(-45deg);
            position: absolute;
            top: 0;
            left: 10px
        }

        .spinner.heart::after {
            border-radius: 30px 30px 0 0;
            content: " ";
            width: 30px;
            height: 44px;
            display: inline-block;
            box-sizing: border-box;
            background-color: #28A745;
            transform: rotate(45deg);
            position: absolute;
            top: 0;
            right: 10px
        }

@keyframes heart-animate {
    0% {
        transform: scale(0.9);
        transform-origin: center
    }

    15% {
        transform: scale(1.4);
        transform-origin: center
    }

    30% {
        transform: scale(0.9);
        transform-origin: center
    }

    45% {
        transform: scale(1.4);
        transform-origin: center
    }

    60%,100% {
        transform: scale(0.9);
        transform-origin: center
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.hue {
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        background: #28A745;
        border-radius: 50%;
        animation: hue-animate 1s ease-in-out infinite
    }

        .spinner.hue::before {
            border-radius: 0% 30px 30px 0%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            background: white;
            position: absolute;
            top: 0;
            right: 0;
            animation: hue-animate-before 1s ease-in-out infinite
        }

@keyframes hue-animate {
    0% {
        background: #28A745
    }

    25% {
        background: #71C585
    }

    50% {
        background: #28A745
    }

    75% {
        background: #71C585
    }

    100% {
        background: #28A745
    }
}

@keyframes hue-animate-before {
    0% {
        transform: rotateY(0deg);
        transform-origin: left center;
        opacity: .5
    }

    30%,70% {
        transform: rotateY(180deg);
        transform-origin: left center;
        opacity: .2
    }

    100% {
        transform: rotateY(0deg);
        opacity: .5
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.meter {
        border-radius: 50%;
        border-top: solid 7.5px #28A745;
        border-right: solid 7.5px #28A745;
        border-bottom: solid 7.5px #28A745;
        border-left: solid 7.5px #28A745;
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box
    }

        .spinner.meter::before {
            border-radius: 3.75px;
            content: " ";
            width: 7.5px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            background-color: #28A745;
            position: absolute;
            top: 6px;
            left: 20px;
            transform-origin: center bottom;
            animation: meter-animate-before 1s linear infinite
        }

@keyframes meter-animate-before {
    0% {
        transform: rotate(-45deg)
    }

    100% {
        transform: rotate(315deg)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.morph {
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        background: #28A745;
        animation: morph-animate 1s linear infinite
    }

@keyframes morph-animate {
    0% {
        transform: rotate(0deg) scale(1);
        border-radius: 0%;
        background: #71C585
    }

    25%,75% {
        transform: rotate(180deg) scale(0.4);
        border-radius: 50%;
        background: #28A745
    }

    100% {
        transform: rotate(360deg) scale(1);
        border-radius: 0%;
        background: #71C585
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.pinwheel {
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        border-top: solid 30px #28A745;
        border-right: solid 30px #71C585;
        border-bottom: solid 30px #28A745;
        border-left: solid 30px #71C585;
        animation: pinwheel-animate 1s linear infinite
    }

@keyframes pinwheel-animate {
    0% {
        border-top-color: #28A745;
        border-right-color: #71C585;
        border-bottom-color: #28A745;
        border-left-color: #71C585;
        transform: rotate(0deg)
    }

    25% {
        border-top-color: #28A745;
        border-right-color: #71C585;
        border-bottom-color: #28A745;
        border-left-color: #71C585
    }

    50% {
        border-top-color: #28A745;
        border-right-color: #71C585;
        border-bottom-color: #28A745;
        border-left-color: #71C585
    }

    75% {
        border-top-color: #28A745;
        border-right-color: #71C585;
        border-bottom-color: #28A745;
        border-left-color: #71C585
    }

    100% {
        border-top-color: #28A745;
        border-right-color: #71C585;
        border-bottom-color: #28A745;
        border-left-color: #71C585;
        transform: rotate(360deg)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.round::before {
        border-radius: 50%;
        content: " ";
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        border-top: solid 7.5px #71C585;
        border-right: solid 7.5px #71C585;
        border-bottom: solid 7.5px #71C585;
        border-left: solid 7.5px #71C585;
        position: absolute;
        top: 0;
        left: 0
    }

    .spinner.round::after {
        border-radius: 50%;
        content: " ";
        width: 30px;
        height: 30px;
        display: inline-block;
        box-sizing: border-box;
        border-top: solid 7.5px #28A745;
        border-right: solid 7.5px rgba(0,0,0,0);
        border-bottom: solid 7.5px rgba(0,0,0,0);
        border-left: solid 7.5px rgba(0,0,0,0);
        position: absolute;
        top: 0;
        left: 0;
        animation: round-animate 1s ease-in-out infinite
    }

@keyframes round-animate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

    .spinner.skeleton {
        border-radius: 50%;
        border-top: solid 7.5px #28A745;
        border-right: solid 7.5px rgba(0,0,0,0);
        border-bottom: solid 7.5px rgba(0,0,0,0);
        border-left: solid 7.5px rgba(0,0,0,0);
        animation: skeleton-animate 1s linear infinite
    }

        .spinner.skeleton::before {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            border-top: solid 7.5px rgba(0,0,0,0);
            border-right: solid 7.5px rgba(0,0,0,0);
            border-bottom: solid 7.5px rgba(0,0,0,0);
            border-left: solid 7.5px #28A745;
            position: absolute;
            top: -7.5px;
            left: -7.5px;
            transform: rotateZ(-30deg)
        }

        .spinner.skeleton::after {
            border-radius: 50%;
            content: " ";
            width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
            border-top: solid 7.5px rgba(0,0,0,0);
            border-right: solid 7.5px #28A745;
            border-bottom: solid 7.5px rgba(0,0,0,0);
            border-left: solid 7.5px rgba(0,0,0,0);
            position: absolute;
            top: -7.5px;
            right: -7.5px;
            transform: rotateZ(30deg)
        }

@keyframes skeleton-animate {
    0% {
        transform: rotate(0deg);
        opacity: 1
    }

    50% {
        opacity: .7
    }

    100% {
        transform: rotate(360deg);
        opacity: 1
    }
}

.loader {
    height: 3px;
    width: 100%;
    margin: 0;
    background-color: #EDEDED;
    display: -webkit-flex;
    display: flex
}

    .loader:before {
        height: 3px;
        width: 100%;
        margin: 0;
        background-color: #28A745;
        content: '';
        -webkit-animation: loader-indefinite 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        animation: loader-indefinite 2s cubic-bezier(0.4, 0, 0.2, 1) infinite
    }

@-webkit-keyframes loader-indefinite {
    0% {
        margin-left: 0px;
        margin-right: 100%
    }

    50% {
        margin-left: 25%;
        margin-right: 0%
    }

    100% {
        margin-left: 100%;
        margin-right: 0
    }
}

@keyframes loader-indefinite {
    0% {
        margin-left: 0px;
        margin-right: 100%
    }

    50% {
        margin-left: 25%;
        margin-right: 0%
    }

    100% {
        margin-left: 100%;
        margin-right: 0
    }
}