Wednesday, 19 December 2018

Custom Loading Indicator

Check source code at Github:
https://github.com/Sylvia-YiyinShen/LoadingIndicatorDemo


A customisable loading indicator
  • Modern dots indicator or Rotating indicator
  • Dots indicator: Customisable size, number of dots and dot colour
  • Rotating indicator: Toggle to use an Image or a graphic UIView
  • Rotating indicator: Customisable indicator size, image, rotating speed, direction, colour
3-dots 4-dots dot spinner

How to use
  • Just call showDotsLoadingIndicator, showRotatingImageIndicator or showRotatingDotsIndicator on any view 
  • Modify imageName inside RotatingLoadingIndicator if you want to use your own rotating image
  • Replace RotatingDotsGraphicView in RotatingLoadingIndicator if you have your own graphic UIView

Usage example




How is it implemented

The rotating function is mainly based on CABasicAnimation

Check the list of CABasicAnimation in Apple's documentation: Appendix B  and Appendix C



Draw graphic by code

Check the page Create Dots View by Code, which covers the key calculation and main usage of UIBezierPath CAShapeLayer 



No comments:

Post a Comment