使用CSS3实现加载中动画

来源：互联网发布：软件模块化设计实例编辑：程序博客网时间：2024/05/16 05:57

在用户访问页面的过程中，可能需要请求数据，进行响应。
但是如果在等待数据的过程中不给用户任何提示，用户的感觉是迷茫的，所以我们经常会看到在请求数据的过程中添加一个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 typing{            0%{                background-color: rgba(247,111,73, 1);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,0.2),                             80px 0px 0px 0px rgba(247,111,73,0.2);              }            25%{                 background-color: rgba(247,111,73, 0.4);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,2),                             80px 0px 0px 0px rgba(247,111,73,0.2);            }            75%{ background-color: rgba(247,111,73, 0.4);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,0.2),                             80px 0px 0px 0px rgba(247,111,73,1);              }        }        @-moz-keyframes typing{           0%{                background-color: rgba(247,111,73, 1);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,0.2),                             80px 0px 0px 0px rgba(247,111,73,0.2);              }            25%{                 background-color: rgba(247,111,73, 0.4);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,2),                             80px 0px 0px 0px rgba(247,111,73,0.2);            }            75%{ background-color: rgba(247,111,73, 0.4);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,0.2),                             80px 0px 0px 0px rgba(247,111,73,1);              }        }        @keyframes typing{           0%{                background-color: rgba(247,111,73, 1);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,0.2),                             80px 0px 0px 0px rgba(247,111,73,0.2);              }            25%{                 background-color: rgba(247,111,73, 0.4);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,2),                             80px 0px 0px 0px rgba(247,111,73,0.2);            }            75%{ background-color: rgba(247,111,73, 0.4);                box-shadow: 40px 0px 0px 0px rgba(247,111,73,0.2),                             80px 0px 0px 0px rgba(247,111,73,1);              }        }    </style></head><body><div id="loadingMask">    <div class="typing_loader"></div></div></body></body></html>

0 0