loading组件

loading组件，动画css3实现，对Loaders.css轻量级的封装

速查表

安装

yarn add cl-loading

或

npm i cl-loading

React组件

React组件有默认导出，所以组件名字任意，以下代码作为示例

// 导入
import Loading from 'cl-loading';
//导入所有样式
import 'cl-loading/lib/css/index.css';
//或者导入指定类型的样式
import 'cl-loading/lib/css/animations/ball-spin-fade-loader.css';

// 使用 通过active属性控制显示和隐藏
<Loading active={true} tip="我的加载组件" />

// 使用 通过show或者hide方法控制显示或者隐藏
<Loading ref={loading=>{window.loading = loading}} tip="我的加载组件" />
loading.show();
loading.hide();

Vue组件

// 导入
import Loading from 'cl-loading/lib/vue/index.vue';
//导入所有样式
import 'cl-loading/lib/css/index.css';
//或者导入指定类型的样式
import 'cl-loading/lib/css/animations/ball-spin-fade-loader.css';

//注册组件
Vue.component(Loading.name, Loading);

// 使用 
<cl-loading tip="我的加载组件" />
//可以通过v-if 或者 v-show 控制组件显示和隐藏

属性说明

属性 | 值 ---|--- type | 可选；字符串； tip | 可选；字符串； fixed | 可选；布尔值； active | 可选；布尔值；（仅为react组件属性） innerClassName | 可选；字符串；

• type: loading 样式，具体查看速查表，默认样式ball-spin-fade-loader
• tip: loading提示语，例如加载中...，建议8个字以内，超出隐藏;
• fixed: 表示loading是否fix在页面中间。默认true
• active: 表示loading是否显示,默认false。也可以调用react对象的show和hide方法来显示和影藏loading （仅为react组件属性）
• innerClassName: loading样式，可以通过该类修改默认样式

提示: 你可以通过transform修改loading大小.