我们经常在浏览网页的时候会看到数据在加载时,出现的loading提示。其实这个功能原理是很简单的,就是一个div遮盖当前页面,然后loading就在遮盖div层上展示出来,现在我们来动手实现一下。
1.当前页面:
复制代码 代码如下:
loading
2.遮罩层:
复制代码 代码如下:
3.loading展示层:
复制代码 代码如下:
整体代码:
复制代码 代码如下:
loading
最终效果:
在网上还看到另外一种实现方式,感觉思路不错,就是利用js不断的改变html标签的value值,达到加载提示的效果,根据他的思路我自己实现了下,代码如下:
复制代码 代码如下:
最终效果: