.spin-block {
    padding: 15px 0;
}
div.spinner {
      position: relative;
      width: 54px;
      height: 54px;
      display: inline-block;
    }
    
    div.spinner div {
      width: 12%;
      height: 26%;
      background: #000;
      position: absolute;
      left: 44.5%;
      top: 37%;
      opacity: 0;
      -webkit-animation: fade 1s linear infinite;
      -webkit-border-radius: 50px;
      -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    }
    
    div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}    
    div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
    div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
    div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
    div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
    div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
    div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
    div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
    div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
    div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
    div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
    div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}

     @-webkit-keyframes fade {
      from {opacity: 1;}
      to {opacity: 0.25;}
    }

.pollspin.overlay {
    background: rgba(255, 255, 255, 0.9);
}


.spinner-mtl {
    -webkit-animation: rotator 2s linear infinite;
    animation: rotator 2s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

.path-spinner-mtl {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dash 2s ease-in-out infinite, spin-colors 8s infinite;
    animation: dash 2s ease-in-out infinite, spin-colors 8s infinite;
}

@-webkit-keyframes spin-colors {
    0% {
        stroke: #55B0DD;
    }

    25% {
        stroke: #988FB5;
    }

    50% {
        stroke: #F5896C;
    }

    75% {
        stroke: #DB984C;
    }

    100% {
        stroke: #55B0DD;
    }
}

@keyframes spin-colors {
    0% {
        stroke: #55B0DD;
    }

    25% {
        stroke: #988FB5;
    }

    50% {
        stroke: #F5896C;
    }

    75% {
        stroke: #DB984C;
    }

    100% {
        stroke: #55B0DD;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}