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.重启项目

相关推荐
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
哲科软件8 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风8 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js