所以我想像ngx-admin项目一样添加一个旋转器,链接是http://akveo.com/ngx-admin/
我已经在我的index.html中添加了旋转器,它显示出来了,但是只有我的导航栏被渲染出来,旋转器继续在应该显示模块的地方旋转。导航栏只在模块本身中调用,而不是在路由模块中调用,所以我很困惑为什么它不起作用。
<body>
<app-root>Loading...</app-root>
<style>
@-webkit-keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0)
}
100% {
-moz-transform: rotate(360deg)
}
}
@keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.spinner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1003;
background: #000000;
overflow: hidden
}
.spinner div:first-child {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
box-shadow: 0 3px 3px 0 rgb(25, 136, 2);
transform: translate3d(0, 0, 0);
animation: spin 2s linear infinite
}
.spinner div:first-child:after,
.spinner div:first-child:before {
content: '';
position: absolute;
border-radius: 50%
}
.spinner div:first-child:before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
box-shadow: 0 3px 3px 0 rgb(85, 255, 6);
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite
}
.spinner div:first-child:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
box-shadow: 0 3px 3px 0 rgb(15, 109, 2);
animation: spin 1.5s linear infinite
}
</style>
<div id="nb-global-spinner" class="spinner">
<div class="blob blob-0"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
<div class="blob blob-5"></div>
</div>
</body>
</html>