A small and flexible (well documented) UIButton subclass with animated loading progress, and completion animation.

Overview

ButtonProgressBar-iOS

Version License Platform Contact

GIF Preview

Example

  • For LIVE PREVIEW on Appetize in your browser itself, click here.

  • To run the example project, clone the repo, and run pod install from the Example directory first.

Simulator Screen           GIF Preview

Requirements

iOS > 7.0

Installation

ButtonProgressBar-iOS is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'ButtonProgressBar-iOS'

Usage

import ButtonProgressBar_iOS

Initialize just like you would any other UIButton:

var progressButton = ButtonProgressBar(frame: CGRect)
view.addSubview(progressButton)

Since this is a UIButton subclass, targets and labels can be set in the same way:

progressButton.addTarget(nil, action: #selector(self.tapped), for: .touchUpInside)
progressButton.setTitle("Download", for: .normal)

The completion image can be set with;

This image must be set since no default exists.

  setCompletionImage(image: UIImage)

Indeterminate loading can be handled with the following functions:

startIndeterminate(withTimePeriod time: TimeInterval)
startIndeterminate(withTimePeriod time: TimeInterval, andTimePadding padding: TimeInterval)

/*
Time Padding is the duration (default 0.5), in seconds, before starting the next cycle.
Time Period is the total time (animation + padding) that 1 cycle of the loading takes.
*/

stopIndeterminate()  //Stops the indeterminate loading.

For determinate usage or otherwise, progress can be set with:

setProgress(progress: CGFloat, _ animated: Bool) 
/*
Progress ranges from 0.0 to 1.0

If animated is true, linearly animates to progress.
*/

resetProgress()  //Set progress to 0.0 unanimated.

Set the progress and background colors:

setBackgroundColor(color: UIColor)
setProgressColor(color: UIColor)

To explicitly show/hide the title / image:

hideTitle(_ hidden: Bool)
hideImage(_ hidden: Bool)

Stop indeterminate loading if active, set progress to 1.0 animated, and display completion image if set.

 Needs to be called explicitly when loading determinate as well.
  triggerCompletion()

Author

Pushkar Sharma, [email protected]


Inspiration from Dribbble

Android version available!

License

ButtonProgressBar-iOS is available under the MIT license. See the LICENSE file for more info.

You might also like...
Customizable download button with progress and transition animations. It is based on Apple's App Store download button.
Customizable download button with progress and transition animations. It is based on Apple's App Store download button.

AHDownloadButton is a customizable download button similar to the download button in the latest version of Apple's App Store app (since iOS 11). It fe

Inspired by Apple’s download progress buttons in the app store
Inspired by Apple’s download progress buttons in the app store

GBKUIButtonProgressView Inspired by Apple’s download progress buttons in the app store Created by @pklada and @miketsprague Checkout the blog post. In

ProgressButton - Custom button class that displays a progress bar around it to gauge
ProgressButton - Custom button class that displays a progress bar around it to gauge

ProgressButton Check it out To run the example project, clone the repo, and open the 'Example/Example.xcodeproj' file. Requirements This component is

Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation.
Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation.

AnimatablePlayButton Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation. features Only using CAShapeLayer, CAKeyframe

Interactive and fully animated Material Design button for iOS developers.
Interactive and fully animated Material Design button for iOS developers.

WYMaterialButton Inspired by Google Material Design, written purely in Swift 3. WYMaterialButton implemented Material Design on iOS and add more dynam

Cute Animated Button written in Swift.
Cute Animated Button written in Swift.

DOFavoriteButton Cute Animated Button written in Swift. It could be just right for favorite buttons! Requirements iOS 7.0+ Swift 1.2 Installation Cart

Animated Social share buttons control for iOS written in Swift
Animated Social share buttons control for iOS written in Swift

SwiftShareBubbles Animated Social share buttons control for iOS written in Swift. This library is inspired AAShareBubbles. I tried AAShareBubbles with

Yet another animated flat buttons in Swift
Yet another animated flat buttons in Swift

DynamicButton is a powerful flat design button written in Swift to display hamburger button like with animated transitions between style updates. It a

IGStoryButtonKit provides an easy-to-use button with rich animation and multiple way inspired by instagram story/stories.
IGStoryButtonKit provides an easy-to-use button with rich animation and multiple way inspired by instagram story/stories.

Introduction Have you ever seen UI like instagram story, haven't you? Actually, features like instagram story have been implemented in many applicatio

Comments
  • Swift 4 support?

    Swift 4 support?

    Hi @thePsguy, thanks for the cool library. I am having an issue with the last released source.

    I believe it's the right time to update it for the latest Swift?

    Argument of '#selector' refers to instance method 'animateIndeterminate(sender:)' that is not exposed to Objective-C

    screen shot 2018-02-08 at 10 39 55 am
    opened by hemangshah 3
  • update to Swift 5

    update to Swift 5

    • [x] update to Swift 5
    • [x] adapter for xcode 12
    • [x] upper to 9.0
    • [x] remove the .swift-version file which is now deprecated and only use the swift_versions attribute within the podspec.
    opened by ShenYj 0
  • Buggy animation

    Buggy animation

        func loadDeterminate() {
            self.progressButton.stopIndeterminate()
            self.progressButton.resetProgress()
            let timer = Timer.scheduledTimer(timeInterval: 1,
                                             target: self,
                                             selector: #selector(self.animateDeterminate),
                                             userInfo: time,
                                             repeats: true)
            RunLoop.current.add(timer, forMode: .defaultRunLoopMode)
        }
        
        @objc func animateDeterminate(sender: Timer) {
            if self.progressButton.progress >= 1.0 {
                sender.invalidate()
            }
            else {
                self.progressButton.setProgress(progress: self.progressButton.progress + CGFloat(0.1), false)
            }
        }
    

    I need to update the button rarely. So I replaced some numbers in your example, ran it on iphone 5s simulator, choose "determinate" and clicked this buttom: 1)timer's step is 0.1, its value is changed from 0 to 1. So why does it show 8 steps instead of 10? 2)if you do some clicks on button (or other clickable elements) - animation is changed unpredictably

    opened by gerchicov-bp 0
Releases(1.0.1)
Owner
Pushkar Sharma
LinkedIn, Github, Twitter, Instagram, Facebook: @thePsguy
Pushkar Sharma
A fully customisable swift subclass on UIButton which allows you to create beautiful buttons without writing any line of code.

JSButton Demo $ pod try JSButton ...or clone this repo and build and run/test the JSButton project in Xcode to see JSButton in action. If you don't ha

Jogendra 12 May 9, 2022
UIButton-based view with fade in/out animation features

JTFadingInfoView Overview JTFadingInfoView is google's material design like notification view with smooth fade in/out animation features, based on UIB

Junichi Tsurukawa 129 Mar 19, 2022
Custom loading button with progress swiftui

CustomLoadingButton Simple Custom Loading Progress Button for SwiftUI Version 1.0.0 This version requires Xcode 11+ SwiftUI iOS 13+ macOS 10.15+ Insta

Tariqul 1 Dec 14, 2022
A Custom UIButton with Centralised Styling and common styles available in Interface Builder

DesignableButton DesignableButton is a UIButton subclass that uses a centralised and reusable styling. In InterfaceBuilder, drag and drop a Designable

Idle Hands Apps 93 Aug 14, 2022
Multiple state tap-to-toggle UIButton (like old camera flash button)

Multiple State Toggle UIButton A UIButton subclass that implements tap-to-toggle button text. (Like the camera flash and timer buttons) Usage Just cre

Yonat Sharon 83 Oct 11, 2022
🔥 PMSuperButton is a powerful UIButton coming from the countryside, but with super powers! 😎

PMSuperButton is a powerful UIButton coming from the countryside, but with super powers! ?? An easy way to create custom and complex buttons with cust

Paolo Musolino 720 Nov 17, 2022
Custom UIButton effect inspired by Google Material Design

ZFRippleButton iOS Custom UIButton effect inspired by Google Material Design written in Swift Usage Set the UIButton class in Nib to ZFRippleButton or

Amornchai Kanokpullwad 1.4k Dec 1, 2022
Full-featured IBDesignable UIButton class

SpicyButton Full-featured IBDesignable UIButton class Installation Add the following to your project's Podfile: pod 'SpicyButton' Usage You can easily

Luke Crum 2 Sep 6, 2022
A fully customisable subclass of the native UIControl which allows you to create beautiful buttons without writing any line of code.

A fully customisable subclass of the native UIControl which allows you to create beautiful buttons without writing any line of code. Preview You'll be

Lorenzo Greco 2.3k Dec 31, 2022
TTopImageBottomLabelButton is a simple and flexible UI component fully written in Swift

TTopImageBottomLabelButton is a simple and flexible UI component fully written in Swift. TTopImageBottomLabelButton is developed to help programmers create a button with top image and bottom title quickly without having to write many lines of codes.

Nguyen Duc Thinh 2 Aug 18, 2022