Loading 加载

使用方法

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

                                <img src="/v2.0/dist/images/loading.svg" />
                                <img src="/v2.0/dist/images/loading-white.svg" />
                        

Loading背景

由于loading是svg矢量文件,所以作为背景置入元素中可使用background-size自由缩放大小。

ax.css文件中已经添加了--loadload-w变量,可直接使用background-image: var(--load)作为背景

  •                             <div class="ax-grid ax-split-1 ax-space-md">
                                    <li>
                                        <section style="border:1px solid #ebebeb;padding:100px;background-image: url(dist/images/loading.svg);background-position: center;background-repeat: no-repeat;background-size: 24px 24px;"></section>
                                    </li>
                                    <li>
                                        <section style="border:1px solid #ebebeb;padding:100px;background-image: url(dist/images/loading.svg);background-position: center;background-repeat: no-repeat;background-size: 64px 64px;"></section>
                                    </li>
                                    <li>
                                        <section style="background-color: #333;padding:100px;background-image: url(dist/images/loading-white.svg);background-position: center;background-repeat: no-repeat;background-size: 24px 24px;"></section>
                                    </li>
                                    <li>
                                        <section style="background-color: #333;padding:100px;background-image: url(dist/images/loading-white.svg);background-position: center;background-repeat: no-repeat;background-size: 64px 64px;"></section>
                                    </li>
                                </div>
    
            

    SVG内联动画

    本框架制作了一个默认宽高为18px的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。默认高度是18px,在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>