{"id":21065050,"url":"https://github.com/prolificinteractive/shimmerblocks","last_synced_at":"2025-05-16T02:33:02.499Z","repository":{"id":62455296,"uuid":"143883529","full_name":"prolificinteractive/ShimmerBlocks","owner":"prolificinteractive","description":"Add blocked shimmering views to your view components.","archived":false,"fork":false,"pushed_at":"2019-04-30T16:59:00.000Z","size":2798,"stargazers_count":5,"open_issues_count":1,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-31T15:53:19.497Z","etag":null,"topics":["loading","loading-animation","loading-spinner","shimmer"],"latest_commit_sha":null,"homepage":null,"language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prolificinteractive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-07T14:17:00.000Z","updated_at":"2022-12-13T05:27:21.000Z","dependencies_parsed_at":"2022-11-01T23:46:20.646Z","dependency_job_id":null,"html_url":"https://github.com/prolificinteractive/ShimmerBlocks","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolificinteractive%2FShimmerBlocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolificinteractive%2FShimmerBlocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolificinteractive%2FShimmerBlocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolificinteractive%2FShimmerBlocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prolificinteractive","download_url":"https://codeload.github.com/prolificinteractive/ShimmerBlocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225401820,"owners_count":17468809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loading","loading-animation","loading-spinner","shimmer"],"created_at":"2024-11-19T17:53:18.321Z","updated_at":"2024-11-19T17:53:18.971Z","avatar_url":"https://github.com/prolificinteractive.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ShimmerBlocks\n\n[![Travis build status](https://img.shields.io/travis/prolificinteractive/ShimmerBlocks.svg?style=flat-square)](https://travis-ci.org/prolificinteractive/ShimmerBlocks)\n[![Cocoapods Compatible](https://img.shields.io/cocoapods/v/ShimmerBlocks.svg?style=flat-square)](https://img.shields.io/cocoapods/v/ShimmerBlocks.svg)\n[![Platform](https://img.shields.io/cocoapods/p/ShimmerBlocks.svg?style=flat-square)](http://cocoadocs.org/docsets/ShimmerBlocks)\n[![Docs](https://img.shields.io/cocoapods/metrics/doc-percent/ShimmerBlocks.svg?style=flat-square)](http://cocoadocs.org/docsets/ShimmerBlocks)\n\nAdd blocked shimmering views to your view components. \n\n![shimmerblocks.gif](Images/shimmerblocks.gif)\n\n## Why we built this\n\nInspiration for this project came from Facebook's [Shimmer](https://github.com/facebook/Shimmer) pod which adds a simple shimmering effect to any view. The shimmer effect is typically seen in loading states in production apps as a blocked view. Facebook's Shimmer pod however doesn't easily allow us to add blocked views to an existing layout. In response to this issue we created ShimmerBlocks to easily add blocked shimmering views to an existing layout.\n\n## Requirements\n\n* iOS 9.0+\n\n## Installation\n\n### CocoaPods\n\nShimmerBlocks is available through [CocoaPods](http://cocoapods.org). To install\nit, simply add the following line to your Podfile:\n\n```ruby\npod 'ShimmerBlocks'\n```\n\n## Usage\n\n### 1. Setup the ShimmerContainer\n\nThe ShimmerContainer contains all of the ShimmerBlocks for a particular subview.\n\n```swift\npublic init(parentView: UIView?)\n```\n\nThe ShimmerContainer should be initialized with the `parentView` that contains the ShimmerContainer. We need the `parentView` to add the shimmerBlocks to. In our example the parent view is a `UITableViewCell`.\n\n\n\n```swift\npublic func applyShimmer(enable: Bool, with shimmerData: [ShimmerData])\n```\n\nShimmering views can start shimmering by passing `enable`, which indicates if the view is shimmering, and the `ShimmerData`.\n\n\n\n```swift\npublic static func generateShimmerView(image: UIImage? = nil, backgroundColor: UIColor)\n```\n\nIf you just need a singular `ShimmerBlock` a static function is provided to the `ShimmerContainer` that returns a `ShimmerView` with an optional image and the `backgroundColor` of the shimmer.\n\n\n\n### 2. Generating ShimmerData\n\nShimmerData is a model that contains the information on how the shimmer block should be applied to the subview. Below are the adjustable properties that the `ShimmerData` can be initialized with.\n\n```swift\n/// View to add shimmer overlay to.\npublic weak var view: UIView?\n```\n\nThe `view` the view of the `ShimmerData` is typically a UILabel or UIImage that needs to be blocked during the loading state.\n\n\n\n```swift\n/// Image to apply to the overlay instead of using a blocked section.\npublic let image: UIImage?\n```\n\nA custom image can be provided to show as a shimmering overlay instead of using the default shimmering block.\n\n\n\n```swift\n/// Background color of the overlay sections. Does not overlay the image.\npublic let backgroundColor: UIColor\n```\n\nThe background color of the shimmer can be customized per block. The default color is `UIColor.lightGray.withAlphaComponent(0.3)` \n\n\n\n```swift\n/// Sets the container view size to match the provided view's size.\npublic let matchViewDimensions: Bool\n```\n\nWhen sizing the height and width of the `ShimmerBlock` setting the `matchViewDimensions` to true will match the `ShimmerBlock` to the size of the given `UIView`.\n\n\n\n```swift\n/// Spacing between each section.\npublic let sectionSpacing: CGFloat\n\n/// Sections to display over the provided view.\npublic let sections: [ShimmerSection]\n```\n\nIf you need more variety to the size of the `ShimmerBlocks` we give you the option to set your own `ShimmerSections`. The `sectionSpacing` indicates the spacing between each individual section.\n\n\n\n### 3. Creating Custom ShimmerSections\n\n```swift\n/// Width of the shimmer section.\npublic let width: CGFloat\n\n/// Height of the shimmer section.\npublic let height: CGFloat\n```\n\nA `ShimmerSection` consists of a width and height that will be used to size the `ShimmerBlock` when the shimmer is applied. Each `ShimmerSection` will correlate to a single `ShimmerBlock`. \n\n\n\n```swift\npublic static func generate(minWidth: CGFloat,\n                            height: CGFloat,\n                            totalWidth: CGFloat,\n                            maxNumberOfSections: Int) -\u003e [ShimmerSection]\n```\n\nTo create a more custom look, `ShimmerSections` can be random generated with a few parameters. \n\n* `minWidth` is the minimum width that a `ShimmerBlock` should be when the size is generated. \n\n* `height` is the desired height of the `ShimmerBlock`. \n\n* `totalWidth` is the total width range that the random generator function should try to fill up.\n\n* `maxNumberOfSections` is the maximum number of `ShimmerBlocks` that should be generated within the `totalWidth`. \n\n\n\n### Example Setup\n\nThe code below is the `UITableViewCell` this is used in the example project and the animation above.\n\n```swift\nimport UIKit\nimport ShimmerBlocks\n\nfinal class InfoTableViewCell: UITableViewCell {\n\n    @IBOutlet weak var infoImageView: UIImageView!\n    @IBOutlet weak var titleLabel: UILabel!\n    @IBOutlet weak var descriptionLabel: UILabel!\n\n    private lazy var shimmerContainer = ShimmerContainer(parentView: self)\n\n    private lazy var shimmerData: [ShimmerData] = {\n        let titleSections = ShimmerSection.generate(minWidth: 50, \n                                                    height: 21, \n                                                    totalWidth: 150, \n                                                    maxNumberOfSections: 3)\n      \n        return [ShimmerData(titleLabel, sectionSpacing: 6, sections: titleSections),\n                ShimmerData(infoImageView, matchViewDimensions: true),\n                ShimmerData(descriptionLabel, matchViewDimensions: true)]\n    }()\n\n    func isLoading(_ loading: Bool) {\n        shimmerContainer.applyShimmer(enable: loading, with: shimmerData)\n    }\n\n}\n```\n\n## Contributing to ShimmerBlocks\n\nTo report a bug or enhancement request, feel free to file an issue under the respective heading.\n\nIf you wish to contribute to the project, fork this repo and submit a pull request. Code contributions should follow the standards specified in the [Prolific Swift Style Guide](https://github.com/prolificinteractive/swift-style-guide).\n\n## License\n\n![prolific](https://s3.amazonaws.com/prolificsitestaging/logos/Prolific_Logo_Full_Color.png)\n\nCopyright (c) 2017 Prolific Interactive\n\nShimmerBlocks is maintained and sponsored by Prolific Interactive. It may be redistributed under the terms specified in the [LICENSE] file.\n\n[LICENSE]: ./LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprolificinteractive%2Fshimmerblocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprolificinteractive%2Fshimmerblocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprolificinteractive%2Fshimmerblocks/lists"}