A practical loading plugin
loading
A loading plugin compatible with mobile devices, PCs, and IE10 and above.
direction
Direction: column for vertical, row for horizontal.
animateIn
Entry animation type. No need to include animatecss here (because I personally think loading effects don't need to be too fancy. The default is fadeInNoTransform; other settings will not produce any animation effects).
title
If the loading title is an empty string (''), it will not be displayed.
titleColor
Title text color.
name
Loading name. This serves as the unique identifier. A loading instance with a duplicate name will not be created again, so you must specify a name attribute each time.
type
Loading display style: rotating small balls (origin) or an image (pic).
discription
If the loading description is an empty string (''), it will not be displayed.
discColor
Loading description color.
loadingWidth
Default: 260. Loading width.
loadingBg
Default: 'rgba(0, 0, 0, 0.6)'. Loading background color.
borderRadius
Default: 12. Loading border radius.
loadingMaskBg
Default: transparent. Background color of the loading overlay.
zIndex
Default: 1000001. Loading z-index.
Circular rotating loading style (origin)
originDivWidth
Default: 60. Width of the inner circular loading area.
originDivHeight
Default: 60. Height of the inner circular loading area.
originWidth
Default: 8. Width of the small balls.
originHeight
Default: 8. Height of the small balls.
originBg
Default: '#fefefe'. Background color of the small balls.
smallLoading
Default: false. Whether to display an additional effect with smaller rotating balls.
Image-based loading style (pic)
imgSrc
Default image URL.
imgDivWidth
Default: 80. Image width.
imgDivHeight
Default: 80. Image height.
flexCenter
Default: false. Whether to use flex layout to center the loading-div both vertically and horizontally.
flexDirection
Default: 'row'. Flex direction: row for horizontal and column for vertical.
mustRelative
Default: false. Whether to set the loading element's position to relative.