⭕️ Ring progress view similar to Activity app on Apple Watch

Overview

MKRingProgressView

Language Platform License Version Carthage compatible SPM compatible

Ring progress view similar to Activity app on Apple Watch

MKRingProgressView

Features

  • Progress animation
  • Customizable start/end and backdrop ring colors
  • Customizable ring width
  • Customizable progress line end style
  • Customizable shadow under progress line end
  • Progress values above 100% (or 360°) can also be displayed

Installation

CocoaPods

To install MKRingProgressView via CocoaPods, add the following line to your Podfile:

pod 'MKRingProgressView'

Carthage

To install MKRingProgressView via Carthage, add the following line to your Cartfile:

github "maxkonovalov/MKRingProgressView"

Swift Package Manager

Note: Instructions below are for using SwiftPM without the Xcode UI. It's the easiest to go to your Project Settings -> Swift Packages and add MKRingProgressView from there.

To integrate using Apple's Swift package manager, without Xcode integration, add the following as a dependency to your Package.swift:

.package(url: "https://github.com/maxkonovalov/MKRingProgressView.git", .upToNextMajor(from: "2.3.0"))

Usage

See the example Xcode project. It contains 2 targets:

  • ProgressRingExample - a simple example containing a single progress ring with adjustable parameters.
  • ActivityRingsExample - an advanced usage example replicating Activity app by Apple. It also contains additional classes for convenient grouping of 3 ring progress views together.

Interface Builder

MKRingProgressView can be set up in Interface Builder. To use it, set the custom view class to MKRingProgressView. Most of the control's parameters can be customized in Interface Builder.

Code

let ringProgressView = RingProgressView(frame: CGRect(x: 0, y: 100, width: 100, height: 100))
ringProgressView.startColor = .red
ringProgressView.endColor = .magenta
ringProgressView.ringWidth = 25
ringProgressView.progress = 0.0
view.addSubview(ringProgressView)

The progress value can be animated the same way you would normally animate any property using UIView's block-based animations:

UIView.animate(withDuration: 0.5) {
    ringProgressView.progress = 1.0
}

Performance

To achieve better performance the following options are possible:

  • Set gradientImageScale to lower values like 0.5 (defaults to 1.0)
  • Set startColor and endColor to the same value
  • Set shadowOpacity to 0.0
  • Set allowsAntialiasing to false

Requirements

  • iOS 9.0
  • tvOS 9.0

License

MKRingProgressView is available under the MIT license. See the LICENSE file for more info.

Comments
  • SpriteKit port

    SpriteKit port

    Hi there,

    I’ve been using this repo for a while now and am really liking it. You did a really good job with it! I ported it to SpriteKit over the last week, and was about to PR it when I had some thoughts.

    The most important change is that it’s written in SpriteKit, which means that users would have to import that framework as well, adding to their app’s binary size. SpriteKit will be way more “expensive”, storage-wise, than this framework, which might be problematic especially given cellular download limits.

    Users of a mature framework might not be okay with having to add SpriteKit in order to continue to use new versions, which is why I’m posting this as an issue instead of directly PRing.

    I’m happy to open a PR so that the existing implementation can be replaced with my SpriteKit port, or I can upload it as a new project (crediting you as the original creator, of course), depending on whichever way you’d like to go with this.

    Please let me know how you’d like to proceed. Thanks for making this!

    opened by HarshilShah 10
  • Animation not working

    Animation not working

    I currently have the progress view in a table view cell. The progress value sets correctly, but there is no animation, despite using UIView.animate. Other animations work fine. It seems that upon reloading the cell, animation works correctly.

    opened by harish-kamath 9
  • Library crashes when example is run with release build configuration (Xcode 11.4)

    Library crashes when example is run with release build configuration (Xcode 11.4)

    I was seeing this issue as well with my app, but have now found an easy way to reproduce:

    1. Check that you have the latest Xcode version, which currently is 11.4, earlier versions are fine
    2. Download sample project
    3. Edit the scheme ProgressRingExample to use the "release" build configuration (see screenshot)
    4. Connect an iPhone to your computer and select that device to run the app on

    This will result in a crash: GradientGenerator.swift line 113: let img = ctx.makeImage()!

    Screen Shot 2020-04-06 at 16 26 07
    opened by pepejeria 8
  • Animating with UIViewPropertyAnimator

    Animating with UIViewPropertyAnimator

    I am trying to animate the .progress property witch works wonderful within a UIView.animate block. I want to have control over the animation progress though, so I put it within a UIViewPropertyAnimator (so I can manipulate the animator.fractionComplete property). This doesn't seem to work. Is there something special to keep in mind for animating the RingProgressView?

    opened by frogg 7
  • Added possibility to hide progress ring shadow, if progress is 0.0.

    Added possibility to hide progress ring shadow, if progress is 0.0.

    I would like to have the possibility not to show a single "dot" if progess is 0.0, and simply only show the backdrop shadow ring. I've provided a possible solution for this, though I'm not sure that the naming is optimal.

    I would like to hear your thoughts on this.

    opened by iOSGeekster 7
  • Linking MKRingProgressView to objective-c project

    Linking MKRingProgressView to objective-c project

    I have a framework that I have built myself, with its own podspec and one of its dependencies is MKRingProgressView. Note that my framework and the rest of its dependencies are written in objective-c.

    pod lib lint does validate successfully with my framework's podspec, although whenever I do a pod install on another project with my framework, I get this error on the MKRingProgressView framework whenever I try to compile:

    The "Swift Language Version" (SWIFT_VERSION) build setting must be set to a supported value for targets which use Swift. This setting can be set in the build settings editor.

    Isn't it necessary that MKRingProgressView needs to specify the swift version in its podspec as well?

    Also, it looks like a few of open var are not translated as properties when MKRingProgressView-Swift.h is imported out of an objective-c project. Adding the @objc attribute to these variables may fix it.

    opened by StefanBouwer 7
  • Color Crashing Ring

    Color Crashing Ring

    Hello,

    I have two rings inside of a standard UIViewController, and when I add the second one it says

    "MKRingProgressView was compiled with optimization - stepping may behave oddly; variables may not be available."

    When the app crashes.

    Also, I am getting a error: IB Designables: Failed to render and update auto layout status for HomeViewController (h2x-s1-kZZ): The agent crashed

    Any idea what could be causing this?

    opened by Treverr 7
  • Even/smooth progress

    Even/smooth progress

    We really like this Pod!

    We are actually using the progress rings for a timer but love that it looks like the native watch rings. That being said we were wondering if it was possible to make the progress evenly incremented without updating progress every second.

    We were doing the update every second but the progress than "stepped". We did the below code once a second in a Timer.scheduleTimer. The variable progress is the % of seconds left (ex: 25/30) with the view saying 25 seconds.

    CATransaction.begin() CATransaction.setAnimationDuration(1.0) timer.progress = progress // updated every second CATransaction.commit()

    Instead we moved to this approach where we start the Timer and start the progress animation to have a duration of the full countdownSecs (ex: 30 seconds). Note we setup the progress ring before this to have progress = 1.0.

    CATransaction.begin() CATransaction.setAnimationDuration(Double(countdownSecs)) timer.progress = 0.0 CATransaction.commit()

    We think this looks smoother as an animation but the progress is no longer incrementing in even values.

    Example: If the timer is for 30 seconds, when the ring is half full we expect the time to be 15 seconds.

    img_1271 img_1273

    Is there a way to make this progression even?

    opened by okahara 6
  • UIAccessibility/VoiceOver support

    UIAccessibility/VoiceOver support

    Thanks for the library!

    I noticed the rings weren't accessible to a screenreader user, so I thought it might be worth adding. The only additional property I've added is the identifier: String? in MKRingProgressView and it is optional.

    The reason these are computed properties is mostly to account for updated frames on rotation. Also, note that grouped accessibility overrides individual accessibility, but this is intentional and supports users of the library that use them grouped or one at a time.

    Happy to make changes as needed.

    opened by mathewa6 5
  • Statically update ring progress

    Statically update ring progress

    I’d love to have the ability to update a ring’s progress without any animation. When displaying multiple rings in a single view controller, if you animate rings as they appear, you have to watch the animation multiple times as you scroll and that gets tiring, and if you try to instead animate them all at once, this can cause a drop in framerate. So being able to selecting statically update rings would be nice.

    opened by HarshilShah 5
  • upgrading MKRingProgressView 2.2.2 to 2.2.3 occured the issue

    upgrading MKRingProgressView 2.2.2 to 2.2.3 occured the issue

    Hello when i am upgrading MKRingProgressView 2.2.2 to 2.2.3 It gives us the error below

    libsystem_platform.dylib 0x19f07e554 _platform_memmove + 100 1 CoreGraphics 0x1a6333738 CGDataProviderCreateWithCopyOfData + 220 2 ??? 0x0 (Missing) 3 ??? 0x0 (Missing) 4 MKRingProgressView 0x1033cc210 $s18MKRingProgressView04RingB5LayerC11drawContent33_772FEB58C33FFBD64D515695F0C0FBB5LL2inySo12CGContextRefa_tFSo07CGImageQ0aSgyXEfU1_Tf4nnnnx_n + 680 5 MKRingProgressView 0x1033caf78 $s18MKRingProgressView04RingB5LayerC11drawContent33_772FEB58C33FFBD64D515695F0C0FBB5LL2inySo12CGContextRefa_tF + 2208 6 MKRingProgressView 0x1033cc56c $s18MKRingProgressView04RingB5LayerC12contentImageSo10CGImageRefaSgyFySo010UIGraphicsG15RendererContextCXEfU_TA + 44 7 MKRingProgressView 0x1033cc5a0 $sSo30UIGraphicsImageRendererContextCIgg_ABIegg_TRTA + 20 8 MKRingProgressView 0x1033ca6c4 $sSo30UIGraphicsImageRendererContextCIegg_ABIyBy_TR + 36 9 UIKitCore 0x1a30a99b4 -[UIGraphicsRenderer runDrawingActions:completionActions:format:error:] + 432 10 ??? 0x0 (Missing) 11 ??? 0x0 (Missing) 12 ??? 0x548a681033ca580 (Missing) 13 MKRingProgressView 0x1033ca3f8 $s18MKRingProgressView04RingB5LayerC7displayyyFTo + 28 14 QuartzCore 0x1a5f552dc CA::Layer::layout_and_display_if_needed(CA::Transaction) + 428 15 ??? 0x0 (Missing) 16 ??? 0x0 (Missing) 17 ??? 0x0 (Missing) 18 ??? 0xb5014019f2f3500 (Missing) 19 ??? 0x241e55019f2ee200 (Missing) 20 ??? 0x0 (Missing) 21 ??? 0x0 (Missing) 22 ??? 0x0 (Missing) 23 ??? 0x68537301a3479400 (Missing) 24 ??? 0x0 (Missing) 25 libdyld.dylib 0x19f16ce18 start + 4*

    Capture

    We have also downgrade the version to 2.2.2 , but gives us the error

    Please help us with this issue,

    Thanks in advance

    opened by vandeepsoni5050 4
  • Swift 5.7.1 compatibility

    Swift 5.7.1 compatibility

    Hi @maxkonovalov,

    Can we expect a new version to be released supporting Swift versions > 5.7? Also will this library be kept up to date with newer versions for now at least?

    Kind regards, Stefan

    opened by StefanBouwer 0
  • Blinking in Collection View

    Blinking in Collection View

    I notice rings 'blinking' when I put them in collection view.

    When I reload data, cells are reused and updated with the new progress. However, I can see that the ring is presenting the old values and its progress is updated after few miliseconds.

    I'm still debuging this but it seems to be connected with MKRingProgressLayer trying to animate the progress even though it's not in a UIView.animate { ... }.

    opened by Moriquendi 1
  • Simulator vs. device performance

    Simulator vs. device performance

    I'm trying to use the example application with the Xcode 9 and iOS 11 GMs here, and seeing significant performance differences between the two.

    On my mid-2014 15-inch MacBook Pro, the example app absolutely flies, working perfectly, pretty much. Meanwhile, on my 6s Plus, it's dropping frames left, right, and centre. I tried messing with the usual suspects (clear memory, low power mode, etc.) but device just keeps dropping frames.

    I know there's a performance difference between simulator and device, but it usually tends to be in the device's favour, especially with graphics stuff. There's also an OpenGL simulator bug in the GM, which might be at play here: https://twitter.com/xenadu02/status/911463433521860609

    Any ideas for increasing on device performance? I tried but can't seem to find any way to toggle CPU-based rendering like with CIContext, for example.

    Thanks

    enhancement 
    opened by HarshilShah 8
  • Slow performance in collection view cell

    Slow performance in collection view cell

    I am using this ring progress view inside a collection view. When i start scrolling the collection view and the collection view creates another cell, it is not smooth. I used instruments to see what could be the problem and i noticed that the heaviest function was the method contentImage in the MKRingProgressView class.

    Can you please try to see if is there any way to improve performance? Thank you

    enhancement 
    opened by gianfilippocisternino 2
Releases(2.3.0)
Owner
Max Konovalov
iOS Developer 👨🏻‍💻
Max Konovalov
A simple and awesome loading Activity Indicator(with block moving animation) for your iOS app.

BPBlockActivityIndicator BPBlockActivityIndicator is a clean and easy-to-use Activity Indicator meant to display the progress of an ongoing task on iO

Ben.Park 43 Nov 6, 2021
The easiest way to handle a simple full screen activity indicator in iOS. Written in Swift.

LLSpinner An easy way to handle full screen activity indicator. Easy to use Get Started // Show spinner LLSpinner.spin() // Hide spinner LLSpinner.st

Aleph Retamal 36 Dec 9, 2021
Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.

StepProgressView Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView. Usage let progr

Yonat Sharon 340 Dec 16, 2022
Completely customizable progress based loaders drawn using custom CGPaths written in Swift

FillableLoaders Completely customizable progress based loaders drawn using custom CGPaths written in Swift Waves Plain Spike Rounded Demo: Changelog:

Pol Quintana 2.1k Dec 31, 2022
UIProgressView replacement with an highly and fully customizable animated progress bar in pure Core Graphics

The YLProgressBar is an UIProgressView replacement with a highly and fully customizable animated progress bar in pure Core Graphics. It has been imple

Yannick Loriot 1.3k Jan 5, 2023
Flexible Stepped Progress Bar for IOS

FlexibleSteppedProgressBar This is a stepped progress bar for IOS. The base code is derived from ABSteppedProgressBar. Most of the design is customisa

Amrata Baghel 549 Jan 6, 2023
A simple animated progress bar in Swift

DSGradientProgressView Introduction DSGradientProgressView is a simple and customizable animated progress bar written in Swift. Inspired by GradientPr

Dhol Studio 445 Oct 13, 2022
📊 A customizable gradient progress bar (UIProgressView).

GradientProgressBar A customizable gradient progress bar (UIProgressView). Inspired by iOS 7 Progress Bar from Codepen. Example To run the example pro

Felix M. 490 Dec 16, 2022
Simple and powerful animated progress bar with dots

Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 8.0+ Swift 3.0+ Installatio

Nikola Corlija 42 Dec 5, 2022
💈 Retro looking progress bar straight from the 90s

Description Do you miss the 90s? We know you do. Dial-up internet, flickering screens, brightly colored websites and, of course, this annoyingly slow

HyperRedink 18 Nov 24, 2022
Material Linear Progress Bar for your iOS apps

LinearProgressBar Material Linear Progress Bar for your iOS apps Installation Carthage: github "Recouse/LinearProgressBar" CocoaPods: Add this to you

Firdavs Khaydarov 161 Dec 5, 2022
Simple Swift Progress HUD

MKProgress An iOS Simple Swift Progress HUD Requirements iOS 9.0+ Swift 3.0+ Xcode 8.0+ Installation MKProgress is only available via CocoaPods: pod '

Muhammad Kamran 143 Dec 23, 2022
A clean and lightweight progress HUD based on SVProgressHUD, converted to Swift with the help of Swiftify.

IHProgressHUD IHProgressHUD is a clean and easy-to-use HUD meant to display the progress of an ongoing task on iOS and tvOS. IHProgressHUD is based on

Swiftify 202 Dec 22, 2022
This is a beauful hud view for iPhone & iPad

WSProgressHUD This is a beauful hud view for iPhone & iPad Usage To Download the project. Run the WSProgressHUD.xcodeproj in the demo directory. [

Wilson 583 Dec 6, 2022
A view class for iOS that makes uploading easy and beautiful.

SVUploader A view class for iOS that makes uploading easy and beautiful. Demo SVUploader is fully customizable - check out 2 demos. Installation Just

Kiran 79 Apr 18, 2022
Windless makes it easy to implement invisible layout loading view.

Windless Windless makes it easy to implement invisible layout loading view. Contents Requirements Installation Usage Looks Credits Communication Licen

ArLupin 940 Dec 22, 2022
Show pleasant loading view for your users 😍

RHPlaceholder ?? Because traditional loading view like UIActivityIndicatorView or similar one are no longer so trendy (Facebook or Instagram apps are

Robert Herdzik 238 Nov 2, 2022
StatusBarOverlay will automatically show a "No Internet Connection" bar when your app loses connection, and hide it again

StatusBarOverlay will automatically show a "No Internet Connection" bar when your app loses connection, and hide it again. It supports apps which hide the status bar and The Notch

Idle Hands Apps 160 Nov 2, 2022
PBCircularProgressView is a circular progress view for iOS similar to the app store download progress view.

Overview PBCircularProgressView is a circular progress view for iOS similar to the app store download progress view. It also ha

null 0 Oct 27, 2021
SwiftUI library to easily render diagrams given a tree of objects. Similar to ring chart, sunburst chart, multilevel pie chart.

Swift Sunburst Diagram Sunburst diagram is a library written with SwiftUI to easily render diagrams given a tree of objects. Similar to ring chart, su

Ludovic Landry 494 Dec 19, 2022