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

news/2024/12/19 18:39:07/

前言

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


http://www.ppmy.cn/news/1556451.html

相关文章

Linux-设备树

一、设备树 设备树(Device Tree)&#xff0c;将这个词分开就是“设备”和“树”&#xff0c;描述设备树的文件叫做 DTS(Device Tree Source)&#xff0c;这个 DTS 文件采用树形结构描述板级设备&#xff0c;也就是开发板上的设备信息&#xff0c;比如CPU 数量、 内存基地址、I…

MySQL 实战:小型项目中的数据库应用(二)

小型项目里 MySQL 的安全与性能管理 用户权限管理 在小型项目中&#xff0c;合理的用户权限管理对于保障 MySQL 数据库的安全性至关重要。MySQL 的权限系统有着细致的层级划分和丰富的权限类型&#xff0c;能让管理员精确控制不同用户对数据库的访问与操作能力。 首先是权限…

智能算法驱动:中阳科技量化交易模型的革新之路

在金融智能化和自动化浪潮中&#xff0c;中阳科技率先以量化交易模型为核心&#xff0c;构建高效的投资生态&#xff0c;成为智能交易领域的领导者。本文将深入剖析中阳科技在模型设计、数据整合、技术创新以及未来发展策略中的核心优势&#xff0c;为读者展示其领先的技术应用…

基于 Spring Boot + Vue 的宠物领养系统设计与实现

引言 近年来&#xff0c;随着人们生活水平的提高&#xff0c;宠物逐渐成为许多家庭的重要成员。然而&#xff0c;宠物的流浪和弃养问题日益严重&#xff0c;这促使社会对宠物领养的需求不断增长。为解决宠物领养中信息不对称、领养流程复杂等问题&#xff0c;设计并实现一个基…

Django+React---从0搭建一个听音乐+聊天室的网站

文档、网站、Github地址&#xff1a; 需要梯子&#xff1a; 写开发文档的时候&#xff0c;用的就是Colab(ipython)&#xff0c;不太好转过来&#xff0c;所以这里就放个链接吧&#xff1a;Dev Note Colab 不需要梯子&#xff1a; Github地址&#xff08;有的时候需要梯子&…

使用qemu搭建armv7嵌入式开发环境

目录 目录 1 概述 2 环境准备 2.1 vexpress系列开发板介绍 2.2 安装工具 2.2.1 安装交叉工具链 2.2.2 安装qemu 2.2.3 安装其他工具 3 启动uboot 3.1 uboot下载与编译 3.1.1 下载 3.1.2 编译 3.2 使用qemu启动uboot 4 启动kernel 4.1 下载和编译kernel 4.1.1 下…

CSS学习第二天

HTML文本颜色 颜色属性被用来设置文字的颜色&#xff0c;颜色通过css最经常的指定&#xff1a; #FF000&#xff1b;RGB&#xff08;255&#xff0c;0&#xff0c;0&#xff09;&#xff1b;颜色的名称red 一个网页的背景颜色是指在主体内的选择 文本的对齐方式 文本排列属性是…

游戏AI实现-寻路算法(Dijkstra)

戴克斯特拉算法&#xff08;英语&#xff1a;Dijkstras algorithm&#xff09;&#xff0c;又称迪杰斯特拉算法、Dijkstra算法&#xff0c;是由荷兰计算机科学家艾兹赫尔戴克斯特拉在1956年发现的算法。 算法过程&#xff1a; 1.首先设置开始节点的成本值为0&#xff0c;并将…