SSSwiftUISpinnerButton

SSSwiftUISpinnerButton is an open-source library in SwiftUI to add different spinning animation to button.

Features!

• Various spinner animation styles
• Rounded button on spinning animation

Requirements

• iOS 13.0+
• Xcode 11+

Installation

CocoaPods

• You can use CocoaPods to install SSSwiftUISpinnerButton by adding it to your Podfile:

   use_frameworks!
   pod 'SSSwiftUISpinnerButton'
  

• Import SSSwiftUISpinnerButton in your file:

   import SSSwiftUISpinnerButton
  

Manually

• Download and drop SSSwiftUISpinnerButton/Sources folder in your project.
• Congratulations!

Swift Package Manager

• When using Xcode 11 or later, you can install SSSwiftUISpinnerButton by going to your Project settings > Swift Packages and add the repository by providing the GitHub URL. Alternatively, you can go to File > Swift Packages > Add Package Dependencies...

   dependencies: [
       .package(url: "https://github.com/mobile-simformsolutions/SSSwiftUISpinnerButton.git", from: "1.0.0")
   ]
  

Usage Examples

Add Spinner Button

• Add state variable to manage spinner button start and stop animation

  @State var isSpinnerButtonAnimating: Bool = false
  

• Add Spinner button:

  SpinnerButton(buttonAction: {
           // Your button action code here
       }, isAnimating: $isSpinnerButtonAnimating, builder: {
           // Add any view or content in button if required
           HStack {
                 Text("Save")
                   .foregroundColor(.white)
           }
       }
   )
  

Start Animation

• Animation will start as soon as you will tap on the button (isSpinnerButtonAnimating state variable will be set true).

Stop Animation

• To stop the spinner button animation, simply toggle the state variable isSpinnerButtonAnimating value.

  isSpinnerButtonAnimating.toggle()
  

Spinner button animation style

• You can select from different animation styles

• Every animation style has properties such as count, size, etc which can be modified.

  SpinnerButton(buttonAction: {
           /// Action to perform
     }, isAnimating: $isSpinnerButtonAnimating, 
        animationType: SpinnerButtonAnimationStyle.lineSpinFade(count: 8, width: 0)) {
             /// Add content in button
     }
  

Spinner button customisation

• You can modify view of the spinner button using SpinnerButtonViewStyle

• Initialise variable with type SpinnerButtonViewStyle to design button:

  private var buttonStyleWithBasicDesign: SpinnerButtonViewStyle = SpinnerButtonViewStyle(
        width: 300, 
        height: 50, 
        cornerRadius: 5, 
        backgroundColor: .black, 
        spinningButtonBackgroundColor: .black, 
        spinningStrokeColor: .white
  )
  

• Assign it to buttonstyle:

  SpinnerButton(buttonAction: {
          /// Action to perform
     }, isAnimating: $isSpinnerButtonAnimating, 
        buttonStyle: buttonStyleWithBasicDesign,
        animationType: SpinnerButtonAnimationStyle.lineSpinFade(count: 8, width: 0)) {
          /// Add content in button
     }
  

Swift Library:

• Check out our Swift Library for Spinner Button - SSSpinnerButton

Meta

• Distributed under the MIT license. See LICENSE for more information.

Inspired By:

• Spinner animations inspired from iActivityIndicator