{"id":13714999,"url":"https://github.com/zehfernandes/framer-loadingplaceholder","last_synced_at":"2025-06-25T05:08:38.180Z","repository":{"id":147063105,"uuid":"88907750","full_name":"zehfernandes/framer-loadingplaceholder","owner":"zehfernandes","description":"Instantly creates Loading placeholder based on your layer style.","archived":false,"fork":false,"pushed_at":"2020-02-12T16:08:11.000Z","size":1703,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-30T22:38:50.271Z","etag":null,"topics":["framer","loading-animations","placeholder"],"latest_commit_sha":null,"homepage":"https://framer.cloud/NApWd/","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zehfernandes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-20T20:29:09.000Z","updated_at":"2020-04-03T11:13:03.000Z","dependencies_parsed_at":"2023-09-09T08:31:03.076Z","dependency_job_id":null,"html_url":"https://github.com/zehfernandes/framer-loadingplaceholder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zehfernandes/framer-loadingplaceholder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehfernandes%2Fframer-loadingplaceholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehfernandes%2Fframer-loadingplaceholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehfernandes%2Fframer-loadingplaceholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehfernandes%2Fframer-loadingplaceholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zehfernandes","download_url":"https://codeload.github.com/zehfernandes/framer-loadingplaceholder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehfernandes%2Fframer-loadingplaceholder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261808063,"owners_count":23212692,"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":["framer","loading-animations","placeholder"],"created_at":"2024-08-03T00:00:52.848Z","updated_at":"2025-06-25T05:08:38.140Z","avatar_url":"https://github.com/zehfernandes.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# Loading Placeholder\n\nChoreography and free of side effects.\n\n![https://framer.cloud/NApWd/](./image-example.png)\n\n[See the demo](https://framer.cloud/NApWd/)\n\n## How to use it\n\n### Instalation\n\n1. Download LoadingPlaceholder.coffee to your project's `/modules` directory\n2. Add `Placeholder = require 'LoadingPlaceholder'` to the top of your code\n\n### Start\n\nApply to any layer you want to show a placeholder.\n\n```coffee\nPlaceholder = require 'LoadingPlaceholder'\n\nYOURLAYER.placeholder()\n```\n\nYou can set the placeholder to the parent layer and specify the `depth` property to replace just the children layers. For example:\n\n```coffee\nCardHeader = new Layer\n  name: \"Card Header\"\n\navatar = new Layer\n  name: \"Avatar\"\n  parent: CardHeader\n\nname = new Layer\n  name: \"Name\"\n  parent: CardHeader\n\nCardHeader.placeholder\n    depth: 1\n```\n\nIn that example the Layers `avatar` and `name` recive a placeholder.\n\n### Load the content\n\nTo show the content and trigger the entrance animation use the method `loaded()`:\n\n```coffee\n# You can trigger the animation to a particular layer\nYOURLAYER.loaded()\n\n# Or to all descendants layers that have a placeholder\nCardHeader.loaded()\n```\n\nAnother method is the shortcut `loadedall()`. It will search for all placeholder layers in current stage\n\n```coffee\nPlaceholder = require 'LoadingPlaceholder'\nplaceholder.loadedAll()\n```\n\n## Overwrite default elements\n\nIf you want overwrite the deafult Placeholder Element or the Default Animation you can use this methods:\n\n```coffee\nPlaceholder = require 'LoadingPlaceholder'\n\n# Just for the specific layer\nYOURLAYER.placeholder\n    customElement: [function]\n    customAnimation: [function]\n\n# Apply global to all the placeholders\nPlaceholder.defaultElement = [function]\nPlaceholder.defaultAnimation = [function]\n```\n\nOverwrite using this follow functions:\n\n```coffee\n# Element\ncustomPlaceholder = (layer) -\u003e\n  newPlaceholder = new Layer\n    width: layer.width # var layer is the reference to your content layer\n    height: layer.height\n\n  return newPlaceholder\n\n# Animation\ncustonAnimation = (layer, placeholder, delay) -\u003e\n  # Rewrite the states:\n  # layer.states.placeholderIn\n  # layer.states.placeholderOut\n  # placeholder.states.placeholderOut\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzehfernandes%2Fframer-loadingplaceholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzehfernandes%2Fframer-loadingplaceholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzehfernandes%2Fframer-loadingplaceholder/lists"}