<%- case spin_type -%>
<%- when "ball" -%>
    .bspin {
    font-size: <%= size -%>px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position:fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 <%= speed -%>s infinite ease;
    animation: load6 <%= speed -%>s infinite ease;
    }
    @-webkit-keyframes load6 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
    }
    5%,
    95% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
    }
    10%,
    59% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.087em -0.825em 0 -0.42em <%= colour -%>, -0.173em -0.812em 0 -0.44em <%= colour -%>, -0.256em -0.789em 0 -0.46em <%= colour -%>, -0.297em -0.775em 0 -0.477em <%= colour -%>;
    }
    20% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.338em -0.758em 0 -0.42em <%= colour -%>, -0.555em -0.617em 0 -0.44em <%= colour -%>, -0.671em -0.488em 0 -0.46em <%= colour -%>, -0.749em -0.34em 0 -0.477em <%= colour -%>;
    }
    38% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.377em -0.74em 0 -0.42em <%= colour -%>, -0.645em -0.522em 0 -0.44em <%= colour -%>, -0.775em -0.297em 0 -0.46em <%= colour -%>, -0.82em -0.09em 0 -0.477em <%= colour -%>;
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
    }
    }
    @keyframes load6 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
    }
    5%,
    95% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
    }
    10%,
    59% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.087em -0.825em 0 -0.42em <%= colour -%>, -0.173em -0.812em 0 -0.44em <%= colour -%>, -0.256em -0.789em 0 -0.46em <%= colour -%>, -0.297em -0.775em 0 -0.477em <%= colour -%>;
    }
    20% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.338em -0.758em 0 -0.42em <%= colour -%>, -0.555em -0.617em 0 -0.44em <%= colour -%>, -0.671em -0.488em 0 -0.46em <%= colour -%>, -0.749em -0.34em 0 -0.477em <%= colour -%>;
    }
    38% {
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.377em -0.74em 0 -0.42em <%= colour -%>, -0.645em -0.522em 0 -0.44em <%= colour -%>, -0.775em -0.297em 0 -0.46em <%= colour -%>, -0.82em -0.09em 0 -0.477em <%= colour -%>;
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
    }
    }
<%- when "circle1" -%>
    .bspin,
    .bspin:before,
    .bspin:after {
    border-radius: 50%;
    }
    .bspin:before,
    .bspin:after {
    position:fixed;
    z-index:99;

    content: '';
    }
    .bspin:before {
    width: 5.2em;
    height: 10.2em;
    background: white;
    border-radius: 10.2em 0 0 10.2em;
    top: -0.1em;
    left: -0.1em;
    -webkit-transform-origin: 5.2em 5.1em;
    transform-origin: 5.2em 5.1em;
    -webkit-animation: load2 <%= speed -%>s infinite ease 1.5s;
    animation: load2 <%= speed -%>s infinite ease 1.5s;
    }
    .bspin {
    font-size: <%= size -%>px;
    text-indent: -99999em;
    margin: 55px auto;
    position:fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width: 10em;
    height: 10em;
    box-shadow: inset 0 0 0 1em <%= colour -%>;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    }
    .bspin:after {
    width: 5.2em;
    height: 10.2em;
    background: white;
    border-radius: 0 10.2em 10.2em 0;
    top: -0.1em;
    left: 5.1em;
    -webkit-transform-origin: 0px 5.1em;
    transform-origin: 0px 5.1em;
    -webkit-animation: load2 <%= speed -%>s infinite ease;
    animation: load2 <%= speed -%>s infinite ease;
    }
    @-webkit-keyframes load2 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    @keyframes load2 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }

<%- when "circle1-fade" -%>
    .bspin {
    font-size: <%= size -%>px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: <%= colour -%>;
    background: -moz-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
    background: -webkit-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
    background: -o-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
    background: -ms-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
    background: linear-gradient(to right, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
    position: fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    -webkit-animation: load3 <%= speed -%>s infinite linear;
    animation: load3 <%= speed -%>s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    }
    .bspin:before {
    width: 50%;
    height: 50%;
    background: <%= colour -%>;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    }
    .bspin:after {
    background: white;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }
    @-webkit-keyframes load3 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    @keyframes load3 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }

<%- when "circle2" -%>
    .bspin {
    margin: 60px auto;
    font-size: <%= size -%>px;
    position: fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    text-indent: -9999em;
    <%#- TODO - color conversions for transparency.  Use gem color? %>
    <%#- colourhex.scan(/../).map {|color| color.to_i(16)} -%>
    border-top: 1.1em solid rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    border-right: 1.1em solid rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    border-bottom: 1.1em solid rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    border-left: 1.1em solid <%= colour -%>;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 <%= speed -%>s infinite linear;
    animation: load8 <%= speed -%>s infinite linear;
    }
    .bspin,
    .bspin:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
    }
    @-webkit-keyframes load8 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
    @keyframes load8 {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    }
<%- when "bubble1" -%>
    .bspin {
    font-size: <%= size -%>px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    text-indent: -9999em;
    -webkit-animation: load4 <%= speed -%>s infinite linear;
    animation: load4 <%= speed -%>s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    }
    @-webkit-keyframes load4 {
    0%,
    100% {
    box-shadow: 0 -3em 0 0.2em <%= colour -%>, 2em -2em 0 0em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
    }
    12.5% {
    box-shadow: 0 -3em 0 0 <%= colour -%>, 2em -2em 0 0.2em <%= colour -%>, 3em 0 0 0 <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    25% {
    box-shadow: 0 -3em 0 -0.5em <%= colour -%>, 2em -2em 0 0 <%= colour -%>, 3em 0 0 0.2em <%= colour -%>, 2em 2em 0 0 <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    37.5% {
    box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 0 <%= colour -%>, 2em 2em 0 0.2em <%= colour -%>, 0 3em 0 0em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    50% {
    box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 0em <%= colour -%>, 0 3em 0 0.2em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    62.5% {
    box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 0 <%= colour -%>, -2em 2em 0 0.2em <%= colour -%>, -3em 0 0 0 <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    75% {
    box-shadow: 0em -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0.2em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
    }
    87.5% {
    box-shadow: 0em -3em 0 0 <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0 <%= colour -%>, -2em -2em 0 0.2em <%= colour -%>;
    }
    }
    @keyframes load4 {
    0%,
    100% {
    box-shadow: 0 -3em 0 0.2em <%= colour -%>, 2em -2em 0 0em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
    }
    12.5% {
    box-shadow: 0 -3em 0 0 <%= colour -%>, 2em -2em 0 0.2em <%= colour -%>, 3em 0 0 0 <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    25% {
    box-shadow: 0 -3em 0 -0.5em <%= colour -%>, 2em -2em 0 0 <%= colour -%>, 3em 0 0 0.2em <%= colour -%>, 2em 2em 0 0 <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    37.5% {
    box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 0 <%= colour -%>, 2em 2em 0 0.2em <%= colour -%>, 0 3em 0 0em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    50% {
    box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 0em <%= colour -%>, 0 3em 0 0.2em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    62.5% {
    box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 0 <%= colour -%>, -2em 2em 0 0.2em <%= colour -%>, -3em 0 0 0 <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
    }
    75% {
    box-shadow: 0em -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0.2em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
    }
    87.5% {
    box-shadow: 0em -3em 0 0 <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0 <%= colour -%>, -2em -2em 0 0.2em <%= colour -%>;
    }
    }
<%- when "bubble2" -%>
    .bspin {
    margin: 100px auto;
    font-size: <%= size %>px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    text-indent: -9999em;
    -webkit-animation: load5 <%= speed -%>s infinite ease;
    animation: load5 <%= speed -%>s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    }
    @-webkit-keyframes load5 {
    0%,
    100% {
    box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7);
    }
    12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5);
    }
    25% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    50% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    75% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
    }
    }
    @keyframes load5 {
    0%,
    100% {
    box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7);
    }
    12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5);
    }
    25% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    50% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    75% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
    }
    87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
    }
    }
<%- when "bar1" -%>
    .bspin:before,
    .bspin:after,
    .bspin {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 <%= speed -%>s infinite ease-in-out;
    animation: load7 <%= speed -%>s infinite ease-in-out;
    }
    .bspin {
    font-size: <%= size -%>px;
    margin: 80px auto;
    position: fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    }
    .bspin:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
    }
    .bspin:after {
    left: 3.5em;
    }
    .bspin:before,
    .bspin:after {
    content: '';
    position: absolute;
    top: 0;
    }
    @-webkit-keyframes load7 {
    0%,
    80%,
    100% {
    box-shadow: 0 2.5em 0 -1.3em <%= colour -%>;
    }
    40% {
    box-shadow: 0 2.5em 0 0 <%= colour -%>;
    }
    }
    @keyframes load7 {
    0%,
    80%,
    100% {
    box-shadow: 0 2.5em 0 -1.3em <%= colour -%>;
    }
    40% {
    box-shadow: 0 2.5em 0 0 <%= colour -%>;
    }
    }
<%- when "bar2" -%>
    .bspin,
    .bspin:before,
    .bspin:after {
    background: <%= colour -%>;
    -webkit-animation: load1 <%= speed -%>s infinite ease-in-out;
    animation: load1 <%= speed -%>s infinite ease-in-out;
    width: 1em;
    height: 4em;
    }
    .bspin:before,
    .bspin:after {
    position: absolute;
    top: 0;
    content: '';
    }
    .bspin:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
    }
    .bspin {
    text-indent: -9999em;
    margin: 88px auto;
    position: fixed;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    font-size: <%= size -%>px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    }
    .bspin:after {
    left: 1.5em;
    }
    @-webkit-keyframes load1 {
    0%,
    80%,
    100% {
    box-shadow: 0 0 <%= colour -%>;
    height: 4em;
    }
    40% {
    box-shadow: 0 -2em <%= colour -%>;
    height: 5em;
    }
    }
    @keyframes load1 {
    0%,
    80%,
    100% {
    box-shadow: 0 0 <%= colour -%>;
    height: 4em;
    }
    40% {
    box-shadow: 0 -2em <%= colour -%>;
    height: 5em;
    }
    }


<%- end -%>