diff --git a/StepIndicator/AnnularLayer.swift b/StepIndicator/AnnularLayer.swift
index f916681..6953e27 100644
--- a/StepIndicator/AnnularLayer.swift
+++ b/StepIndicator/AnnularLayer.swift
@@ -13,6 +13,7 @@ class AnnularLayer: CAShapeLayer {
     private let fullCircleLayer = CAShapeLayer()
     private let centerCircleLayer = CAShapeLayer()
     private let flagLayer = CALayer()
+    private let maskLayer = CALayer()
     private let annularPath = UIBezierPath()
     lazy private var centerTextLayer = CATextLayer()
     
@@ -23,6 +24,7 @@ class AnnularLayer: CAShapeLayer {
     
     // MARK: - Properties
     var tintColor:UIColor?
+    var flagTintColor:UIColor?
     var displayNumber = false
     var step:Int = 0
     var annularDefaultColor: UIColor?
@@ -72,7 +74,8 @@ class AnnularLayer: CAShapeLayer {
         }
 
         self.flagLayer.contents = AnnularLayer.flagCGImage
-        self.fullCircleLayer.addSublayer(self.flagLayer)
+        self.maskLayer.mask = self.flagLayer
+        self.fullCircleLayer.addSublayer(self.maskLayer)
     }
     
     required init?(coder aDecoder: NSCoder) {
@@ -207,7 +210,8 @@ class AnnularLayer: CAShapeLayer {
         let flagLayerWidth = self.fullCircleLayer.bounds.width * 0.8
         let flagLayerHeight = self.fullCircleLayer.bounds.height * 0.8
         self.flagLayer.frame = CGRect(x: self.fullCircleLayer.bounds.width * 0.2 / 2.0, y: self.fullCircleLayer.bounds.height * 0.2 / 2.0, width:flagLayerWidth, height:flagLayerHeight)
-        
+        self.maskLayer.frame = self.flagLayer.bounds
+        self.maskLayer.backgroundColor = self.flagTintColor?.cgColor
         self.animateFullCircle()
     }
     
diff --git a/StepIndicator/StepIndicatorView.swift b/StepIndicator/StepIndicatorView.swift
index 76d1f5e..945f3a0 100644
--- a/StepIndicator/StepIndicatorView.swift
+++ b/StepIndicator/StepIndicatorView.swift
@@ -110,6 +110,12 @@ public class StepIndicatorView: UIView {
         }
     }
     
+    @IBInspectable public var flagTintColor:UIColor = .white {
+        didSet {
+            self.updateSubLayers()
+        }
+    }
+    
     public var direction:StepIndicatorViewDirection = .leftToRight {
         didSet{
             self.updateSubLayers()
@@ -225,6 +231,7 @@ public class StepIndicatorView: UIView {
     private func applyAnnularStyle(annularLayer:AnnularLayer) {
         annularLayer.annularDefaultColor = self.circleColor
         annularLayer.tintColor = self.circleTintColor
+        annularLayer.flagTintColor = self.flagTintColor
         annularLayer.lineWidth = self.circleStrokeWidth
         annularLayer.displayNumber = self.displayNumbers
         annularLayer.showFlag = self.showFlag
diff --git a/StepIndicatorDemo.xcodeproj/project.xcworkspace/xcuserdata/babel.xcuserdatad/UserInterfaceState.xcuserstate b/StepIndicatorDemo.xcodeproj/project.xcworkspace/xcuserdata/babel.xcuserdatad/UserInterfaceState.xcuserstate
new file mode 100644
index 0000000..486d52f
Binary files /dev/null and b/StepIndicatorDemo.xcodeproj/project.xcworkspace/xcuserdata/babel.xcuserdatad/UserInterfaceState.xcuserstate differ
diff --git a/StepIndicatorDemo.xcodeproj/xcuserdata/babel.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist b/StepIndicatorDemo.xcodeproj/xcuserdata/babel.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
new file mode 100644
index 0000000..3267807
--- /dev/null
+++ b/StepIndicatorDemo.xcodeproj/xcuserdata/babel.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Bucket
+   uuid = "12D3CF3D-69D0-4BBA-BFCA-27FB0FEAB331"
+   type = "1"
+   version = "2.0">
+</Bucket>
diff --git a/StepIndicatorDemo.xcodeproj/xcuserdata/babel.xcuserdatad/xcschemes/xcschememanagement.plist b/StepIndicatorDemo.xcodeproj/xcuserdata/babel.xcuserdatad/xcschemes/xcschememanagement.plist
new file mode 100644
index 0000000..9ad67bb
--- /dev/null
+++ b/StepIndicatorDemo.xcodeproj/xcuserdata/babel.xcuserdatad/xcschemes/xcschememanagement.plist
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>StepIndicatorDemo.xcscheme_^#shared#^_</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>0</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>
diff --git a/StepIndicatorDemo/Base.lproj/Main.storyboard b/StepIndicatorDemo/Base.lproj/Main.storyboard
index e9128ec..12da0ea 100644
--- a/StepIndicatorDemo/Base.lproj/Main.storyboard
+++ b/StepIndicatorDemo/Base.lproj/Main.storyboard
@@ -1,11 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="EIg-3h-U8D">
-    <device id="retina4_7" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="EIg-3h-U8D">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -14,7 +12,7 @@
             <objects>
                 <navigationController id="EIg-3h-U8D" sceneMemberID="viewController">
                     <navigationBar key="navigationBar" contentMode="scaleToFill" id="V74-lg-YZu">
-                        <rect key="frame" x="0.0" y="20" width="375" height="44"/>
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
                         <autoresizingMask key="autoresizingMask"/>
                     </navigationBar>
                     <connections>
@@ -38,7 +36,7 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="yST-gL-Hd6" customClass="StepIndicatorView" customModule="StepIndicatorDemo" customModuleProvider="target">
-                                <rect key="frame" x="56" y="94" width="263" height="80"/>
+                                <rect key="frame" x="56" y="74" width="263" height="80"/>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="80" id="E3e-xS-ZzW"/>
                                     <constraint firstAttribute="width" constant="263" id="KBj-Ys-sXJ"/>
@@ -68,7 +66,7 @@
                                 </userDefinedRuntimeAttributes>
                             </view>
                             <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" alwaysBounceHorizontal="YES" pagingEnabled="YES" translatesAutoresizingMaskIntoConstraints="NO" id="MyL-yX-cNQ">
-                                <rect key="frame" x="0.0" y="182" width="375" height="485"/>
+                                <rect key="frame" x="0.0" y="162" width="375" height="505"/>
                                 <connections>
                                     <outlet property="delegate" destination="BYZ-38-t0r" id="PnJ-CX-m6O"/>
                                 </connections>
@@ -107,7 +105,7 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="inh-g6-dbK" customClass="StepIndicatorView" customModule="StepIndicatorDemo" customModuleProvider="target">
-                                <rect key="frame" x="42.5" y="91" width="290" height="72"/>
+                                <rect key="frame" x="42.5" y="71" width="290" height="72"/>
                                 <color key="backgroundColor" red="0.94509803920000002" green="0.94509803920000002" blue="0.94509803920000002" alpha="1" colorSpace="calibratedRGB"/>
                                 <constraints>
                                     <constraint firstAttribute="width" constant="290" id="dZ9-cu-Vr8"/>
@@ -126,7 +124,7 @@
                                 </userDefinedRuntimeAttributes>
                             </view>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ZgA-cO-CjV" customClass="StepIndicatorView" customModule="StepIndicatorDemo" customModuleProvider="target">
-                                <rect key="frame" x="245" y="229" width="72" height="290"/>
+                                <rect key="frame" x="245" y="209" width="72" height="290"/>
                                 <color key="backgroundColor" red="0.94509803920000002" green="0.94509803920000002" blue="0.94509803920000002" alpha="1" colorSpace="calibratedRGB"/>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="290" id="6vG-NW-nue"/>
@@ -145,25 +143,25 @@
                                 </userDefinedRuntimeAttributes>
                             </view>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Right to Left mode" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="M5e-TF-CRh">
-                                <rect key="frame" x="120" y="63" width="135" height="20"/>
+                                <rect key="frame" x="120" y="43" width="135" height="20"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="16"/>
                                 <color key="textColor" red="0.40000000000000002" green="0.40000000000000002" blue="0.40000000000000002" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Top to Bottom" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Rvo-5C-acZ">
-                                <rect key="frame" x="43" y="201" width="103" height="20"/>
+                                <rect key="frame" x="43" y="181" width="103" height="20"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="16"/>
                                 <color key="textColor" red="0.40000000000000002" green="0.40000000000000002" blue="0.40000000000000002" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Bottom to Top" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="GhC-SL-LXe">
-                                <rect key="frame" x="230" y="201" width="103" height="20"/>
+                                <rect key="frame" x="230" y="181" width="103" height="20"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="16"/>
                                 <color key="textColor" red="0.40000000000000002" green="0.40000000000000002" blue="0.40000000000000002" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="egv-hZ-eKI" customClass="StepIndicatorView" customModule="StepIndicatorDemo" customModuleProvider="target">
-                                <rect key="frame" x="58" y="229" width="72" height="290"/>
+                                <rect key="frame" x="58" y="209" width="72" height="290"/>
                                 <color key="backgroundColor" red="0.94509803920000002" green="0.94509803920000002" blue="0.94509803920000002" alpha="1" colorSpace="calibratedRGB"/>
                                 <constraints>
                                     <constraint firstAttribute="width" constant="72" id="0gJ-nn-LL2"/>