在用户访问页面的过程中,可能需要请求数据,进行响应。
但是如果在等待数据的过程中不给用户任何提示,用户的感觉是迷茫的,所以我们经常会看到在请求数据的过程中添加一个loading的gif图片。
随着技术的发展,我们希望用简单的代码就能实现这个功能,同时解决由于GIF图片带来的锯齿的问题。
最近tity在做日本换乘APP内嵌h5页面的时候就遇到了这样的问题。
最终实现在请求数据时的效果:
代码为:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>加载中动画</title>
<style type="text/css">
.typing_loader{
width: 20px;
height: 20px;
border-radius: 50%;
-webkit-animation: typing 1s linear infinite alternate;
-moz-animation: Typing 1s linear infinite alternate;
animation: typing 1s linear infinite alternate;
margin: 46px auto; /* Not necessary- its only for layouting*/
position: relative;
left: -40px;
}
@-webkit-keyframes typin