Annular ProgressView

Preview

Keeping a regular check on the progress of project completion is a bit difficult, but not anymore, We have created our own custom progress view to measure the progress of the individual project on an individual day based on the task completion. That helps us to generate daily reports with specific numbers.

Using Annular progress view now it's no longer difficult to measure the bang on results!

A powerful Circular Slider which has been written in SwiftUI

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

Requirements

iOS 13.0+
Xcode 12.5+

Installation

Circular Slider is available through CocoaPods. To install it, simply add the following line to your Podfile:

To install it, simply add the following line to your Podfile:

pod 'CircularSlider', git: 'https://github.com/PiyushSelarka/CircularSlider.git', branch: 'main'

Usage

Added import CircularSlider

import CircularSlider

Config

Configration for Circular Slider with completion

CircularSlider(config: Config(minimumValue: 0.0,
                              maximumValue: 100,
                              totalValue: 100,
                              knobRadius: 10,
                              radius: 125,TotalProgressView: 20.0,
                              outercircleColor: Color.init(red: 64/255, green: 66/255, blue: 131/255),
                              innercircleColor: RadialGradient(gradient: Gradient(colors: [.white, .gray]), center: .center, startRadius: 50, endRadius: 100),
                              lineColor: Color(UIColor.lightGray),
                              lineWidth: 1.0,
                              tickColor: Color.gray,
                              tickhighlightedColor: Color.white,
                              sliderColor: LinearGradient(gradient: Gradient(colors: [.blue, .white]),startPoint: .topLeading, endPoint: .bottomLeading),
                              startPointCircleColor: RadialGradient(gradient: Gradient(colors: [.white, .blue,]), center: .center, startRadius: 0, endRadius: 7),
                              pointCircleColor: RadialGradient(gradient: Gradient(colors: [.blue, .white]), center: .center, startRadius: 0, endRadius: 7),
                              titleText: "Monday"
                             ),
                             completion: { (value) in
                                  print(value) // Getting slider value 
                             }
)

minimumValue

Minimum Value of the slider or you can say start value for the slider. It will set in CGFloat.init

maximumValue

Maximum value for the slider which is set in CGFloat.init

totalValue

TotalValue will help to measure progress of the circle while moving which should be equal to maximum value

knobRadius

The Radius of the know that how large you want to show

radius

Size or area of Progress view which can be define by radius

outercircleColor

The color of back circle set in Color.init

innercircleColor

The color of inner side circle set in RadialGradient.init

lineColor

The color of line in inner circle set in Color.init

lineWidth

The width of line in inner circle set in CGFloat.init

tickColor

The color of tick in 360 degree circle set in Color.init

tickhighlightedColor

The color of tick highlighted in 360 degree circle set in Color.init

sliderColor

The color of slider set in LinearGradient.init

startPointCircleColor

The slider start circle color set in RadialGradient.init

pointCircleColor

The slider drag circle color set in RadialGradient.init

titleText

set Title text in circle

TotalProgressView

When you want to put a static number to show the progress only then you can pass the number in this property which will help you to show the circular bar based on the value you pass

CallBack

completion: { (value) in
    print(value) // Getting slider value 
}

📱 Check out other lists of our Mobile UI libraries

💻 Check out other lists of Web libraries

📝 Get FREE Industry WhitePapers →

Check out our Work

📄 License

MI-Circular Slider is MIT-licensed.

If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com

Mindinventory/CircularSlider