Font Awesome を利用して CSS (SCSS) だけでローディングマスクを実装する

実装

SCSS の mixin として実装してます。

loading.scss

@mixin loading($mask: false, $font-size: 36px, $z-index: 1) {
  position: relative;

  @if $mask {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: $z-index;
      background-color: rgba(0, 0, 0, 0.25);
    }
  }

  &::after {
    content: '';
    position: absolute;
    content: "\f110";
    font-family: FontAwesome;
    font-size: $font-size;
    top: calc(50% - (#{$font-size} / 2));
    left: calc(50% - (#{$font-size} / 2));
    animation: fa-spin 2s infinite linear;
    z-index: $z-index;
  }
}

使用例

kyosaya.slim

.container
  .d-flex.justify-content-center
    .card.loading
      .card-header
        | 美樹 さやか
      .card-block
        .card-title
          | ゴメイサマ・リリアン
        a.btn.btn-primary href='#' OK
    .card.loading-mask
      .card-header
        | 佐倉 杏子
      .card-block
        .card-title
          | アミコミ・ケッカイ
        a.btn.btn-danger href='#' OK

kyosaya.scss

.card {
  width: 400px;
  margin: 10px;
}

.loading {
  @include loading;
}

.loading-mask {
  @include loading($mask: true);
}

左がマスク無し、右がマスクありの例です。また、実際はスピナーが回転しています。

ソース

loading mask built with only CSS