Implementing a loading animation for a SwiftUI button is a great way to provide visual feedback to users during asynchronous tasks.

Why Loading Animations Are Awesome: Loading animations aren’t just there to look cool; they’re like your app’s way of saying, “Hang on, I’m busy.” Whether you’re sending something, fetching info, or doing some tech magic, a good loading animation helps you understand that things are happening.

So, as we jump into the world of SwiftUI button loading animations, we’re not trying to be too fancy. We’re just figuring out how to make your app a bit more chatty and friendly. It’s not just about doing a task; it’s about making your app feel like a buddy who’s got your back.

This GitHub repository, introduces the “LoadingButton” project. it sounds like it might be related to creating buttons with loading animations in SwiftUI. Below is example using SwiftUI to create a button with a loading animation:

Simple Loading Animation Button 

SwiftUI button loading Animation

Requirements

  • Xcode 11+
  • SwiftUI
  • iOS 14+
  • macOS 10.15+

Installaion

Swift Package Manager(SPM)

File ➜ Swift Packages ➜ Add Package Dependancy..
.package(url: "https://github.com/Changemin/LoadingButton", from: "1.1.2")

Usage of SwiftUI Button

LoadingButton(action: { }, isLoading: <Binding>Bool, style: LoadingButtonStyle) {
    // View on the button
    // style is optional parameter
  • action : Actions to do when button clicked
  • isLoading : <Binding>Bool type. you can control loading status with this.
  • style(Optional) : Custom style with LoadingButtonStyle

Custom Modifiers

LoadingButtonStyle(width: CGFloat, 
                   height: CGFloat,
                   cornerRadius: CGFloat,
                   backgroundColor: Color,
                   loadingColor: Color,
                   strokeWidth: CGFloat,
                   strokeColor: Color)

// All of the parameter is optional
  • width(Optional) : Width of button
  • height(Optional) : Height of button
  • cornerRadius(Optional) : Corner radius of button
  • backgroundColor(Optional) : Background color of button
  • loadingColor(Optional) : Background color of button when Loading, default is 50% opacity of backgroundColor
  • strokeWidth(Optional) : Circle loading indicator stroke width
  • strokeColor(Optional) : Circle loading indicator stroke Color(default: gray)

Example

Simple Button

import SwiftUI
import LoadingButton

struct ContentView: View {
    @State var isLoading: Bool = false
    
    var body: some View {
        LoadingButton(action: {
            // Your Action here
        }, isLoading: $isLoading) {
            Text("LoadingButton").foregroundColor(Color.white)
        }
    }
}

Result

loading Animation button in swiftui
SwiftUI loading Animation button

Applying Fully Custom Style

import SwiftUI
import LoadingButton

struct ContentView: View {
    @State var isLoading: Bool = false
    var style = LoadingButtonStyle(width: 312,
                              height: 54,
                              cornerRadius: 27,
                              backgroundColor: .orange,
                              loadingColor: Color.orange.opacity(0.5),
                              strokeWidth: 5,
                              strokeColor: .gray)
    
    var body: some View {
        LoadingButton(action: {
            // Your Action here
        }, isLoading: $isLoading, style: style) {
            Text("Styled LoadingButton").foregroundColor(Color.white)
        }
    }
}

Result

button loading Animation in swiftui
SwiftUI button loading Animation

Styling Only Needs

import SwiftUI
import LoadingButton

struct ContentView: View {
    @State var isLoading: Bool = false
    
    var body: some View {
        LoadingButton(action: {
            // Your Action here
        }, isLoading: $isLoading, style: LoadingButtonStyle(cornerRadius: 27, backgroundColor: .orange)) {
            Text("Styled LoadingButton").foregroundColor(Color.white)
        }
    }
}

 TODO

  •  End animation(normal, shake(when fail), expand)
  •  Support gradient background color

Download

SwiftUI Loading Animation Button

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *