ins.play-gif{
    position: absolute;
    font-family: Arial, sans serif;
    width: 50px;
    height: 50px;
    line-height: 52px;
    text-align: center;
    background: #222;
    font-size: 18px;
    color: #fff;
    border-radius: 50%;
    opacity: .9;
    border: 4px solid #fff;
    cursor:pointer;
    text-decoration: none;
}

ins.play-gif:hover{
    opacity:.5;
}

.gifplayer-wrapper{
    position:relative;
    display: inline-block;
}

.spinner {
    height:50px;
    width:50px;
    margin:0px auto;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25px;
    margin-left:-25px;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left:6px solid rgba(256,256,256,.15);
    border-right:6px solid rgba(256,256,256,.15);
    border-bottom:6px solid rgba(256,256,256,.15);
    border-top:6px solid rgba(256,256,256,.8);
    border-radius:100%;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}