I am trying to create a class which adds opacity and a trnasparent prelodaer spinner when a button gets clicked, so far I have the following: 

```
.button-processing{
    opacity: .5;
    cursor: default;
    &:before{
        content: url("#{$image-path}hostelbookers/icons/loader-submit.GIF");
        position: absolute;
        top: 48px;
        left: 88px;
        width: 64px;
        height: 64px;
        z-index: 1;
    }
}

```

I want to be able to only add a class to achieve the effect.

However I am struggling as the spinner is not transparent is there a CSS solution for it or a good looking transparent gif?