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文件中已经添加了--load和load-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>