Flutter-Web首次加载时添加动画

前言

现在web上线后首次加载会很慢,要5秒以上,并且在加载的过程中界面是白屏。因此想在白屏的时候放一个加载动画

实现步骤

1.找到web/index.html文件

2.添加以下<style>标签内容到<head>标签中

复制代码
<style>
   .loading {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
   }
    
   .loader {
     border: 16px solid #f3f3f3;
     border-radius: 50%;
     border: 15px solid ;
     border-top: 16px solid blue;
     border-right: 16px solid white;
     border-bottom: 16px solid blue;
     border-left: 16px solid white;
     width: 120px;
     height: 120px;
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
   }
    
   @-webkit-keyframes spin {
     0% {
       -webkit-transform: rotate(0deg);
     }
     100% {
       -webkit-transform: rotate(360deg);
     }
   }
    
   @keyframes spin {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
   }
 </style>

3.添加动画到界面

添加以下代码到js代码前面

复制代码
<div class="loading">
  <div class="loader"></div>
</div>

4.重启项目

相关推荐
慧一居士9 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead11 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app