Loading 加载

使用方法

本框架内置三张loading图：src/images/loading.gif、src/images/loading.svg和src/images/loading-white.svg，可以作为背景使用，也可以作为行内图片使用，用户可根据需要自主选择使用。loading.svg可自由编辑长宽和颜色，推荐使用。更多loading图请用户自行从网络收集。

                                <img src="src/images/loading.gif" />
                                <img src="src/images/loading.svg" />
                                <img src="src/images/loading-white.svg" />

IE和Edge浏览器不支持SVG内置动画，如果想保持兼容请选用gif动画。

Loading背景

这两个loading背景图自然可以作为background-image用在区块里。深色背景请使用src/images/loading-white.svg。

SVG内联动画

本框架制作了一个默认宽高为28的svg内联动画形式的loading效果，通过把宽高写入style可自定义loading的大小。白色背景和深色背景均适用。

                                                <span class="ax-loading" style="width:14px;height:14px;"><svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" /></svg></span>
                                                <span class="ax-loading"><svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" /></svg></span>
                                                <span class="ax-loading" style="width:38px;height:38px;"><svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" /></svg></span>
                                                <span class="ax-loading" style="width:60px;height:60px;"><svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" /></svg>

CSS3动画

本框架使用纯CSS3制作了loading效果，白底状态下使用ax-loading，深色底使用ax-loading ax-white。默认高度是28px，在style中写入高度宽度可自定义大小。

                                                <span class="ax-loading" style="width:14px;height:14px;"><i></i></span>
                                                <span class="ax-loading"><i></i></span>
                                                <span class="ax-loading" style="width:38px;height:38px;"><i></i></span>
                                                <span class="ax-loading" style="width:60px;height:60px;"><i></i></span>

                                                <span class="ax-loading ax-white" style="width:14px;height:14px;"><i></i></span>
                                                <span class="ax-loading ax-white"><i></i></span>
                                                <span class="ax-loading ax-white" style="width:38px;height:38px;"><i></i></span>
                                                <span class="ax-loading ax-white" style="width:60px;height:60px;"><i></i></span>

打点加载

最简单的方法是给文本添加ax-waiting类，即可实现打点加载效果。

加载中

                        <span class="ax-waiting">加载中</span>
                        <div class="ax-break"></div>
                        <button class="ax-btn" type="button"><i class="ax-waiting">加载中</i></button>