All Projects → ParkGwangBeom → Windless

ParkGwangBeom / Windless

Licence: mit
Windless makes it easy to implement invisible layout loading view.

Programming Languages

swift
15916 projects

Projects that are alternatives of or similar to Windless

loading-indicator
🚦 Simple and customizable command line loading indicator
Stars: ✭ 18 (-98.04%)
Mutual labels:  loading, indicator
Ngx Skeleton Loader
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
Stars: ✭ 278 (-69.75%)
Mutual labels:  skeleton, loading
AVLoadingIndicatorView
DEPRECATED
Stars: ✭ 9,655 (+950.6%)
Mutual labels:  loading, indicator
Tabanimated
A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架,包含快速植入,低耦合,兼容复杂视图等特点,提供国内主流骨架屏动画的加载方案,同时支持上拉加载更多、自定制动画。)
Stars: ✭ 2,909 (+216.54%)
Mutual labels:  skeleton, loading
Flutter easyloading
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web
Stars: ✭ 455 (-50.49%)
Mutual labels:  loading, indicator
react-bones
💀 Dead simple content loading components for React and React-Native. 💀
Stars: ✭ 42 (-95.43%)
Mutual labels:  skeleton, loading
koleton
The easiest library to show skeleton screens in an Android app.
Stars: ✭ 84 (-90.86%)
Mutual labels:  skeleton, loading
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件,包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-83.03%)
Mutual labels:  loading, layer
Statefullayout
Android layout to show template for loading, empty, error etc. states
Stars: ✭ 813 (-11.53%)
Mutual labels:  layout, loading
React Native Indicator
🌀 A friendly loading indicator component for React Native
Stars: ✭ 280 (-69.53%)
Mutual labels:  loading, indicator
Skeletonloadingview
SkeletonLoadingView(Shimmer) with Kotlin in Android💀💀
Stars: ✭ 146 (-84.11%)
Mutual labels:  skeleton, loading
Vue Content Loading
Vue component to easily build (or use presets) SVG loading cards Facebook like.
Stars: ✭ 729 (-20.67%)
Mutual labels:  skeleton, loading
React Content Loader
⚪ SVG-Powered component to easily create skeleton loadings.
Stars: ✭ 11,830 (+1187.27%)
Mutual labels:  skeleton, loading
flutter easyloading
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web
Stars: ✭ 1,021 (+11.1%)
Mutual labels:  loading, indicator
Skeletonview
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting
Stars: ✭ 10,804 (+1075.63%)
Mutual labels:  skeleton, loading
PageStatusTransformer
A low invasive state management on Android
Stars: ✭ 12 (-98.69%)
Mutual labels:  layout, loading
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-86.18%)
Mutual labels:  loading, indicator
Cosin
Android loading view library 📊🍭
Stars: ✭ 129 (-85.96%)
Mutual labels:  loading, indicator
Skeletonui
☠️ Elegant skeleton loading animation in SwiftUI and Combine
Stars: ✭ 275 (-70.08%)
Mutual labels:  skeleton, loading
React Skeletor
Skeleton loading for React
Stars: ✭ 551 (-40.04%)
Mutual labels:  skeleton, loading

Windless

Carthage compatible Version Xcode 9.0+ iOS 8.0+ Swift 4.0+ License

Windless makes it easy to implement invisible layout loading view.

Contents

Requirements

  • iOS 8.0+
  • Xcode 9.0+
  • Swift 4.0+

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

CocoaPods 1.1+ is required to build Windless 4.0+.

To integrate Windless into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'Windless', '~> 0.1.5'
end

Then, run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Windless into your Xcode project using Carthage, specify it in your Cartfile:

github "Interactive-Studio/Windless" ~> 0.1.5

Run carthage update to build the framework and drag the built Windless.framework into your Xcode project.

Manually

If you prefer not to use either of the aforementioned dependency managers, you can integrate Windless into your project manually.


Usage

Code

import Windless

class ViewController: UIViewController {

    lazy var contentsView = UIView()
    
    var subView1 = UIView()
    var subView2 = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(contentsView)
        contentsView.addSubview(subView1)
        contentsView.addSubview(subView2)
        
        // start
        contentsView.windless
                .setupWindlessableViews([subView1, subView2])
                .start()
                
        // stop
        contentsView.windless.end()
    }

}

Storyboard, Xib

If you use Storyboard or xib, you only need to set the isWindlessable flag to true for the views you want to show as fake in the view inspector of the view, and you do not have to pass the view through the setupWindlessableViews method.

import Windless

class ViewController: UIViewController {

    @IBOutlet weak var contentsView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        contentsView.windless.start()
    }
}

Multiline

Depending on the lineHeight value and thespacing value, UILabel and UITextView will reconstruct the layout when the windless animation runs.

public protocol CanBeMultipleLines {

    var lineHeight: CGFloat { get set }

    var spacing: CGFloat { get set }
}
Configuration Result

Custom Options

There are several customizable options in Windless.

public class WindlessConfiguration {
    
    /// The direction of windless animation. Defaults to rightDiagonal.
    public var direction: WindlessDirection = .rightDiagonal
    
    /// The speed of windless animation. Defaults to 1.
    public var speed: Float = 1
    
    /// The duration of the fade used when windless begins. Defaults to 0.
    public var beginTime: CFTimeInterval = 0
    
    /// The time interval windless in seconds. Defaults to 4.
    public var duration: CFTimeInterval = 4
    
    /// The time interval between windless in seconds. Defaults to 2.
    public var pauseDuration: CFTimeInterval = 2
    
    /// gradient animation timingFunction default easeOut
    public var timingFuction: CAMediaTimingFunction = .easeOut
    
    /// gradient layer center color default .lightGray
    public var animationLayerColor: UIColor = .lightGray
    
    /// Mask layer background color default .groupTableViewBackground
    public var animationBackgroundColor: UIColor = .groupTableViewBackground
    
    /// The opacity of the content while it is windless. Defaults to 0.8.
    public var animationLayerOpacity: CGFloat = 0.8
}

To set the options, use the apply method as shown below.

import Windless

class ViewController: UIViewController {

    @IBOutlet weak var contentsView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        contentsView.windless
            .apply {
                $0.beginTime = 1
                $0.pauseDuration = 2
                $0.duration = 3
                $0.animationLayerOpacity = 0.5
            }
            .start()
    }
}

If you want to know more detailed usage, please refer to Example.

Looks

The isWindlessable value determines how the loading view looks. The images below show how the loading screen will look according to the isWindlessable value.

isWindlessable= 🌀

Configuration Result

Communication

  • If you found a bug, open an issue.
  • If you have a feature request, open an issue.
  • If you want to contribute, submit a pull request.

Credits

License

Windless is released under the MIT license. See LICENSE for details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].