Css transparent preloader (sass)

Question

I am trying to create a class that adds opacity and a trnasparent prelodaer spinner when a button is clicked, while 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 add a class only to achieve the effect.

However, I'm fighting for the fact that the spinner is not transparent, is there a CSS solution for it or a beautiful transparent gif?

Answer 1

I ended up like this:

.button-processing{
    position: relative!important;

    .static-newsletter-pod,
    button,
    input[type="submit"],
    input[type="button"] {
        opacity: .5;
    }

    input[type="submit"],
    input[type="button"]{
        margin-bottom: 0;
    }

    button,
    input[type="submit"] {
        cursor: wait!important;
    }

    &:before{
        content: "";
        border-radius: 100%;
        margin: auto;
        border: 2px solid $white;
        border-bottom-color: transparent;
        height: 25px;
        width: 25px;
        background: 0 0!important;
        display: inline-block;
        -webkit-animation: rotate .75s 0s linear infinite;
        animation: rotate .75s 0s linear infinite;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
}

Answer 2

In fact, SVGs / CSS animations are the best way to go, as this is a cleaner and smaller file size.

http://code.tutsplus.com/tutorials/mobile-web-create-an-svg-loading-spinner--mobile-13556