1.0.0 • Published 7 months ago
g-loading v1.0.0
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 thebody
by default. - If
ele
is notbody
, itsposition
property cannot be static, meaning it must be relatively or absolutely positioned. - If
ele
is notbody
, it must be adiv
orspan
. - In IE8, the parent selector needs to match
.ie8
, it is recommended to set theclass="ie8"
directly on thehtml
element.
1.0.0
7 months ago