Loading 加载

使用方法

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

                                <img src="https://src.axui.cn/v2.0/dist/images/loading.gif" />
                                <img src="https://src.axui.cn/v2.0/dist/images/loading.svg" />
                                <img src="https://src.axui.cn/v2.0/dist/images/loading-white.svg" />
                        
IE和Edge浏览器不支持SVG内置动画,如果想保持兼容请选用gif动画。

Loading背景

本框架已经将三个加载图片转成了base64格式的文本置入了ax.css文件当中,所以调用这三个图片也可以样式背景的方式调用:style="background-image:var(--load-svg)"

  • loading.gif:使用var(--load-gif)
  • loading.svg:使用var(--load-svg)
  • loading-white.svg:使用var(--load-svg-w)
                            <div class="ax-grid ax-split-1 ax-space-md">
                                <ul class="ax-grid-inner">
                                    <li class="ax-grid-block ax-col-12">
                                        <section style="border:1px solid #ebebeb;padding:100px;background-image: var(--load-gif);background-position: center;background-repeat: no-repeat;"></section>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <section style="border:1px solid #ebebeb;padding:100px;background-image: var(--load-svg);background-position: center;background-repeat: no-repeat;"></section>
                                    </li>
                                </ul>
                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-grid ax-split-1 ax-space-md">
                                <ul class="ax-grid-inner">
                                    <li class="ax-grid-block ax-col-12">
                                        <section style="border:1px solid #ebebeb;padding:100px;background-image: var(--load-svg);background-position: center;background-repeat: no-repeat;background-size: 24px 24px;"></section>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <section style="border:1px solid #ebebeb;padding:100px;background-image: var(--load-svg);background-position: center;background-repeat: no-repeat;background-size: 64px 64px;"></section>
                                    </li>
                                </ul>
                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-grid ax-split-1 ax-space-md">
                                <ul class="ax-grid-inner">
                                    <li class="ax-grid-block ax-col-12">
                                        <section style="background-color: #333;padding:100px;background-image: var(--load-svg-w);background-position: center;background-repeat: no-repeat;background-size: 24px 24px;"></section>
                                    </li>
                                    <li class="ax-grid-block ax-col-12">
                                        <section style="background-color: #333;padding:100px;background-image: var(--load-svg-w);background-position: center;background-repeat: no-repeat;background-size: 64px 64px;"></section>
                                    </li>
                                </ul>
                            </div>

        

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>