/*<style type='text/css'> width: 100%;*/
@-webkit-keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes uil-rolling-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.uil-rolling-css {
    width: 200px;
    height: 200px;
}

    .uil-rolling-css > div {
        width: 200px;
        height: 200px;
        position: relative;
        -ms-animation: uil-rolling-anim 1s linear infinite;
        -moz-animation: uil-rolling-anim 1s linear infinite;
        -webkit-animation: uil-rolling-anim 1s linear infinite;
        -o-animation: uil-rolling-anim 1s linear infinite;
        animation: uil-rolling-anim 1s linear infinite;
    }

        .uil-rolling-css > div div {
            box-sizing: border-box;
            position: absolute;
            width: 200px;
            height: 100px;
            border-radius: 1000px 1000px 0 0;
            border-color: #2eb511;
            border-style: solid;
            border-width: 30px;
            border-bottom-width: 0;
        }

            .uil-rolling-css > div div:nth-of-type(2) {
                -ms-transform: translate(0, 50px) rotate(54deg) translate(0, -50px);
                -moz-transform: translate(0, 50px) rotate(54deg) translate(0, -50px);
                -webkit-transform: translate(0, 50px) rotate(54deg) translate(0, -50px);
                -o-transform: translate(0, 50px) rotate(54deg) translate(0, -50px);
                transform: translate(0, 50px) rotate(54deg) translate(0, -50px);
            }

/*</style > <div class='uil-rolling-css' style='-webkit-transform:scale(0.25)' > <div > <div > </div > <div > </div > </div > </div >*/

/*//Based on: http://codepen.io/Akiletour/pen/emGOgd
// Variables
$loader-size: 100px;
$loader-dot-size: ($loader-size / 5); //20
$loader-height: $loader-dot-size; //20
$loader-dot-color: #1CC32F;*/

.loader {
    width: 100px; /*$loader-size*/
    height: 20px; /*$loader-dot-size*/
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .loader > div {
        content: " ";
        width: 20px; /*$loader-dot-size*/
        height: 20px; /*$loader-dot-size*/
        background: #1CC32F;
        position: absolute;
        -webkit-animation: shift 2s linear infinite;
        animation: shift 2s linear infinite;
        border-radius: 50%;
    }

        .loader > div:nth-of-type(1) {
            -webkit-animation-delay: -.4s;
            animation-delay: -.4s;
        }

        .loader > div:nth-of-type(2) {
            -webkit-animation-delay: -.8s;
            animation-delay: -.8s;
        }

        .loader > div:nth-of-type(3) {
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }

        .loader > div:nth-of-type(4) {
            -webkit-animation-delay: -1.6s;
            animation-delay: -1.6s;
        }

@-ms-keyframes shift {
    0% {
        left: -60px; /*-3 * $loader-dot-size*/
        opacity: 0;
        background-color: #1CC32F;
    }

    10% {
        left: 0;
        opacity: 1;
    }

    90% {
        left: 100px; /*$loader-size*/
        opacity: 1;
    }

    100% {
        left: 160px; /*$loader-size + (3 * $loader-dot-size)*/
        background-color: #1CC32F;
        opacity: 0;
    }
}

@-moz-keyframes shift {
    0% {
        left: -60px; /*-3 * $loader-dot-size*/
        opacity: 0;
        background-color: #1CC32F;
    }

    10% {
        left: 0;
        opacity: 1;
    }

    90% {
        left: 100px; /*$loader-size*/
        opacity: 1;
    }

    100% {
        left: 160px; /*$loader-size + (3 * $loader-dot-size)*/
        background-color: #1CC32F;
        opacity: 0;
    }
}

@-o-keyframes shift {
    0% {
        left: -60px; /*-3 * $loader-dot-size*/
        opacity: 0;
        background-color: #1CC32F;
    }

    10% {
        left: 0;
        opacity: 1;
    }

    90% {
        left: 100px; /*$loader-size*/
        opacity: 1;
    }

    100% {
        left: 160px; /*$loader-size + (3 * $loader-dot-size)*/
        background-color: #1CC32F;
        opacity: 0;
    }
}

@-webkit-keyframes shift {
    0% {
        left: -60px; /*-3 * $loader-dot-size*/
        opacity: 0;
        background-color: #1CC32F;
    }

    10% {
        left: 0;
        opacity: 1;
    }

    90% {
        left: 100px; /*$loader-size*/
        opacity: 1;
    }

    100% {
        left: 160px; /*$loader-size + (3 * $loader-dot-size)*/
        background-color: #1CC32F;
        opacity: 0;
    }
}

@keyframes shift {
    0% {
        left: -60px; /*-3 * $loader-dot-size*/
        opacity: 0;
        background-color: #1CC32F;
    }

    10% {
        left: 0;
        opacity: 1;
    }

    90% {
        left: 100px; /*$loader-size*/
        opacity: 1;
    }

    100% {
        left: 160px; /*$loader-size + (3 * $loader-dot-size)*/
        background-color: #1CC32F;
        opacity: 0;
    }
}