loading buttons ios

A collection of loading buttons and their stylings written in Swift.

404
40
Swift

Loading Buttons

A collection of loading buttons and their styling written in Swift.

Generic badge Generic badge Generic badge Generic badge

You may see the following Medium article for detailed explanation of creating loading buttons.

Light mode Dark mode
Overview Overview Dark

Key Features

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

Requirements

  • Swift 5.0
  • iOS 11.0+

Installation

CocoaPods

LoadingButtons project is available via CocoaPods. To install it, simply add the following line to your Podfile:

$ pod 'MHLoadingButton'

Swift Package Manager

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.

Usage

Declaration

// 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)
}

System Default

btnLoading.indicator = UIActivityIndicatorView()
Light mode Dark mode
System Default System Default Dark

Material Design

btnLoading.indicator = MaterialLoadingIndicator(color: .gray)
Light mode Dark mode
Material Design Material Design Dark

Ball Pulse

btnLoading.indicator = BallPulseSyncIndicator(color: .gray)
Light mode Dark mode
Ball Pulse Ball Pulse Dark

Ball Pulse Sync

btnLoading.indicator = BallSpinFadeIndicator(color: .gray)
Light mode Dark mode
Ball Pulse Sync Ball Pulse Sync Dark

Ball Spin

btnLoading.indicator = LineScalePulseIndicator(color: .gray)
Light mode Dark mode
Ball Spin Ball Spin Dark

Line Scale

btnLoading.indicator = LineScaleIndicator(color: .gray)
Light mode Dark mode
Line Scale Line Scale Dark

Line Scale Pulse

btnLoading.indicator = BallPulseIndicator(color: .gray)
Light mode Dark mode
Line Scale Pulse Line Scale Pulse Dark

Ball Beat

btnLoading.indicator = BallBeatIndicator(color: .gray)
Light mode Dark mode
Ball Beat Ball Beat Dark

Line Spin

btnLoading.indicator = LineSpinFadeLoader(color: .gray)
Light mode Dark mode
Line Spin Line Spin Dark

Credits