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

ops/2024/12/17 23:39:10/

前言

现在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/ops/142755.html

相关文章

腾讯云COS跨域访问CORS配置

腾讯云COS跨域访问CORS配置方法如下&#xff0c;参考以下截图&#xff1a; 参考文章&#xff1a; 跨域及CORS-Nginx配置CORS

CSS 组合选择符

CSS 组合选择符 概述 CSS(层叠样式表)组合选择符是一种强大的功能,它允许开发者通过多种方式选择和操作HTML文档中的元素。组合选择符使得样式的设计和应用更加灵活和高效。本文将详细介绍CSS组合选择符的原理、类型以及如何在实际开发中有效使用它们。 CSS选择符基础 在…

【网络安全设备系列】7、流量监控设备

0x00 定义: 网络流量控制是一种利用软件或硬件方式来实现对电脑网络流量的控制。它的最主要方法&#xff0c;是引入QoS的概念&#xff0c;从通过为不同类型的 网络数据包标记&#xff0c;从而决定数据包通行的优先次序。 0x01 类型: 流控技术分为两种&#xff1a; 一种是…

深入理解addEventListener中的第二个参数:listener

起因 首先&#xff0c;之前留给我们的一点东西&#xff0c;js的深入内容关键在addEventListener&#xff0c;这个函数中的参数&#xff0c;它们三个参数&#xff0c;分别为type、listener、options&#xff0c;当然在这里还有一些小的问题&#xff0c;比如mdn文档中它介绍到了另…

uniapp使用百度地图配置了key,但是显示Map key not configured

搞了我两天的一个问题。 hbuilderx版本&#xff1a;4.36 问题介绍&#xff1a; 我的项目是公司的项目&#xff0c;需要在H5端使用百度地图&#xff0c;使用vue-cli创建的uniapp&#xff0c;就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因&#xf…

数据结构开始——时间复杂度和空间复杂度知识点笔记总结

好了&#xff0c;经过了漫长的时间学习c语言语法知识&#xff0c;现在我们到了数据结构的学习。 首先&#xff0c;我们得思考一下 什么是数据结构&#xff1f; 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素…

快速本地化部署 OnlyOffice服务 ( Linux+Docker)

文章目录 一、OnlyOffice介绍&#x1f4d6;二、集成OnlyOffice&#x1f9e9;2.1 环境准备&#x1f5a5;️2.2 搜索镜像2.3 拉取镜像2.4 查看镜像2.5 创建容器2.6 进入容器配置2.7 重启服务2.8 添加字体字号2.9 测试OnlyOffice服务 三、在线预览office文档四、Cpolar内网穿透 一…

突破时间与空间限制的富媒体百宝箱——智能工具箱:让云上内容生产更easy

“这是你的同款日常吗&#xff1f;老是在赶deadline&#xff0c;苦练PS还未出师&#xff0c;premiere、达芬奇真的好难&#xff0c;学python脑容量确实不够~打工人太难了~~” 来试试智能工具箱吧&#xff01;即来即用&#xff0c;一键实现办公自由。图片工具、视频工具、音频工…