复古外观进度条直接从 90 年代开始

逆向进展

CI 状态 版本 迦太基兼容 许可证 平台 迅速

描述

你想念90年代吗?我们知道您知道。拨号上网,闪烁的屏幕,色彩鲜艳的网站,当然还有这个令人讨厌的缓慢进度条,它是为了测试你的耐心而发明的。是的,那是不久前的事了,但我们不希望它被遗忘。认识 RetroProgress,这是一个进度条,旨在治愈您的 90 年代怀旧情绪。

  • 易于使用和可定制的进度条。
  • 支持两个进度值 (0...1)和步骤数。
  • 进度动画。
  • 没有外部依赖关系。
  • 游乐场
  • 演示项目

目录

“逆向进度”图标

用法

Are you excited to bring this thing back from the dead? So are we. Let’s use default configuration and see what we get out-of-the-box:

let progressView = ProgressView(frame: CGRect(x: 0, y: 0, width: 360, height: 30))
progressView.animateProgress(to: 0.8)
RetroProgress

Do you think it’s way too retro? Let’s try to make it more modern:

let progressView = ProgressView(frame: CGRect(x: 0, y: 0, width: 360, height: 30))

// Configure
progressView.layer.cornerRadius = 10
progressView.layer.borderColor = UIColor.black.cgColor
progressView.trackColor = .white
progressView.separatorColor = .black
progressView.progressColor = UIColor(
  red: 218/255,
  green: 236/255,
  blue: 255/255,
  alpha: 1
)

// Set progress
progressView.animateProgress(to: 0.8)
RetroProgress

Not a fan of those separators? Let’s try without them:

let progressView = ProgressView(frame: CGRect(x: 0, y: 0, width: 360, height: 30))

// Configure
progressView.numberOfSteps = 0
progressView.progressInset = .zero
progressView.layer.cornerRadius = 15
progressView.layer.borderColor = UIColor.white.cgColor
progressView.trackColor = .black
progressView.progressColor = .white

// Set progress
progressView.animateProgress(to: 0.8)
RetroProgress

The options are limitless. Think big, now it’s your turn to make the progress bar great again.

Public properties

  • numberOfSteps – Maximum number of steps. Set to 0 to remove separators.
  • step – Number of separators (0…numberOfSteps). Values outside are pinned.
  • progress – 0…1, default is 0. Values outside are pinned.
  • progressInset – The inner inset for progress bar and separators.
  • trackColor – The color shown for the portion of the progress bar that is not filled.
  • progressColor – The color shown for the portion of the progress bar that is filled.
  • separatorColor – The color used for the step separators.
  • fullProgressAnimationDuration – The duration for progress animation from 0 to 1.
  • separatorWidth – The width of step separators.

Public methods

  • animateProgress(to:duration:) – Animates progress bar to the specified value (0…1).
  • animateSteps(to:duration:) – Animates progress bar to the specified value (0…numberOfSteps).

Installation

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

pod 'RetroProgress'

RetroProgress is also available through Carthage. To install just write into your Cartfile:

github "vadymmarkov/RetroProgress"

RetroProgress can also be installed manually. Just download and drop folders in your project.Sources

Author

Vadym Markov, [email protected]

Credits

This library was originally done at Hyper, a digital communications agency with a passion for good code and delightful user experiences.

Contributing

Check the CONTRIBUTING file for more info.

License

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

GitHub

https://github.com/hyperoslo/RetroProgress