Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sjc-bui/QBIndicatorButton
:heavy_check_mark: Simple way to display activity indicator inside the button.
https://github.com/sjc-bui/QBIndicatorButton
activity-indicator button cocoapods gradient-button indicator-button loading loading-button storyboard swift swift5 uibutton uibutton-extension xcode
Last synced: 3 months ago
JSON representation
:heavy_check_mark: Simple way to display activity indicator inside the button.
- Host: GitHub
- URL: https://github.com/sjc-bui/QBIndicatorButton
- Owner: sjc-bui
- License: mit
- Created: 2021-05-19T06:38:47.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-06-10T08:35:08.000Z (over 3 years ago)
- Last Synced: 2024-07-31T13:43:31.270Z (3 months ago)
- Topics: activity-indicator, button, cocoapods, gradient-button, indicator-button, loading, loading-button, storyboard, swift, swift5, uibutton, uibutton-extension, xcode
- Language: Swift
- Homepage:
- Size: 11.9 MB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ios - QBIndicatorButton - Simple way to display activity indicator inside the button. (Content / Button)
README
# QBIndicatorButton
[](https://www.travis-ci.com/sjc-bui/QBIndicatorButton)
[](https://cocoapods.org/pods/QBIndicatorButton)
[](https://cocoapods.org/pods/QBIndicatorButton)
[](https://cocoapods.org/pods/QBIndicatorButton)
Custom of UIButton in Swift.
## Example
To run the example project, clone the repo, and run `pod install` from the Example directory first.
## Features
- Edit button style from storyboard or code
- Set a gradient background and gradient directions
- Customize the corner radius, border color, border width
- Customize the button animation: scale, scale duration
- Edit the button shadows: color, opacity, offset, radius
- Show, hide activity indicator inside the button
## Requirements
- Swift 5.0
- iOS 11.0+
## Getting started
### Storyboard Setup
Drag and drop `UIButton` into your Storyboard and set its class and module to `QBIndicatorButton`.
Customize your button by setting properties from the Interface Builder.
### Code Setup
```swift
var loadingButton: QBIndicatorButton!
loadingButton = QBIndicatorButton(text: "Tap me",
textColor: UIColor.white,
font: UIFont.systemFont(ofSize: 18, weight: .semibold),
backgroundColor: .systemBlue,
cornerRadius: 4.0)
```
Button touch closure.
```swift
loadingButton.touch({ btn in
// do stuff here
btn.start()
}, for: .touchUpInside)
```
Show loading indicator.
```swift
loadingButton.start()
// or
loadingButton.start {
// do something when start
print("starting...")
}
```
Hide loading indicator.
```swift
loadingButton.stop()
// or
loadingButton.stop {
// do something when stop
print("stopping...")
}
```
## Appearance
Supported appearance properties are:
| Property | Type | Description | Default value |
| --- | --- | --- | --- |
| `animatedScale` | `CGFloat` | Animated scale | `1.0` |
| `animatedScaleDuration` | `Double` | Animated scale duration | `0.2` |
| `borderColor` | `UIColor` | Border color | `UIColor.clear` |
| `borderWidth` | `CGFloat` | Border width | `0.0` |
| `cornerRadius` | `CGFloat` | Corner radius | `4.0` |
| `shadowColor` | `UIColor` | The color of the layer's shadow | `UIColor.clear` |
| `shadowOffset` | `CGSize` | The offset of the layer's shadow | `.zero` |
| `shadowOpacity` | `Float` | The opacity of the layer's shadow | `0.0` |
| `shadowRadius` | `CGFloat` | The blur radius of the layer's shadow | `0.0` |
| `gradientEnabled` | `Bool` | Enable gradient background color | `false` |
| `gradientStartColor` | `UIColor` | Start of color gradient | `UIColor.clear` |
| `gradientEndColor` | `UIColor` | End of color gradient | `UIColor.clear` |
| `gradientDirection` | `Int` | Direction of color gradient `0~7` | `1` |
| `activityIndicatorPosition` | `Int` | Position of activity indicator `0~2` | `1` |
| `titleFadeDuration` | `Double` | Button title fade animated duration | `0.3` |
| `indicatorRotateDuration` (v0.1.7) | `CFTimeInterval` | The activity indicator rotate duration | `1.0` |
| `indicatorStrokeColor` (v0.1.7) | `UIColor` | Custom color of activity indicator | `.white` |
| `indicatorStrokeWidth` (v0.1.7) | `CGFloat` | Stroke width of activity indicator | `3.0` |
`QBIndicatorButton` also supported round every single corner of the button.
```swift
// round topLeft and topRight corner only
loadingButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)
// or
// round all corner
loadingButton.roundCorners(corners: [.allCorners], radius: 20)
```
Predefined positions of activity indicator.
```swift
public enum IndicatorPosition: Int {
case left = 0
case center = 1
case right = 2
}
```
Predefined directions for color gradient.
```swift
public enum GradientDirection: Int {
case toTop = 0
case toRight = 1
case toBottom = 2
case toLeft = 3
case toTopRight = 4
case toTopLeft = 5
case toBottomRight = 6
case toBottomLeft = 7
}
```
## Installation
QBIndicatorButton is available through [CocoaPods](https://cocoapods.org). To install
it, simply add the following line to your Podfile:
```ruby
pod 'QBIndicatorButton'
```
## Contributing
- If you **found a bug**, open an issue.
- If you **have a feature request**, open an issue.
- If you **need help**, open an issue.
- If you **want to contribute**, submit a pull request.
## MIT License
QBIndicatorButton is available under the MIT license. See the LICENSE file for more info.
Made with :heart: by [sjc-bui](https://github.com/sjc-bui).