不错的页面loading效果

最新推荐文章于 2024-08-22 09:26:51 发布
最新推荐文章于 2024-08-22 09:26:51 发布
阅读量275 收藏
点赞数
文章标签： generator iframe function html javascript scroll
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>页面加载中····</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%;
left: 0;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFffff;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:230px;
border:1px solid #5a667b;
text-align:left;
z-index:2;
}
#loader_bg {background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:213px;
font-size:1px;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#77A9E0;
}
</style>
<script language="JavaScript" type="text/javascript">
document.write('<div id="loader_container"><div id="loader"><div align="center">页面加载中……<br />网络不好时加载时间可能会长一点，请稍候...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>');
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>179) pos += dir;
if (pos>179) len -= dir;
if (pos>179 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
</HEAD>
<body style="margin:0 0;padding:0 0" scroll="no">
<iframe  οnlοad="remove_loading();"  id="iframe3" height="100%"  width="100%" scrolling="no" frameborder="0" src=" http://g.cn" ></iframe>
</BODY>
<script>
//remove_loading();
</script>
</HTML>
tangjunfy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页中的loading代码
Mobidogs Blog
06-10 1454
#loader_container {text-align:center;position:absolute;top:40%;width:100%;left: 0;}#loader {font-family:Tahoma, Helvetica, sans;font-size:11.5px;color:#000000;background-color:#FFFFFF;padding:10px 0
页面正在加载中代码(网页打开慢时用)
weixin_34356138的博客
11-14 611
1。 列代码保存为load.JS文件 var s1 = setInterval("loading.innerText+='.'", 500); var s2 = setInterval("loading.innerText = ''", 8000); function window.onload() { clearInterval(s1)...
两款页面内容进度加载效果
anzheng9205的博客
11-21 142
第一款 将下列代码保存为load.JS文件 var s1 = setInterval("loading.innerText+='.'", 500); var s2 = setInterval("loading.innerText = ''", 8000); function window.onload() { ...
加载Loading进度条效果 2
01-18 553
<br /><html><br /><head><br /><style type="text/css"><br />/*Loader<br />----------------------------------------------*/<br />#loader_container {<br />   text-align:center;<br />   position:absolute;<br />   top:60%;<br />   width:100%;<br />   left: 0;<b
HTML+CSS实现页面Loading效果
醉酒的李白、的博客
08-23 776
HTML+CSS实现页面Loading效果
vue前端页面数据加载添加loading效果
qq_44614115的博客
03-07 5072
前端页面数据加载添加loading效果
页面Loading效果
08-03
在网页设计中，"页面Loading效果"是一种提升用户体验的重要手段。它是指在用户访问网站或应用时，为了平滑过渡到内容展示阶段，先展示一个加载指示器，通常表现为加载条、旋转图标或其他动态视觉元素，告知用户内容...
fakeLoader页面加载前loading效果
09-04
在"fakeLoader页面加载前loading效果"的应用中，有几个关键知识点需要理解： 1. **延迟加载（Lazy Loading）**：为了优化网页性能，现代网页设计中广泛采用延迟加载技术。这意味着只有当用户滚动到某个元素时，该...
基于javascript实现页面加载loading效果
10-22
本篇文档主要介绍如何使用JavaScript技术来实现网页在加载过程中的loading效果。通过这种方式，可以在网页内容还未完全加载完毕时，给用户显示一个加载中的提示，提升用户体验。 首先，文档中展示了HTML的基本结构...
页面加载的Loading效果
03-18
在网页设计中，用户体验是至关重要的一个环节，而页面加载的Loading效果就是提升用户体验的一种方式。Loading效果，也称为加载动画或预加载器，通常在网页内容还未完全加载完成时显示，以告知用户页面正在努力加载，...
原生JS实现LOADING效果
12-01
纯文本loading效果，可以自己定义颜色和速度 代码如下: /** Loading animation  * Created by 黑と白の印記 on 15/03/11.  */   function loading(element,lightColor,darkColor,speed,callback){  if(!...
JS实现页面加载完毕之前loading提示效果
u012028371的博客
02-16 8094
做成js调用： base-loading.js代码 [html] view plain copy   /*******************************************    *     * 创建人：Quber（qubernet@163.com）    * 创建时间：2014
js中load与onload的区别
热门推荐
ime33的博客
01-08 4万+
版权声明：本文为博主原创文章，未经博主允许不得转载。 在写交互的时候，加载函数使onload还是load呢？ 趁机整理以防遗忘！！ js中window.onload(function)等价于jquery中$(window).onload(function) 一：window.load这个只是表明事件方法，但并未执行，比如hover、click表示事件，必须用上hover、onclick他才...
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 696
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 648
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
Java学习Day33：HTML 第三章：挟魂崖
weixin_51721783的博客
08-21 668
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
【HTML】语义化
最新发布
DX390609的博客
08-22 146
根据内容的结构选择合适的标签。
纯js实现页面loading效果
12-17
纯js实现页面loading效果有多种方式，以下是一种常见的实现方法。 首先，在HTML文件中，我们可以通过添加一个具有id属性的div元素来作为loading效果的容器，用于显示loading动画： ```html <!DOCTYPE html> #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值