g-loading

Introduction

The loading component uses CSS3 animations in Chrome and gifs in IE8.

Usage Scenarios

• When a part of the page is waiting for asynchronous data or is in the rendering process, an appropriate loading animation can effectively alleviate user anxiety.
• If a loading animation needs to be added to the entire page, as well as to specific parts of the page.
• If support for multiple sizes of loading animations is needed to fit different container sizes.

Dependencies

None.

Usage Guidelines

import loading from 'g-loading';

// Three sizes
loading()		// 40x40
loading.small()		// 24x24
loading.large()		// 60x60

// Optional parameters
loading(ele)
loading(ele, 'Loading...')
loading('Loading...')

loading() is equivalent to loading(document.body, 'Loading...')

loading(ele) is equivalent to loading(ele, 'Loading...')

loading('Waiting...') is equivalent to loading(document.body, 'Waiting...')

loading() returns hide method

let hide = loading()
...
// After a period of time
hide()

Each instance is destroyed independently and does not interfere with each other.

Constraints

• If ele is not set, loading will be rendered on the body by default.
• If ele is not body, its position property cannot be static, meaning it must be relatively or absolutely positioned.
• If ele is not body, it must be a div or span.
• In IE8, the parent selector needs to match .ie8, it is recommended to set the class="ie8" directly on the html element.