LoadingButton – Simple Loading Animation Button for SwiftUI
  • July 2, 2025

Simple Loading Animation Button for SwiftUI

📹 Preview

 

🏁 Getting Started


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


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

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

 

💅🏻 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)
}
}
}

Same Result

 

✅ TODO


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

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

GitHub


View Github

#animation #button #loading #swift
YOU MIGHT ALSO LIKE...
🧭 NavigationKit

NavigationKit is a lightweight library which makes SwiftUI navigation super easy to use. 💻 Installation 📦 Swift Package Manager Using Swift Package Manager, add ...

swiftui-navigation-stack

An alternative SwiftUI NavigationView implementing classic stack-based navigation giving also some more control on animations and programmatic navigation. NavigationStack Installation ...

Stinsen

Simple, powerful and elegant implementation of the Coordinator pattern in SwiftUI. Stinsen is written using 100% SwiftUI which makes it ...

SwiftUI Router

With SwiftUI Router you can power your SwiftUI app with path-based routing. By utilizing a path-based system, navigation in your app becomes ...

FlowStacks

This package takes SwiftUI's familiar and powerful NavigationStack API and gives it superpowers, allowing you to use the same API not just ...