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>