使用CSS before (Sass)实现透明预加载程序

Question

我正在尝试创建一个类，当按钮被点击时，它会添加不透明度和透明预加载器旋转器，到目前为止我有以下内容：

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

我希望只添加一个类就能实现这个效果。

然而，我遇到了困难，因为 spinner 不是透明的。是否有 CSS 解决方案或好看的透明 GIF？

- Aessandro

---

如果gif没有透明度，那么你就无法使其透明。你可以使用类似这些的CSS3动画旋转器吗：http://tobiasahlin.com/spinkit/？ - Andy Furniss

Answer 1

实际上，SVG和CSS动画是更好的选择，因为它们更加简洁并且文件大小更小。

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

- scridget

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

- Aessandro