src/app/component/loading/loading.component.ts
| selector | stbui-loading |
| styleUrls | ./loading.component.scss |
| templateUrl | ./loading.component.html |
constructor()
|
import { Component } from '@angular/core';
@Component({
selector: 'stbui-loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.scss']
})
export class LoadingComponent {
constructor() {
}
}
<div class="wrapper">
<div class="logo"><span>S</span></div>
<div class="info">请稍等</div>
</div>
./loading.component.scss
:host {
position: fixed;
background: rgba(0, 0, 0, 0.5);
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 96px;
height: 96px;
line-height: 96px;
margin: 10px auto;
text-align: center;
border-radius: 2px;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .22)
}
.logo > span {
display: inline-block;
color: #fff;
font-size: 56px;
animation: rotate 1.5s infinite linear
}
.info {
color: rgba(255, 255, 255, 1);
text-align: center
}
@keyframes rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}