※表示の制御はスクリプトで。
デモ:
.submit.loading::before {
background-color: rgba(0,0,0,.5);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.submit.loading::after {
animation: rotate 1s infinite linear;
content: "*";
color: #fff;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
::before
でオーバーレイを表示して、::after
にanimation
を設定してくるくる。