加载旋转器-即使在滚动页面时也始终保持在屏幕中间
loading Spinner - always keep in the middle of the screen even while scrolling the page
<div id="Dvloading" style="float: left;">
<i id="loadingSpinner" class="icon-spinner icon-spin blue" style="margin-left: 50%; position:absolute ; margin-top: 25%; z-index: 1000; font-size: 800%;"></i>
</div>
这是在页面加载时显示加载图形的代码。它在网格视图上方显示。当网格包含大量行时,当我向下滚动页面时,我看不到正在加载的图形。但是当我转到屏幕顶部时,我可以看到加载图形。我怎么让它一直在屏幕中间,即使滚动页面?
请帮帮我。
我浏览了我以前的答案,看看我是否可以添加一些更现代的东西。在我的新解决方案中,您不需要指定高度或宽度。这是更通用的解决方案。
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
试试这个:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; //Half of the height of the loading graphic
margin-left: -50px; //Half of the width of the loading graphic
}
我的解决方案是…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<style>
body {
height: 100%;
position: relative;
}
.k-loading-image{
position: fixed;
}
.longDiv {
height:1500px;
background: red;
}
</style>
<div class="longDiv">This is a long DIV...</div>
<script>
const showBusyIndicator = (show) => kendo.ui.progress($("body"), show);
$(document).ready(showBusyIndicator(true));
</script>
</body>
</html>
相关文章:
- HashMap可以始终保持相同的顺序
- 如何在WebRTC中始终保持1:1的纵横比视频
- 时间滑翔机对象始终保持空且未定义
- navigator.serviceWorker.controller始终保持为空
- 保持图像的一部分在画布上始终可见
- 多个复选框中的一个应始终保持未选中状态
- 如何在聊天刷新时将滚动条保持在底部,而不是中间
- 如何在不同浏览器中以及缩放时使单词始终保持在当前行上的位置
- 希望在重新加载后始终保持网页位置打开
- 如何使滚动条始终保持在页面底部
- 广播中的NG模型始终保持真实
- 我将如何在 HTML/CSS 中始终将固定导航保持在顶部
- 如何调整jQuery动画以使元素保持在中间
- 始终将插入符号保持在文本区域的垂直中间
- 原始字符串是否始终保持未修改
- 始终保持脚本在服务器端运行
- 如何始终保持一个元素与活动类
- 使用JavaScript使背景图像在滚动时始终保持不变(加上其他查询)
- 加载旋转器-即使在滚动页面时也始终保持在屏幕中间
- 创建一个始终保持打开状态的窗口