angular - 模糊微调器 Angular 背后的背景
问题描述
我在加载任何数据时在我的 Angular 代码中使用微调器。我为它创建了一个单独的组件(下面给出了必要的文件)。我的微调器看起来像这样:
现在,我需要在微调器后面显示加载图标的同时完成背景的模糊处理。知道如何实现吗?
spinner.component.ts:
import { Component } from "@angular/core";
@Component({
selector: "loading-spinner",
templateUrl: "./spinner.component.html",
styleUrls: ["./spinner.component.css"]
})
export class SpinnerComponent{
}
spinner.component.html:
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
spinner.component.css:
.spinner {
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
position: fixed;
z-index: 1500;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
解决方案
添加一个覆盖 div 并与微调器同时显示。
CSS将是:
.spinner_overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0.2;
z-index: 1000;
}
并添加
<div class="spinner_overlay"></div>
到您的模板。
这会奏效!
推荐阅读
- laravel-6 - Pusher 中的 array_merge 的 PHP 错误第二个参数为空
- flutter - 扑朔迷离的平面图
- html - 电子邮件内容显示在电子邮件预览中,但不在邮件本身中 - Google Apps Script MailApp
- r - 从 R 中 n 个连续值不为 0 的向量创建向量列表
- r - Rmarkdown 是否有“bitbucket_document”输出设置?
- javascript - 将 props 传递给子组件的最佳实践
- php - 使用 PHPMailer 将 dompdf 文件作为附件附加,而无需事先将文件保存到磁盘中
- php - 为什么 AJAX 在 WordPress 函数中运行两次
- java - 如何在调用父构造函数之前覆盖子类中的父类属性?
- jquery - jQuery多次调用click