css 实现页面加载中等待效果

最新推荐文章于 2024-07-17 15:35:12 发布
最新推荐文章于 2024-07-17 15:35:12 发布
阅读量290 收藏 1
点赞数
原文链接：http://www.cnblogs.com/zhourunbest/p/4795149.html
版权

 

<!DOCTYPE html>
<html>
<head>
<title>css实现页面加载中,请稍候效果</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>
<body>
    <div id="loadPage"
        style="display:none;position:absolute; left:-1px; top:1px; width:100%; height:100%;moz-opacity: 0.3;filter:Alpha(opacity=50); opacity: 0.3; background-color:#555; z-index:1000;">
        <img src="./images/06.gif" style="position: fixed;left: 48%;top:35%;"></img>
    </div>
</body>
</html>


默认是隐藏的，可通过js控制div的显示和隐藏，背景颜色和图片可自行调节。

 

转载于:https://www.cnblogs.com/zhourunbest/p/4795149.html

weixin_30510153
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
30种css3 animation页面加载等待动画特效
09-13
30种css3 animation页面加载等待动画特效
用户等待 显示加载中样式
weixin_30399871的博客
06-27 118
有的时候，我们在请求后台执行任务的时候。需要用户等待后台处理，如果没提示的时候，会给用户体验很差的感觉，几年介绍一个jquery的一个插件。 官网：http://spin.js.org 完整的例子： html: 1 <!--loading--> 2 <div id='foo'></div> 3 <div id='xx'></di...
加载中的css动画
最新发布
老实敲代码，佛只渡有缘人
07-17 150
css实现加载中动画
css特效动画——页面加载中 ...
朝阳39的博客
03-22 789
实现原理 插入3行内容，分别是3个点、2个点和1个点，然后通过transform控制垂直位置，依次展示每一行的内容。 完整范例代码 <template> <div style="text-align: center;padding-top: 100px"> 正在加载中 <dot>...</dot> </div> </template> <style scoped&...
css3过度动画网页加载中,css
weixin_35066076的博客
08-03 199
cssbody {margin: 0;padding: 0;background: #2196f3;}.transition-loader {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}.transition-loader-inner {transform: translateY(-50%);top: 50%;positi...
页面加载 等待css,css3 loading等待加载代码
weixin_39653766的博客
08-03 323
css3 loading等待加载代码 - 何问起@keyframes move {from {transform: translate(0,50%);}to {transform: translate(0,850%);}}* {margin: 0;padding: 0;}body {min-width: 325px;height: 100vh;display: flex;flex-wrap: wr...
纯CSS实现预加载动画效果
09-27
在网页设计中，预加载（Preloader）动画是一种常见的用户体验优化技术，用于显示网页内容正在加载的过程，提高用户的等待感知。本篇文章将介绍如何仅使用CSS实现预加载动画效果，无需依赖JavaScript或者其他复杂的...
CSS 实现网页图片的预加载
09-25
在网页设计中，图片预加载是一项重要的优化技术，它的目的是在用户访问页面时提前加载一些即将需要的图片，以减少用户等待时间，提高用户体验。预加载尤其适用于包含大量图片或图片密集型的网页，例如画廊、产品展示...
纯CSS实现超炫酷网页动态加载中特效动画.zip
07-11
总的来说，纯CSS实现的超炫酷网页加载动画为网页设计师提供了丰富的工具箱，让他们能够在不增加额外性能负担的情况下，为用户提供更具吸引力的等待体验。开发者只需将这些预设的动画样式引入到自己的项目中，稍作...
css和jquery实现页面加载前的等待界面
10-27
总结来说，结合CSS和jQuery实现的预加载界面不仅能够提升用户对网页加载过程的认知，还能在等待期间提供一种积极的用户体验。通过巧妙地设计和编程，我们可以创建出既美观又实用的加载界面，让网页加载变得不再...
vue实现页面加载动画效果
08-29
Vue 实现页面加载动画效果是指在 Vue 应用程序中实现页面加载动画效果，使用户在等待页面加载时看到一个友好的提示信息。这种效果可以提高用户体验和应用程序的整体性能。 实现页面加载动画效果的思路是使用 Vue 的...
div加载等待
05-30
div加载等待，等待图片，页面覆盖，不能操作
查询数据时候等待效果
舞动de人生
06-29 1239
function waitSubmit(){ try{ $.blockUI({ //fadeIn: 700, //渐入式显示 fadeOut: 700, //渐出式消失 timeout: 20000, //2 秒后消失 message: ' 数据处理中，请稍候', css: { border: '0', backgroundColor
css3正在加载中
青阳的博客
05-17 1513
<div id="loading1"> <div class="demo1"></div> <div class="demo1"></div> <div class="demo1"></div> <div class="demo1"></div> ...
利用CSS3简单实现加载中效果
Bule_daze的博客
10-21 279
<template> <p class="demo">加载中</p> </template> .demo:after{ content: "." } .demo:after { animation: dot 3s linear infinite; } @keyframes dot { 0% { content: "."; ...
星空css,纯CSS星空动画
weixin_35427210的博客
08-03 582
css@-webkit-keyframes stars {50% {opacity: 1;}100% {transform: translate3d(0vmin, 0vmin, 1000vmin) scale(5);opacity: 0;}}html, body {width: 100%;height: 100%;}body {perspective: 200vmin;perspective-or...
页面加载更多的css,十种加载样式
weixin_30786631的博客
08-04 1389
原标题：十种加载样式对于设计师来说往往更多的是注重界面的设计，从而忽略了用户对于加载等待的体验，如何用不同的加载来缓解用户的等待焦虑，从而提升用户对产品的体验呢？下面就来和大家介绍一下都有哪些加载样式和使用方法。目录什么是加载？什么情况下需要加载？加载的样式一、什么是加载？加载如同反馈，在人机交互中，用户与界面的每一次互动都是一次加载过程。因操作导致的页面跳转、刷新或弹窗等从而使页面元素或信息发生...
CSS实现加载中效果
popstarqq的博客
06-30 950
全部代码和效果如下 <!DOCTYPE html> <html> <head> <title>加载效果</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0;
“正在加载中...”CSS效果实现
qq_43437571的博客
08-17 1748
先上代码： dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before{ display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot
JS实现页面加载等待转圈效果页面加载完毕之前loading提示效果...
06-07
你可以使用JavaScript和CSS来实现一个页面加载等待转圈效果，具体方法如下： 1. 在HTML中添加一个元素作为等待动画的容器，例如： ```html <div id="loader"></div> ``` 2. 在CSS中，为该元素添加样式，如下： ```css #loader { border: 8px solid #f3f3f3; /* 转圈的边框 */ border-top: 8px solid #3498db; /* 转圈的顶部边框 */ border-radius: 50%; /* 将边框变为圆形 */ width: 60px; /* 宽度 */ height: 60px; /* 高度 */ position: fixed; /* 固定定位 */ top: 50%; /* 距离顶部50% */ left: 50%; /* 距离左侧50% */ transform: translate(-50%, -50%); /* 居中显示 */ z-index: 999; /* 置于最上层 */ display: none; /* 默认隐藏 */ } #loader.show { display: block; /* 显示 */ } ``` 3. 在JavaScript中，为页面加载事件添加一个监听器，并在页面加载之前显示加载动画，如下： ```js window.addEventListener('load', function() { var loader = document.getElementById('loader'); loader.classList.remove('show'); // 隐藏加载动画 }); document.addEventListener('DOMContentLoaded', function() { var loader = document.getElementById('loader'); loader.classList.add('show'); // 显示加载动画 }); ``` 这样就完成了一个简单的页面加载等待转圈效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值