MDRadialProgress

MDRadialProgress

Released 4 years ago , Last update 4 years ago

A custom UIView for iOS for representing progress indication (loading state) in discrete steps.

MDRadialProgress

A custom UIView useful to represent progress in discrete steps.

It has the following features:

  • Draw progress in separated slices or as a single arc.
  • Can customize all colors, the distance of the slices and their thickness.
  • Clockwise and anti-clockwise drawing order.
  • Can start progress from any slice, not necessarily from the top.
  • Display a label with the current progress. The label size automatically adapts to the space available.
  • Themes support for easier customization of multiple views.
  • Fully accessible
  • Support iOS 6.0+

Pricing

14 day 14-day money-back guarantee

FREE

Attribution License

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Non-commercial use

  • Attribution required

$109.99

Developer License

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Commercial use

Installation

Either use CocoaPods by adding the line below to your Podfile:

pod MDRadialProgress

or copy MDRadialProgress.{h|m}, MDRadialProgressLabel.{h|m}, MDRadialProgressTheme.{h|m} into your project.

Usage

A simple MDRadialProgress can be created in the following way:

CGRect frame = CGRectMake(170, y, 60, 60);
MDRadialProgressView *radialView = [[MDRadialProgressView alloc] initWithFrame:frame];
radialView.progressTotal = 4;
radialView.progressCounter = 3;
[scrollView addSubview:radialView];

A slightly more elaborate example, with color customizations:

CGRect frame = CGRectMake(x, y, 100, 100);
MDRadialProgressView *radialView = [self progressViewWithFrame:frame];
radialView.progressTotal = 5;
radialView.progressCounter = 3;
radialView.theme.thickness = 15;
radialView.theme.incompletedColor = [UIColor clearColor];
radialView.theme.completedColor = [UIColor orangeColor];
radialView.theme.sliceDividerHidden = YES;
radialView.label.hidden = YES;

More exhaustive examples that illustrate all functionalities are included in the component source code.

Version 1.0 has introduced the concept of theme in order to make the customisation of many progress views simpler. If for example you have a table where in every cell you have a MDRadialProgressView, now you can create a theme with the appearance you like and apply it to all views, instead of customising each view singularly.

Accessibility and Localization

The component is fully accessible and it uses two labels that can be used by VoiceOver to speak the current progress value to the user. If you want to provide localized text messages translate these two labels in your Localization.strings files:

"Progress" "Progress changed to:"

3 licenses, starting from From » FREE View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
No comments have been posted yet.