【JQ】加载中动画效果，带gif图片

下页、再停留

于 2024-04-08 13:04:21 发布

阅读量261

点赞数 3

分类专栏：前端技术文章标签：前端 css javascript

本文链接：https://blog.csdn.net/qq_25285531/article/details/137504805

版权

前端技术专栏收录该内容

64 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML页面中使用CSS和jQuery创建一个加载中效果，包括设置固定定位的半透明背景遮罩和动态添加包含动画图片和文本的容器。

摘要由CSDN通过智能技术生成

效果图

CSS样式

/*加载中*/
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-container {
    position: fixed;
    top: 40%;
    left: 30%;
    height: 200px;
    margin: 0 auto;
    z-index: 10001;
}
.loading-container img{
    width: 150px;
    height: 150px;
}

.loading-container div{
    position: relative;
    top:0%;
    left: -5%;
    color: #46AAF7;
    font-size: 0.35rem;
    font-weight: 600;
}

HTML

<div id="loading-overlay" style="display:none">
	 <div class="loading-container" style="display:none"></div>
</div>

//     加载
$('.loading-container').append('<img class="loading-animation" src="/newadmin/images/loadingimg.gif" alt="Loading..."><div>正在智能生成训练题</div>');
$("#loading-overlay").fadeIn()
$('.loading-container').fadeIn()