CSS 不同颜色的小圆角方块组成的旋转加载动画

 

<template>
	<!-- 创建一个装载自定义旋转加载动画的容器 -->
	<view class="spinner">
		<!-- 定义外部包裹容器,用于实现整体旋转动画 -->
		<view class="outer">
			<!-- 定义四个内部小方块以形成十字形结构 -->
			<view class="inner tl"></view> <!-- 左上角 -->
			<view class="inner tr"></view> <!-- 右上角 -->
			<view class="inner br"></view> <!-- 右下角 -->
			<view class="inner bl"></view> <!-- 左下角 -->
		</view>
	</view>
</template>

<script>
	
</script>

<style>
	/* 设置页面背景颜色为深灰色 */
	body {
		background-color: #212121;
	}

	/* 设置旋转加载动画容器样式 */
	.spinner {
		position: absolute;
		/* 绝对定位,使其能居中显示 */
		width: 128px;
		/* 设置宽度 */
		height: 128px;
		/* 设置高度 */
		top: calc(50% - 64px);
		/* 上边距计算

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/399959.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vtk.js加载dicom,获取世界点的坐标、两点之间的距离

通过点击vtk的renderWindow&#xff0c;获取坐标点。 获取点的坐标有vtkCellPicker和vtkPointPicker两个方法&#xff0c;区别在于vtkCellPicker可以区分是否点击在模型上&#xff0c;推荐使用vtkCellPicker。 获取两点之间距离使用vtkMath的方法&#xff0c;vtkMath.distance…

阿里云k8s容器部署consul集群的高可用方案

一、背景 原本consul集群是由三个server节点搭建的&#xff0c;购买的是三个ecs服务器&#xff0c; java服务在注册到consul的时候&#xff0c;随便选择其中一个节点。 从上图可以看出&#xff0c; consul-01有28个服务注册&#xff0c;而consul-02有94个服务&#xff0c;co…

一凸包----------12,分而治之(2)

在上节中&#xff0c;两部分子凸包有重合的部分&#xff0c;不简洁。这一节是沿着某个方向&#xff0c;子凸包不重叠&#xff0c;如下图 根据以前的方法&#xff0c;很可能认为是两个子凸包上顶点与上顶点相连&#xff0c;下顶点与下顶点相连&#xff0c;形成两条支撑线&#…

算法沉淀——二叉树中的深搜(leetcode真题剖析)

算法沉淀——二叉树中的深搜 01.计算布尔二叉树的值02.求根节点到叶节点数字之和03.二叉树剪枝04.验证二叉搜索树05.二叉搜索树中第K小的元素06.二叉树的所有路径 二叉树的深度优先搜索是一种遍历二叉树的方法&#xff0c;它通过深度递归的方式探索树的结构。有两种主要形式&am…

ubuntu 22.04 图文安装

ubuntu 22.04.3 live server图文安装 一、在Vmware里安装ubuntu 22.04.3 live server操作系统 选择第一个选项开始安装 选择English语言 选择中间选项不更新安装&#xff0c;这是因为后续通过更换源之后再更新会比较快 键盘设计继续选择英文&#xff0c;可以通过语言选择…

【微服务生态】Dubbo

文章目录 一、概述二、Dubbo环境搭建-docker版三、Dubbo配置四、高可用4.1 zookeeper宕机与dubbo直连4.2 负载均衡 五、服务限流、服务降级、服务容错六、Dubbo 对比 OpenFeign 一、概述 Dubbo 是一款高性能、轻量级的开源Java RPC框架&#xff0c;它提供了三大核心能力&#…

zabbix5.0利用percona监控MySQL

具体来说包括: Percona Monitoring Plugins 这是一组用于收集MySQL实例各种性能指标和状态的插件脚本,包括: mysqld_stats.pl - 收集服务器状态计数器mysqld_statement_replay.pl - 进行负载模拟测试pt-status - 收集InnoDB资源使用情况等 Percona Templates 基于这些插件收集…

陪诊小程序|陪诊系统解决就医繁忙问题

陪诊现在是个新兴行业&#xff0c;具有比较大的市场前景&#xff0c;陪诊小程序更是行业蓝海&#xff0c;不仅为用户解决了无人陪同看病、医院科室流程繁杂的问题&#xff0c;更为陪诊师提供了线上直接获客的渠道&#xff0c;可谓发展前景不可估量。陪诊服务提供者及需求者来说…

C++之Easyx——图形库的基本功能(2):来点色彩

一、setbkcolor 函数定义 void EGEAPI setbkcolor(color_t color, PIMAGE pimg NULL); // 设置当前绘图背景色&#xff08;设置并做背景色像素替换&#xff09; 使用说明 void EGEAPI setbkcolor(颜色RGB, PIMAGE pimg NULL); // 设置当前绘图背景色&#xff08;…

关于在Windows上socket组播通信的一些问题

一、Windows上的组播通信 基本和linux上的socket编程一致&#xff0c;稍微有点区别 以下是我测验可以使用的代码&#xff0c; 客户端 // 广播处理回复消息回调 typedef void(*handMulticastRsp)(char* rspstr, int len); // 发送组播消息 // buff 发送内容 // len 发送内容…

Linux操作系统应用软件编程

今天是学习嵌入式相关内容的第二十四天 b -- block -- 块设备文件 --- 硬盘&#xff08;存储设备&#xff09; c -- character -- 字符设备文件 --- 鼠标 &#xff08;输入输出设备&#xff09; d -- directory -- 目录文件 - -- regular -- 普通文件 ---…

十、计算机视觉-腐蚀操作

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、什么是腐蚀二、如何实现腐蚀三、腐蚀的原理 一、什么是腐蚀 在我们生活中常会见到腐蚀&#xff0c;比如金属表面受到氧化或其他化学物质的侵蚀&#xff0c;导致…

【办公类-16-07-04】合并版“2023下学期 中班户外游戏(有场地和无场地版,一周一次)”(python 排班表系列)

背景需求&#xff1a; 把 无场地版&#xff08;贴周计划用&#xff09; 和 有场地版&#xff08;贴教室墙壁上用&#xff09; 组合在一起&#xff0c;一个代码生成两套。 【办公类-16-07-02】“2023下学期 周计划-户外游戏 每班1周五天相同场地&#xff0c;6周一次循环”&…

基于RHEL8部署Zabbix6.0,监控不再困难!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

Linux是什么

文章目录 Linux是什么Linux之前Unix发展史MulticsUnicsUnixUNIX分支--BSDUNIX分支--System VMinixGUN计划GPLXFree86Linux 开源软件和闭源软件开源软件闭源软件/专利软件(copyright) Linux的内核版本Linux发行版 Linux是什么 Linux到底是操作系统还是应用程序呢&#xff1f;Li…

利用nbsp设置空格

想要实现上面效果&#xff0c;一开始直接<el-col :span"8" >{{ item.name }} </el-col> 或者<el-col :span"8" >{{ item.name }}</el-col>或者<el-col :span"8" >{{ item.name }}</el-col> 都无…

基于RBAC的权限管理的理论实现和权限管理的实现

权限管理的理论 首先需要两个页面支持&#xff0c;分别是角色管理和员工管理&#xff0c;其中角色管理对应的是角色和权限的配合&#xff0c;员工管理则是将登录的员工账号和员工所处的角色进行对应&#xff0c;即通过新增角色这个概念&#xff0c;让权限和员工并不直接关联&a…

【前端】前端三要素之DOM

写在前面&#xff1a;本文仅包含DOM内容&#xff0c;JavaScript传送门在这里&#xff0c;BOM传送门在这里。 本文内容是假期中刷的黑马Pink老师视频&#xff08;十分感谢Pink老师&#xff09;&#xff0c;原文保存在个人的GitLab中&#xff0c;如果需要写的网页内容信息等可以评…

ArcGIS中查看栅格影像最大值最小值的位置

如果只是想大概获取栅格影像中最大值最小值的位置进行查看&#xff0c;可以不用编写程序获取具体的行列信息&#xff0c;只需要利用分类工具即可。 假设有一幅灰度影像数据&#xff0c;如下图所示。 想要查看最大值2116的大概位置在哪里&#xff0c;可以右击选择图层属性&…

缩小ppt文件大小的办法

之前用别人模版做了个PPT&#xff0c;100多M,文件存在卡顿问题 解决办法&#xff1a; 1.找到ppt中哪个文件过大&#xff0c;针对解决 2.寻找视频/音频文件&#xff0c;减少体积 3.字体文件是不是过多的问题。 一、文件寻找的内容步骤&#xff1a; 步骤&#xff1a; 1.把p…