如何在动画模糊图像上方使用加载微调器混合

Question

我正在尝试在具有动画效果的模糊图像上使用布尔玛=loader mixin，但加载器最终也会变得模糊。

如何防止装载机模糊？显然，更改mixin代码是不可能的。

CSS（包括混合）：

.image {
    display: block;
    margin: auto;
    width: 50%;
    &.loading {
        animation: blur 1s;
        filter: blur(50px);
        opacity: 0.3;
        &:after {
            @include loader;
            position: absolute;
            top: calc(50% - 2.5em);
            left: calc(50% - 2.5em);
            width: 5em;
            height: 5em;
            border-width: 0.25em;
        }
    }
}

@keyframes blur {
    0% {
        filter: blur(0px);
        opacity: 1;
    }
    100% {
        filter: blur(50px);
        opacity: 0.3;
    }
}

HTML：

<div class="image">
    <img src="/src" alt="image">
</div>

Mixin ，另请参见https://github.com/jgthms/bulma/blob/master/sass/utilities/mixins.sass：

=loader
    animation: spinAround 500ms infinite linear
    border: 2px solid $grey-lighter
    border-radius: $radius-rounded
    border-right-color: transparent
    border-top-color: transparent
    content: ""
    display: block
    height: 1em
    position: relative
    width: 1em