html添加顶部加载进度条,实现网页顶部加载条loading.html

最新推荐文章于 2024-07-30 16:49:50 发布

weixin_39612733

最新推荐文章于 2024-07-30 16:49:50 发布

阅读量1.4k

点赞数

文章标签： html添加顶部加载进度条

本文介绍了如何在HTML网页中添加顶部加载进度条，提供了使用jQuery实现的方法，并指出这种方法在主流浏览器中兼容性良好，但在IE浏览器上可能存在问题。加载进度条有助于提升用户体验，消除等待时的枯燥感。

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

var NexT = window.NexT || {};

var CONFIG = {

root: '/',

scheme: 'Mist',

sidebar: {"position":"left","display":"always","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},

fancybox: true,

tabs: true,

motion: true,

duoshuo: {

userId: '0',

author: '博主'

algolia: {

applicationID: '',

apiKey: '',

indexName: '',

hits: {"per_page":10},

labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}

}

};

实现网页顶部加载条loading | cosyer's Blog

var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?653a4be35cb6c7b26817038a17c3f0d6";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

// scrollbar滚动条样式优化

::-webkit-scrollbar-corner {

background-color: transparent;

}

::-webkit-scrollbar-button {

width: 0;

height: 0;

display: none;

}

::-webkit-scrollbar-thumb {

width: 7px;

background-color: #b4babf;

border-radius: 7px;

}

::-webkit-scrollbar {

width: 7px;

height: 7px;

}

::-webkit-scrollbar-track {

width: 15px;

}

::-webkit-scrollbar:hover {

background-color: transparent;

}

* {

cursor: url("http://cdn.mydearest.cn/blog/images/miku1.png"),auto!important

}

:active {

cursor: url("http://cdn.mydearest.cn/blog/images/miku2.png"),auto!important

}

a:hover {

cursor: url("http://cdn.mydearest.cn/blog/images/miku2.png"),auto!important

}

cosyer's Blog

Blog

12月

更新于

12月15

2018

实现网页顶部加载条loading

发表于

2018-09-10

热度

℃

字数统计：

418 (字)

阅读时长：

2 (分钟)

为什么要加loading的效果

一款好的产品，都需要有一个漂亮的loading界面。lodaing界面不仅能给用户带来良好的体验，而且有效的消除了程序加载等待过程中的枯躁感。loading进度条更是对当前加载进度的一个良好反馈。从0%-100%的加载进度可以有效的告知用户还有多久即可打开页面。带有进度条的loading界面在程序中并不罕见，但是在web中呢？到目前为止浏览器并没有提供有效的浏览器对象来反馈页面的加载进度，所以无法直接、便捷的获得页面加载进度的反馈。

jquery实现

123	<div id="progress"> <span></span> </div>

12345678910111213141516171819202122232425262728293031323334

body{       margin:0;   }   #progress {       position:fixed;       height: 2px;       background:#6bc30d;       transition:opacity 500ms linear   }   #progress.done {       opacity:0   }   #progress span {       position:absolute;       height:2px;