如何在屏幕中央位置显示离子旋转器？
要在屏幕中央位置显示一个旋转器（通常是一个加载指示器），你可以使用HTML和CSS来实现。以下是一个简单的示例，展示了如何创建一个居中的旋转器。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Spinner</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="spinner-container">
<div class="spinner"></div>
</div>
</body>
</html>CSS部分（styles.css）
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.spinner-container {
text-align: center;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 36px;
height: 36px;
border-radius: 50%;
border-left-color: #000;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}解释
- HTML部分：
- 创建一个
div元素，类名为spinner-container，用于包裹旋转器。 - 在
spinner-container内部再创建一个div元素，类名为spinner，这是实际的旋转器。
- 创建一个
- CSS部分：
body和html设置为高度100%，并使用Flexbox布局使其内容居中。spinner-container设置为文本居中，以确保旋转器在其内部居中。spinner使用边框创建旋转效果，并通过CSS动画spin实现旋转动画。
应用场景
这个居中的旋转器通常用于网页加载时显示，告知用户页面正在加载中。它可以应用于各种网页和应用程序，特别是在需要长时间处理数据或请求外部资源时。
参考链接
通过这种方式，你可以轻松地在屏幕中央位置显示一个旋转器，并且可以根据需要调整其样式和大小。
相关·内容
2回答
离子3图像延迟加载器
、、、
我正在开发使用外部图像文件的离子应用程序。这些图像正在加载元素，如离子卡，离子项目，离子幻灯片.我需要一个旋转器或某种技术来显示，直到图像成功。
我尝试过图像缓存插件，但没有成功。
浏览 1提问于2018-03-26得票数 3
回答已采纳
一旦登录到应用程序，屏幕就冻结了-离子旋转器停止旋转，我使用的进度条插件中途停止，与之配套的小旋转器完全冻结。
奇怪的是，它背后的javascript一直在工作。控制台显示了所有应该显示的内容。我不明白的是，是什么让离子旋转器冻结(和屏幕冻结)，而不会抛出错误？
浏览 3提问于2017-05-16得票数 1
如何在屏幕中间对齐离子卡(垂直和水平)？
出错了！sass文件中的样式
.error {转换: translateX(-50%) translateY(-50%)；顶部: 50%；左: 50%；位置:绝对；.错误标题{位置:相对；文本对齐:中心；顶部:36%；字体大小: 3.0em；宽度:
浏览 0提问于2018-07-27得票数 1
我正在做一个AR应用程序，它根据具体位置在cameraView中显示一个UILabel。当iphone的指南针指向该位置时，标签会显示在屏幕中央。我的问题是，当我转动iphone时，我希望这个标签旋转到左边或右边。我猜有一些方法可以将指南针的度数映射到屏幕坐标，这样我就可以在屏幕的正确位置重新绘制标签，但我无法想象如何做到这一点。我不需要加速度计来做这件事，我只需要把指南针的值转换成屏幕坐标。有人知
浏览 0提问于2010-10-27得票数 0
回答已采纳
这是我已经使用了一段时间的实践，但它似乎被废弃了，文献似乎说，当屏幕转到后台或旋转时，保存和恢复数据的正确方法是片段。谢谢您能提供的任何帮助。
浏览 0提问于2015-03-08得票数 0
回答已采纳
比方说，我正在从Windows资源管理器中双击一个基于CDialog的MFC应用程序的可执行文件。它通常在屏幕中央显示对话框窗口。但是，如果我将Windows资源管理器窗口移到辅助监视器中并在那里双击它，它的窗口仍然显示在主监视器中。PS。对话框窗口在InitInstance中显示如下：m
浏览 0提问于2016-02-04得票数 1
我编写了一个自定义视图，在屏幕中央显示文本，如下所示。
我也做了，如果你触摸绿色的盒子，你可以旋转和缩放文本，如下所示。
这是问题所在。每当我旋转文本并释放，然后尝试再次旋转，它无法检测到rect正在使用myRect.contains(X，Y)。过了一段时间后，我发现它旋转后，并触摸到原来的绿色盒子，它允许我再次旋转。OnTouchEvent显然是计算正确的位置，因为它绘制在正确的位置。我只想弄清楚为什么
浏览 3提问于2014-05-09得票数 0
回答已采纳
1回答
我目前正在开发一个指针，可以直观地显示播放器当前指向的位置。这应该有两个功能：
public class MousePosition3D : MonoBehaviour这很好，但是当我在指针中添加一个对撞机(允许玩家与其他对象交互)时，它开始无限地循环到对象，从哪里是我的POV，因为它与自己的对撞机碰撞的每一个帧都会不断改变位置。我的目标是在屏幕中央有一个指
浏览 3提问于2021-09-16得票数 0
回答已采纳
我有一个OrbitControls摄像头，它可以绕着点旋转: target =player.position，x，y和z。这很好，但是播放器就在屏幕的中央。我需要一台摄像机来绕着戒指旋转。player.position.x;controls.target.z = player.position.z;
所以我们绕着一个固定点旋转但我需要一个点，它可以根据controls.getAzimuthalAngle(
浏览 51提问于2020-02-22得票数 0
回答已采纳
在iOS中运行应用程序时，当我们单击任何按钮(UIButton)时，默认的加载微调器将在屏幕中央旋转，直到执行该操作。但是，我不希望弹出加载微调器，而是希望自定义指示器在另一个位置旋转。我在这里使用的是UIActivityIndicator，自定义指示器在其位置上工作正常。但在单击时，中心的默认微调器仍然会出现。请建议正确的方式，以便默认加载微调器隐藏或不会在单击按钮时弹出。
浏览 16提问于2017-08-05得票数 0
回答已采纳
2回答
我在屏幕中央有一个图像视图。一旦用户点击了一个按钮，我想在旋转它的同时将它移动到“我拥有的文本视图下方”(有点像一个从A点到B点的自由移动)，我该如何实现呢？我知道inageview的xnl部分，按钮监听器等等，但不确定如何1-将图像移动到相对于视图的另一个位置(假设在文本视图域下面) 2-在移动时旋转图像
任何帮助都是非常感谢的。谢谢
浏览 0提问于2012-02-26得票数 1
回答已采纳
1回答
我的应用程序支持在横向模式下显示一些屏幕，在横向模式下，我设置隐藏状态栏以获得显示数据的模式空间。问题是当隐藏状态栏和旋转屏幕时，它会在状态栏位置留下白色的步幅，直到屏幕完全旋转，如下面的截图所示。
我猜想旋转屏幕时的操作步骤是: 1.隐藏状态栏2.旋转屏幕3.调整屏幕大小以取代状态栏。因此，直到屏幕完全旋转，用户仍然可以
浏览 0提问于2010-09-21得票数 5
回答已采纳
我正在使用@ GoogleMap /GoogleMap在一个离子/角度网页应用程序上绘制标记。此电容包装器没有提供显示InfoWindow的方法，因此我使用Ionic的popover进行了我自己的演示；下面是代码。
现在我的问题是，弹出窗口总是显示在屏幕的中央。onSetMarkerClickListener回调传递标记，但是这个对象没有任何与单击事件相关的东西，我可以从中获取屏幕坐标来定位弹出窗口。我如何才能准确定位弹出式的地图标记所在的位
浏览 15提问于2022-11-22得票数 -2
1回答
找出相机世界的宽度和高度？
、、、、
简单地说，这是我的问题:我想知道如何在屏幕中央生成一个物体，这意味着我想要在World单位中找到屏幕的宽度和高度值。相机位置: 0,23，-10Vector3 screenWorldSize = Camera.main.ScreenToWorldPoint(new Vector3gamePrefab);
tempObject.transform.position = new Vector3(screenWorldSize.x, 1.5f,
浏览 3提问于2019-09-22得票数 0
我正在使用Xamarin.iOS、MvvmCross和Xamarin.iOS(作为mvvmcross的支持库)第一次查看视图控制器第二次查看视图控制器奇怪的是，当视图控制器位于导航栏下面，而我将屏幕从景观旋转并返回到纵向时，视图会
浏览 1提问于2017-03-08得票数 0
从许多angular 2示例中，我们可以看到index.html中的以下代码：这是为了告诉用户应用程序JavaScripts还没有出现在浏览器中，所以现在浏览器只加载这个也就是说，当浏览器仍在加载应用程序JavaScripts时，如何显示微调器组件？
(最终结果的一个例子是当你访问LinkedIn.com时看到的。
浏览 10提问于2017-08-29得票数 1
回答已采纳
1回答
我有一个特定的要求，我需要我的手机启动在横向模式，其中包括启动标志，动画(这些都可以通过旋转动画帧来完成)。我希望将设备限制为仅在横向模式下显示。我用过旋转锁应用程序，但我想把它作为操作系统的一部分，这样"Android正在启动“的启动消息也会显示在Landscape中。在哪里可以对源代码进行必要的更改？非常感谢您的投入。
浏览 22提问于2021-04-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
