Edited at

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

More than 1 year has passed since last update.


実装

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