`
流星剑
  • 浏览: 94666 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面加载时显示进度条的js

    博客分类:
  • js
CSS 
阅读更多
<style type="text/css">
/*Loader Start----------------------------------------------*/
#loader_container { text-align:center;position:absolute;top:400px;width:100%;margin-left:auto; margin-right:auto;overflow:hidden; }
#loader { font-family:Tahoma, Helvetica, sans;font-size:11.5px;color:#abc;background-color:#f2f2f2;padding:10px 0 16px 0;margin:0 auto;display:block;width:130px;border: #dae2e7 1px solid;text-align:left;z-index:2; }
#loader_bg { background-color: #abc;position:relative;top:8px;left:8px;height:7px;width:113px;font-size:1px }
#progress { height:5px;font-size:1px;width:1px;position:relative;top:1px;left:0px;background-color: #fff; }
/*Loader End ----------------------------------------------*/
</style>

 <!---- loading start !---->
        <div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
            <div id="loader">
                <div align="center">
                    正在载入中 ...</div>
                <div id="loader_bg">
                    <div id="progress">
                    </div>
                </div>
            </div>
        </div>
<!---- loading End !---->

 注意:还要引入loader.js文件,提供下载如下

分享到:
评论

相关推荐

    页面加载进度条

    页面加载进度条是一种常见的用户体验设计元素,特别是在网页和应用程序中,它向用户显示了页面内容正在加载的过程。这种视觉反馈可以提升用户体验,因为用户能够清楚地看到页面正在逐步加载,而不是面对一片空白屏幕...

    jquery动态页面加载进度条

    "jquery动态页面加载进度条"就是一种优化用户体验的工具,它通过在页面加载过程中展示一个直观的进度条,让用户知道页面正在加载并估计加载完成的时间,从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...

    网页加载时页面显示进度条加载完成之后显示网页内容

    网页加载时显示进度条是一种常见的用户体验优化策略,它能够提供给用户一个可视化的反馈,让用户知道页面正在加载,并且预计何时可以完成。这种效果通过JavaScript、CSS和HTML结合实现,通常涉及进度条元素的显示与...

    js页面加载进度条

    JavaScript(简称JS)页面加载进度条是一种用户界面交互设计,用于提供可视化的页面加载状态,让用户了解网页内容的加载进度,提升用户体验。这种效果通常在大型应用或包含大量资源的网页中常见,因为它能平息用户的...

    vue页面加载时的进度条功能(实例代码)

    页面加载时显示进度条能够给用户一种应用响应快速的错觉,从而提升整体的用户体验。尤其在页面跳转频繁的场景下,进度条的使用可以极大地缓解用户的等待焦虑感。 2. **nprogress插件介绍**: nprogress是一个非常...

    JS+AS实现真正页面加载图片进度条(带百分比)

    为了改善这种体验,开发者通常会利用JavaScript (JS) 和 ActionScript (AS) 来创建一种视觉反馈机制,即图片加载进度条。这个功能能够实时显示图片加载的进度,通常还会伴有百分比显示,让用户了解加载状态,提升...

    页面加载显示进度条的JSP

    如需引用: &lt;jsp:include page="processbar.jsp"&gt;&lt;/jsp:include&gt;

    jQuery模拟页面加载进度条

    在网页设计中,用户体验是至关重要的,而页面加载进度条能有效地提高用户的感知速度,让用户在等待页面完全加载时有一个可视化的反馈。本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先,jQuery是一款...

    asp.net页面加载前进度条

    在ASP.NET Web应用程序开发中,有时为了提升用户体验,在页面加载过程中显示一个进度条或加载动画是常见的做法。本文将详细介绍如何在ASP.NET应用中实现页面加载前进度条的功能。 #### 一、背景与需求分析 随着Web...

    asp.net页面 加载进度条

    在ASP.NET web应用程序中,创建一个页面加载时显示进度条并待数据加载完成后自动隐藏的交互体验,可以显著提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解页面生命周期。在ASP.NET中,一个网页...

    网站顶部显示预加载进度条插件preload.js

    网站顶部显示预加载进度条插件`preload.js`是一个用于优化用户体验的重要工具,尤其是在现代网页设计中,它能够显著提高用户对网站加载速度的感受。预加载技术是预先加载部分关键资源,如JavaScript、CSS、图片等,...

    JS加载flash进度条

    本文将详细介绍如何使用JavaScript(JS)来实现这样的Flash加载进度条。 首先,理解基本原理。Flash Player在加载SWF文件时,会发送一些关于加载进度的信息,这可以通过Flash的ActionScript接口访问。JavaScript与...

    Js载入文件并显示进度条JSLoader

    在Web开发中,尤其在处理大量异步加载时,这种工具非常有用,因为它可以有效地管理加载顺序,防止阻塞页面渲染,同时还能通过进度条展示加载状态,让用户了解当前的加载进度。 **一、基础原理** 1. **Ajax技术**:...

    JavaScript实现网页加载进度条代码超简单

    但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。 HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取...

    仿微信网页加载进度条

    "仿微信网页加载进度条"是一种模拟微信应用中加载页面时显示的进度指示器,它通常用于显示网页或内容加载的进度,给用户一个可视化的等待反馈,减少用户的焦虑感。在本文中,我们将深入探讨如何实现这样的功能,并...

    javascript 实现页面加载进度条代码

    要实现一个页面加载进度条,我们需要用到JavaScript以及可能的HTML和CSS技术。页面加载进度条是一种常见的用户界面元素,用于向用户展示页面正在加载的过程和剩余时间。这个过程可以通过一个简单的进度条来表示,...

    2款页面预加载动画效果,加载页面时出现圆形进度条,加载后LOGO缩小。兼容主流浏览器

    JavaScript可以实时控制动画的执行,例如根据页面加载进度动态更新进度条的状态。如果使用前端框架,它们通常提供了一套更高级的抽象,使得创建和管理动画变得更加容易。 预加载动画的优化也非常重要。过大或过于...

Global site tag (gtag.js) - Google Analytics