SSSwiftUISpinnerButton is a collection of various spinning animations for buttons in SwiftUI.
SSSwiftUISpinnerButton is an open-source library in SwiftUI to add different spinning animation to button.
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
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")
]
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
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
}