Latest 0.3.3
License MIT
Platforms ios 7.1

CI Status


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



DRAuraButton is available through a non official CocoaPods repository. To install
it, simply add the following lines to your Podfile:

source ''
pod "DRAuraButton"


Animated transition from a configuration to another

DRAuraButton is a UIButton with a subview that displays a rotating circle. Multiple configuration of stroke width, radius, color and speed can be specified. Going from one configuration to another is animated.

This project was done mainly as a first approch to Core Animation framework — it uses CABasicAnimations to animates transition between states.


Any storyboard button can be set to be a DRAuraButton.


The button presents arbitrary states, defined by the developer.

A state is defined by a set of properties, stored in a DRAuraConfiguration object. Among those properties are the ID. It serves as state identifier (see DRAuraButton.currentStateID). All states must have a unique ID.

To create and add a new state, use DRAuraButton addAuraConfiguration: method:

[myButton addAuraConfiguration:^(DRAuraConfiguration *c) {
    c.ID = @"my State name";
    c.width = 2.; = 7.;
    c.offset = 6.;
    c.step = 0.04;
    c.animationDuration = 0.3;
    c.auraColor = [UIColor blackColor];
    c.buttonColor = [UIColor grayColor];

To switch to that state, call setCurrentStateID: :

[myButton setCurrentStateID:@"my State name"];

To remove a state from the object, call removeAuraConfiguration: :

[myButton removeAuraConfiguration:@"my State name"];

Customizable properties

  • Angle of rotation per frame: set DRAuraConfiguration.step. Greater is faster. Rotation is animated by NSTimer each 0.016s. As per NSTimer however, this time interval is not guaranteed.
  • Space between the button and the circle: set Greater is bigger
  • Space between the top half and the bottom half: set DRAuraConfiguration.offset. This value is half the actual arc length between each arc.
  • Stroke width: set DRAuraConfiguration.width. Greater is wider.
  • Color of the stroke: set DRAuraConfiguration.auraColor.
  • Color of the button’s background layer: set DRAuraConfiguration.buttonColor.


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

Latest podspec

    "name": "DRAuraButton",
    "version": "0.3.3",
    "summary": "A UIButton with a rotating subview.",
    "description": "An UIButton with a rotating subview. This subview displays two arc of a circle that can be customized. Customisation are pre-registered and their transition are animated.nnCustomization includes the color and width of the arcs, the distance between the arcs and the distance between the circle and the button itself.nnThe UIButton itself appears as a disk (by setting the UIButton.layer.cornerRadius).nnThe main objective of that pod was to work with the Core Animation framework.",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "Charles Thierry": "[email protected]"
    "source": {
        "git": "",
        "tag": "0.3.3"
    "platforms": {
        "ios": "7.1"
    "source_files": "DRAuraButton/Classes/**/*",
    "public_header_files": "DRAuraButton/Classes/*.h"

Pin It on Pinterest

Share This