A collection of loading buttons and their styling written in Swift.
![Generic badge](https://camo.githubusercontent.com/0a3f8d0b5a7cbfe24df4d9d907a8a558d6b91e9843f45345f47a54324a8b5bc9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d696f732d677265656e2e737667)
You may see the following Medium article for detailed explanation of creating loading buttons.
Light mode |
Dark mode |
![Overview](gif/overview-light.gif) |
![Overview Dark](gif/overview-dark.gif) |
- The example gives you 9 choices of loading indicators with the loading button.
- The IndicatorProtocol clearly defines the functions and properties. You can refer to it and customize your own.
- The LoadingButton class is made to be open, from which you can easily inherit and create your own.
LoadingButtons project is available via CocoaPods. To install it, simply add the following line to your Podfile:
Add LoadingButtons as dependency in your Package.swift
import PackageDescription
let package = Package(
name: "YourPackage",
dependencies: [
.Package(url: "https://github.com/twho/loading-buttons-ios.git", majorVersion: 0),
]
)
If you don't use CocoaPods or Swift Package Manager, you can download the entire project then import all the source files and use them in your project.
// The frame is default to zero. You need to use AutoLayout to resize it.
// Otherwise, you can specify the frame in initializer.
if #available(iOS 13.0, *) {
// This is the new initializer for iOS 13 dark/light mode.
// The syste colors will be used.
btnLoading = LoadingButton(text: "Button", buttonStyle: .outline) // Outlined button
btnLoading = LoadingButton(text: "Button", buttonStyle: .fill) // Filled button
} else {
// Custom color initializer
btnLoading = LoadingButton(text: "Button", textColor: .black, bgColor: .white)
}
btnLoading.indicator = UIActivityIndicatorView()
Light mode |
Dark mode |
![System Default](gif/sysdefault-light.gif) |
![System Default Dark](gif/sysdefault-dark.gif) |
btnLoading.indicator = MaterialLoadingIndicator(color: .gray)
Light mode |
Dark mode |
![Material Design](gif/materialdesign-light.gif) |
![Material Design Dark](gif/materialdesign-dark.gif) |
btnLoading.indicator = BallPulseSyncIndicator(color: .gray)
Light mode |
Dark mode |
![Ball Pulse](gif/ballpulse-light.gif) |
![Ball Pulse Dark](gif/ballpulse-dark.gif) |
btnLoading.indicator = BallSpinFadeIndicator(color: .gray)
Light mode |
Dark mode |
![Ball Pulse Sync](gif/ballpulsesync-light.gif) |
![Ball Pulse Sync Dark](gif/ballpulsesync-dark.gif) |
btnLoading.indicator = LineScalePulseIndicator(color: .gray)
Light mode |
Dark mode |
![Ball Spin](gif/ballspin-light.gif) |
![Ball Spin Dark](gif/ballspin-dark.gif) |
btnLoading.indicator = LineScaleIndicator(color: .gray)
Light mode |
Dark mode |
![Line Scale](gif/linescale-light.gif) |
![Line Scale Dark](gif/linescale-dark.gif) |
btnLoading.indicator = BallPulseIndicator(color: .gray)
Light mode |
Dark mode |
![Line Scale Pulse](gif/linescalepulse-light.gif) |
![Line Scale Pulse Dark](gif/linescalepulse-dark.gif) |
btnLoading.indicator = BallBeatIndicator(color: .gray)
Light mode |
Dark mode |
![Ball Beat](gif/ballbeat-light.gif) |
![Ball Beat Dark](gif/ballbeat-dark.gif) |
btnLoading.indicator = LineSpinFadeLoader(color: .gray)
Light mode |
Dark mode |
![Line Spin](gif/linespin-light.gif) |
![Line Spin Dark](gif/linespin-dark.gif) |