css 之前的透明预加载器 (sass)

Question

我正在尝试创建一个 class，它在单击按钮时添加不透明度和一个 trnasparent prelodaer 微调器，到目前为止我有以下内容：

.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;
    }
}

我想只加一个class就可以达到效果

但是我很挣扎，因为微调器不是透明的，是否有 CSS 解决方案或好看的透明 gif？

Answer 1

实际上 SVGs/CSS 动画是更好的方式，因为它更干净且文件大小更小。

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

Answer 2

我最终这样做了：

.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;
    }
}

css 之前的透明预加载器 (sass)

transparent preloader with css before (sass)

css

gif