我想在我的angular 4 PWA中添加一个装载机。 https://www.w3schools.com/howto/howto_css_loader.asp这个加载器是可见的,直到页面的所有内容都被加载。
<div *ngIf="isLoaded" class="loader"></div>
<div class="home-container" [hidden]="isLoaded"></div>
加载所有内容后,最初isLoaded为true,它将变为false。
loader position => top => 0,right = 50%,left = 50%,bottom = 100%
.scss文件
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #59d4bf; /* green */
border-radius: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
你应该把你的CSS,
margin-right: 50%; or margin-right: auto;
margin-top: 50%;
margin-left: 50%; or margin-right: auto;
你的装载机
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-left: 50%;
margin-right: 50%;
margin-top: 50%;
}