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

embedded/2024/11/23 20:18:18/

前言

现在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/embedded/139266.html

相关文章

探索 TraceBoard:统计你的键盘按键使用情况

在数字化时代&#xff0c;键盘已经成为我们生活中不可或缺的一部分。无论是工作、学习还是娱乐&#xff0c;我们都在不断与键盘互动。然而&#xff0c;你是否曾好奇&#xff0c;自己日常使用中最常按下的是哪些键&#xff1f;一个名为 TraceBoard 的开源项目&#xff0c;它能帮…

我用豆包MarsCode IDE 做了一个 CSS 权重小组件

作者&#xff1a;夕水 查看效果 作为一个前端开发者&#xff0c;应该基本都会用VSCode来做开发&#xff0c;所以也应该见过如下这张图的效果: 以上悬浮面板分为2个部分展示内容。 <element class"hljs-attr">: 代表元素只有一个类名叫hljs-attr的类选择器&am…

无尽梦回公测 低配置手机如何玩无尽梦回?手机发烫内存不足玩无尽梦回攻略

无尽梦回公测将于 11 月 21 日正式开启 &#xff01;多角色动作肉鸽爽游&#xff0c;横扫14亿梦境&#xff01; 无尽梦回是一款以14亿人共通梦境为题材的多角色动作肉鸽爽游。低上手门槛&#xff0c;华丽纯爽感&#xff01;你将在梦境专卖店成为「捕梦者」&#xff0c;进入无秩…

【AI大模型引领变革】探索AI如何重塑软件开发流程与未来趋势

文章目录 每日一句正能量前言流程与模式介绍【传统软件开发 VS AI参与的软件开发】一、传统软件开发流程与模式二、AI参与的软件开发流程与模式三、AI带来的不同之处 结论 AI在软件开发流程中的优势、挑战及应对策略AI在软件开发流程中的优势面临的挑战及应对策略 结论 后记 每…

【汇编语言】转移指令的原理(三) —— 汇编跳转指南:jcxz、loop与位移的深度解读

文章目录 前言1. jcxz 指令1.1 什么是jcxz指令1.2 如何操作 2. loop 指令2.1 什么是loop指令2.2 如何操作 3. 根据位移进行转移的意义3.1 为什么&#xff1f;3.2 举例说明 4. 编译器对转移位移超界的检测结语 前言 &#x1f4cc; 汇编语言是很多相关课程&#xff08;如数据结构…

PW系列工控电脑复制机:效率与精度双重提升

工控电脑复制应用&#xff1a;效率与精度的双重提升 随着现代企业对大数据、数据备份、和跨平台兼容性需求的快速增长&#xff0c;工控电脑已成为数据密集型产业的核心设备。针对工控环境中大量数据复制的特殊需求&#xff0c;PW系列NVMe/SATA PCIe SSD复制机&#xff08;如PW…

怎么做好白盒测试?

白盒测试 一、什么是白盒测试&#xff1f;二、白盒测试特点三、白盒测试的设计方法1、逻辑覆盖法1、测试设计方法—语句覆盖a、用例设计如下&#xff1a;b、语句覆盖的局限性 2、测试设计方法—判定覆盖a、测试用例如下&#xff1a;b、判定覆盖的局限性 3、测试设计方法—条件覆…

IntelliJ IDEA 2024.3 K2 模式已发布稳定版,Android Studio Meerkat 预览也正式支持

关于 K2 Mode 在 Android Studio Ladybug 更新里我们简单介绍过&#xff0c;因为 Ladybug 采用的是 IntelliJ IDEA 2024.2 &#xff0c;所以 AS 也开始支持新的 K2 机制&#xff0c;例如支持 gradle.kts 、KMP 项目、代码突出显示、调试等。 而从 IntelliJ IDEA 2024.3 版本开始…