javascript - 将 CSS/HTML 加载器注入我网站的多个部分(html、js、vuejs)
问题描述
我有一个由一些 html 组成的动画加载器:
<!-- full page loading screen -->
<div id="fs-spinner-wrapper">
<div class="spinner fs-spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
其中关联了 CSS 以使其动画化。目前,我在需要加载程序出现的每个点都包含此 HTML 代码......这非常混乱,尤其是在 vueJS 组件和其他 javascript 函数中使用它时。
任何人都可以建议能够将此 HTML 注入我的网站的每个需要它的部分的最佳方法。在一个理想的世界中,我很想使用标准的图标方法,但不确定这是否可能?
<i class="myicon"></i>
CSS:
/* loading animation */
.spinner {
/*width: 50px;*/
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #ececec;
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);
}
}
解决方案
推荐阅读
- powershell - Powershell - 使 SecureString 可供其他用户使用
- node.js - Jimp 没有从 aws 的 lambda 触发器中的 url 读取
- android-studio - TWA Android 应用的 Chrome Tabs Client 版本问题
- wso2 - WSO2 API Manager 支持的最大文件大小
- android - 如何获取特定路径下的所有文件列表
- regex - 计算用户输入的值范围自定义函数 Google Appscript
- ansible - 升级 Ansible Tower - 小升级
- vba - 错误替换双引号而不是双角引号VBA Word
- flutter - 如何在颤振中自定义弹出窗口
- python - 如何在python中找到大于平均值的列表的最长连续子序列