silver-new-loading

new-loading

silver-new-loading

Features

• 样式示例：

demo

https://g.alicdn.com/silvermine/new-loading/1.0.1/demo/index.html

Installation

• npm install silver-new-loading

Usage

• script 标签引入
  • <script src="https://g.alicdn.com/silvermine/new-loading/{version}/index.min.js"></script>
• import or require
  • 首先，npm install silver-new-loading
  • import loading from 'silver-new-loading' 或者
    const loading = require('silver-new-loading')

jsdoc 接口页面

• https://g.alicdn.com/silvermine/new-loading/1.0.1/doc/NewLoading.html

API

• new window.Loading(opts)

  example:

    /**
    * constructor 构造函数
    * @memberOf NewLoading.prototype
    * @param cfg {Object} 配置参数
    *   @param container     {String}  loading元素容器  默认为body
    *   @param showBlock     {Boolean} 加载动画是否需要显示 true|false  默认为true
    *   @param showText      {Boolean} 加载文字是否需要显示 true|false  默认为true
    *   @param loadingSize   {Number}  loading 图标的尺寸，长宽相等，默认180px（1080p分辨率下）
    *   @param degStep       {Number}  每帧转动的角度, 默认为 8
    *   @param defaultShow   {Boolean} 是否在创建时即显示loading，默认为 true
    */
    	
    var loading = new window.Loading({
    	'defaultShow': false
    });
  

• show()

  example:

    loading.show();
  

• hide()

  example:

    loading.hide();
  

• setBg()
  设置背景颜色

  example:

    loading.setBg('#ff0000');
  

• setMessage1()
  设置消息1

  example:

    loading.setMessage1('58%');
  

• setMessage2()
  设置消息2

  example:

    loading.setMessage2('下载速度：246.62 KB/S');
  

• remove()
  删除loading节点

  example:

    loading.remove();
  

• resize(scale)
  重新设置 loading 尺寸, scale 为缩放倍数，当不传scale时，将根据loading父容器大小自动缩放。一般在loading父容器尺寸变化时调用此方法，例如视频在小窗口和全屏播放切换时。

  example:

    loading.resize();
  

Tests

• see demo folder