div加loading

要在div中添加loading效果，可以通过添加一个包含loading动画的元素来实现。以下是一个示例代码：

HTML代码：

<div id="myDiv">
  <p>这是我的div内容</p>
</div>

CSS代码：

#myDiv {
  position: relative;
}

#myDiv.loading::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5) url("loading.gif") no-repeat center center;
  z-index: 9999;
}

JS代码：

var myDiv = document.getElementById("myDiv");

function showLoading() {
  myDiv.classList.add("loading");
}

function hideLoading() {
  myDiv.classList.remove("loading");
}

在需要显示loading效果的时候，调用`showLoading()`函数，隐藏loading效果的时候，调用`hideLoading()`函数即可。

相关问题

elementui 怎么给div加上loading

ElementUI 提供了一个 Loading 组件，可以在需要的时候给任意元素加上 Loading 效果。具体实现方法如下：

1. 在需要加上 Loading 效果的 div 元素外面包一个 el-loading-container 的 div：

<div class="el-loading-container">
  <div id="my-div">这是需要加上 Loading 效果的 div</div>
</div>

2. 在 JavaScript 中获取要加上 Loading 效果的 div 元素，并使用 ElementUI 的 Loading 组件进行包装：

import { Loading } from 'element-ui';

const myDiv = document.getElementById('my-div');

// 创建 Loading 实例
const loadingInstance = Loading.service({
  target: '.el-loading-container', // 指定 Loading 的父元素
  fullscreen: false, // 是否全屏显示
  text: 'Loading', // 加载文字
  spinner: 'el-icon-loading', // 加载图标
  background: 'rgba(0, 0, 0, 0.7)', // 遮罩层背景色
});

// 加载完成后销毁 Loading 实例
loadingInstance.close();

上面的代码中，我们首先通过 document.getElementById() 方法获取了要加上 Loading 效果的 div 元素，然后使用 Loading.service() 方法创建了一个 Loading 实例，并指定了它的一些属性，如 target、text、spinner、background 等。最后，我们可以在需要的时候调用 loadingInstance.close() 方法来销毁 Loading 实例，停止 Loading 效果的显示。

需要注意的是，为了让 Loading 效果正常显示，我们还需要在全局样式中添加以下样式：

.el-loading-parent--relative {
  position: relative !important;
}

.el-loading-parent--hidden {
  overflow: hidden !important;
}

.el-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 2000;
}

.el-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2001;
}

这些样式是 Loading 组件的核心样式，负责实现 Loading 效果的显示和遮罩层的生成。

jsp页面加loading

可以使用jQuery的ajaxStart和ajaxStop方法来实现这个功能。具体实现步骤如下：

1. 在页面顶部引入jQuery库。

2. 在页面中添加loading元素的HTML代码：

<div id="loading">
<img src="loading.gif" alt="Loading">
</div>

3. 在CSS中对loading元素进行样式设置：

#loading {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
text-align: center;
padding-top: 15%;
}

#loading img {
width: 50px;
height: 50px;
}

4. 在页面中添加jQuery代码：

$(document).ajaxStart(function() {
$("#loading").show();
});

$(document).ajaxStop(function() {
$("#loading").hide();
});

这样，在页面发送ajax请求时，loading元素就会显示出来；当请求完成时，loading元素就会隐藏起来。