Angular 6显示应用引导进度
Angular 6显示应用引导进度
提问于 2018-05-13 14:59:51
我有一个包含包(angular cdk、angular material和firebase)的小项目。但是我有一个大小为4 MB的vendor.js文件。
作为一种处理问题的方法，我想显示在慢速连接上的加载进度(加载4MB需要2分钟)，以便用户可以看到应用程序正在加载。
我已经安装了PWA和service-worker，这样应用程序就不会每次都重新加载。
回答 2
Stack Overflow用户
发布于 2018-05-14 05:53:44
为了回答这个问题:有no easy way可以向用户展示他需要等待多长时间才能加载应用程序，但你可以向他展示一个简单的动画。
只需在index.html中包含一些CSS动画即可。app-root中的所有内容都将在启动后被应用程序取代。
<!-- index.html -->
<!doctype html>
<html>
<head>
<style>
.spinner {
height: 200px;
width: 200px;
animation: rotate 2s linear infinite;
transform-origin: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<app-root> <!-- selector from app.component.ts -->
<!-- loading layout replaced by app after startupp -->
<svg class="spinner" viewBox="25 25 50 50">
<style type="text/css">
circle{stroke:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-
width="2" stroke-miterlimit="10"/>
</svg>
</app-root>
</body>
</html>基于此Tutorial。
除此之外，正如maxime1992所说，你应该在生产模式下使用Angular来最小化文件大小。
Stack Overflow用户
发布于 2018-05-16 02:02:51
尝试通过在AJAX请求like here中加载JS文件来计算下载量，并在进度条中显示该数字。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50313577
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号