加载中三个点点动态出现

js定时器方法

//html
<div>加载中<span id="dot"></span></div>//js
<script>let dotting = function () {let dom = document.getElementById('dot');let html = dom.innerHTML;if(html.length >= 3){dom.innerHTML = ''} else {dom.innerHTML = html + '.'}}setInterval(dotting, 800)</script>

方法都来自于网上其他博客　　

css3 anminate方法　　

方法1:

//html
<div>加载中<span id="dot">...</span></div>//css
<style>　　
#dot {display: inline-block;width: 1.5em;vertical-align: bottom;overflow: hidden;animation: dotting 3s infinite step-start;
}
@keyframes dotting{0% { width: 0; margin-right: 1.5em; }33% { width: .5em; margin-right: 1em; }66% { width: 1em; margin-right: .5em; }100% { width: 1.5em; margin-right: 0;}
}
</style>

方法2:　　这个方法的好处是可以方便的设置大小

//html
<div>加载中<span id="dot"></span></div>
//css
<style>
#dot{height: 4px;width: 4px;display: inline-block;border-radius: 2px;animation: dotting 2.4s  infinite step-start;
}
@keyframes dotting {25%{box-shadow: 4px 0 0 #000;}50%{box-shadow: 4px 0 0 #000000 ,14px 0 0 #000;}75%{box-shadow: 4px 0 0 #000 ,14px 0 0 #000, 24px 0 0 #000;}
}
</style>

还有其他很多种方法啦，效果出来就行　

转载于:https://www.cnblogs.com/Anne3/p/10954609.html

加载中三个点点动态出现相关推荐

elementui 加载中_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
CSS实现动态正在加载中...字
HTML代码正在加载中<dot>...</dot> CSS代码 dot {display: inline-block; height: 1em;line-height: 1; ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...
最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示. JQuery版本:1.7.1: 编写一 ...
【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)...
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息] ...
activity中fragment 返回键不退出_优雅地处理加载中(loading)，重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...
angularjs 让当前路由重新加载_Spring Cloud Gateway的动态路由怎样做？集成Nacos实现很简单...
一.说明网关的核心概念就是路由配置和路由规则,而作为所有请求流量的入口,在实际生产环境中为了保证高可靠和高可用,是尽量要避免重启的,所以实现动态路由是非常有必要的:本文主要介绍 Spring Clo ...
微信小程序两种loading加载中显示方式
在微信开发中,为了用户更加友好的体验,一般在数据请求的时候就显示动态加载中的显示字样,表示数据正在加载,用户请耐心等待. 一般有两种显示方式(其实是三种,showToast和showLoading写法 ...

加载中三个点点动态出现

加载中三个点点动态出现相关推荐

最新文章

热门文章