Snapchat / Instagram Stories like progress indicator

Overview

Swift Version twitter: @dylan36032

SegmentedProgressBar

A simple little control that animates segments like Snapchat or Instagram Stories.

Screenshot

Requirements

  • iOS 8.0+
  • Xcode 8

Installation

Drag and drop SegmentedProgressBar.swift into your project. That's it.

Usage

let spb = SegmentedProgressBar(numberOfSegments: 3, duration: 5)
spb.frame = CGRect(x: 15, y: 15, width: view.frame.width - 30, height: 4)
view.addSubview(spb)

spb.startAnimation()

Additional Stuff

Delegate:

spb.delegate = self // has to conform to SegmentedProgressBarDelegate

func segmentedProgressBarChangedIndex(index: Int) {
}

func segmentedProgressBarFinished() {
}

Styling:

spb.topColor = UIColor.white
spb.bottomColor = UIColor.white.withAlphaComponent(0.25)
spb.padding = 2

Pausing / Resuming

spb.isPaused = true
spb.isPaused = false

Skip / Rewind

spb.skip()
spb.rewind()
You might also like...
Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.
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

Work in progress gallery of controls available to Catalyst apps using Optimized for Mac
Work in progress gallery of controls available to Catalyst apps using Optimized for Mac

Catalyst Controls Gallery Very simple work-in-progress demonstration of many common controls available to Mac Catalyst as of macOS 11. Provided moreso

Measuring the progress with annotations 🔱
Measuring the progress with annotations 🔱

Description Displaying the progress in a meter control. ProgressMeter lets you create your custom annotations that display either on top or bottom of

A dynamically flowing progress bar.
A dynamically flowing progress bar.

WWProgressView A dynamically flowing progress bar. 一個動態流動的進度條. Installation with Swift Package Manager dependencies: [ .package(url: "https://gith

A fancy hexagonal layout for displaying data like your Apple Watch
A fancy hexagonal layout for displaying data like your Apple Watch

Hexacon is a new way to display content in your app like the Apple Watch SpringBoard Highly inspired by the work of lmmenge. Special thanks to zenly f

You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

PullToDismiss PullToDismiss provides dismiss modal viewcontroller function like Facebook Messenger by pulling scrollview or navigationbar with smooth

RangeSeedSlider provides a customizable range slider like a UISlider.
RangeSeedSlider provides a customizable range slider like a UISlider.

RangeSeekSlider Overview RangeSeekSlider provides a customizable range slider like a UISlider. This library is based on TomThorpe/TTRangeSlider (Objec

SAHistoryNavigationViewController realizes iOS task manager like UI in UINavigationContoller. Support 3D Touch!
SAHistoryNavigationViewController realizes iOS task manager like UI in UINavigationContoller. Support 3D Touch!

SAHistoryNavigationViewController Support 3D Touch for iOS9!! SAHistoryNavigationViewController realizes iOS task manager like UI in UINavigationConto

Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

kishikawakatsumi/SpreadsheetView has moved! It is being actively maintained at bannzai/SpreadsheetView. This fork was created when the project was mov

Comments
  • animate should call before delegate

    animate should call before delegate

    animate should call before delegate.segmentedProgressBarChangedIndex. Otherwise isPaused will not work cause of "self.isPaused = false" in animate function

    opened by alexyashin 1
  • Skip Story and start Progress bar with next story

    Skip Story and start Progress bar with next story

    Hello,

    I am using your demo for one of my requirement, and successfully done next story on tap instead of pause.

    But issue is the progress is not fresh start from second image.

    opened by hardiktgreydesk 0
  • Using with collection view

    Using with collection view

    Hello , I am using this progress in collection view cell because of reloading cell it is not working as instagram. Sometimes the progress bar is not moving. Can any one help me in this.

    Thanks

    opened by dineshguptha 0
Owner
Dylan Marriott
Software Engineer
Dylan Marriott
A horizontal scroll dial like Instagram.

HorizontalDial Preview Requirements iOS 8.0+ Swift 5 Storyboard support Installation CocoaPods use_frameworks! pod "HorizontalDial" Manually To instal

Lee Sun-Hyoup 210 Nov 22, 2022
Cool Animated music indicator view written in Swift

Cool Animated music indicator view written in Swift. ESTMusicIndicator is an implementation of NAKPlaybackIndicatorView in Swift for iOS 8. 本人著作的书籍《La

Aufree 465 Nov 28, 2022
An easy way to add a shimmering effect to any view with just one line of code. It is useful as an unobtrusive loading indicator.

LoadingShimmer An easy way to add a shimmering effect to any view with just single line of code. It is useful as an unobtrusive loading indicator. Thi

Jogendra 1.4k Jan 4, 2023
A page control similar to that used in Instagram

ISPageControl ISPageControl has a page control similar to that used in the Instagram Contents Requirements Installation Usage Communication Credits Li

Interactive 291 Dec 5, 2022
List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model and doesn't depend on UI framework

SwiftListTreeDataSource List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model, so can

Dzmitry Antonenka 26 Nov 26, 2022
Show progress in your app's Dock icon

DockProgress Show progress in your app's Dock icon This package is used in production by the Gifski app. You might also like some of my other apps. Re

Sindre Sorhus 958 Jan 2, 2023
📊 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
A custom reusable circular / progress slider control for iOS application.

HGCircularSlider Example To run the example project, clone the repo, and run pod install from the Example directory first. You also may like HGPlaceho

Hamza Ghazouani 2.4k Jan 6, 2023
💈 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
Progress and Activity Indicators for iOS apps

Progress Indicators and Activity Views for iOS Apps Features Storyboard compatible, configure apprearance with the property inspector. fully animated,

Alexander Kasimir 101 Nov 13, 2022