1.0.0 • Published 7 months ago

g-loading v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
7 months ago

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.
1.0.0

7 months ago