{"id":18347882,"url":"https://github.com/collaborne/animated-content-placeholder","last_synced_at":"2025-09-15T07:32:55.839Z","repository":{"id":57741163,"uuid":"95045029","full_name":"Collaborne/animated-content-placeholder","owner":"Collaborne","description":"Animated placeholder used while loading elements on the page (Polymer)","archived":false,"fork":false,"pushed_at":"2018-11-21T12:52:40.000Z","size":23,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-15T15:07:22.464Z","etag":null,"topics":["animation","polymer"],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/Collaborne/animated-content-placeholder","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Collaborne.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":"2017-06-21T20:50:28.000Z","updated_at":"2023-07-25T07:20:51.000Z","dependencies_parsed_at":"2022-08-30T16:11:28.607Z","dependency_job_id":null,"html_url":"https://github.com/Collaborne/animated-content-placeholder","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fanimated-content-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fanimated-content-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fanimated-content-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Collaborne%2Fanimated-content-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Collaborne","download_url":"https://codeload.github.com/Collaborne/animated-content-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248127999,"owners_count":21052331,"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":["animation","polymer"],"created_at":"2024-11-05T21:15:28.352Z","updated_at":"2025-04-09T23:26:38.398Z","avatar_url":"https://github.com/Collaborne.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# animated-content-placeholder [![Bower version](https://badge.fury.io/bo/animated-content-placeholder.svg)](http://badge.fury.io/bo/animated-content-placeholder) [![Travis state](https://travis-ci.org/Collaborne/animated-content-placeholder.svg?branch=master)](https://travis-ci.org/Collaborne/animated-content-placeholder) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Collaborne/animated-content-placeholder)\n\n[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/Collaborneanimated-content-placeholder)\n[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Collaborneanimated-content-placeholder.svg)](https://vaadin.com/directory/component/Collaborneanimated-content-placeholder)\n\nAnimated placeholder used while loading elements on the page. This element is built for [Polymer](https://www.polymer-project.org).\n\nThis element is based on the [deconstruction of the Facebook placeholders](http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html) by George Phillips.\n\nIt provides a basic animation on the background, and the possibility of overlaying it with maskers to create the illusion of a loading element on the page.\n\nTo use the element:\n\n`bower install animated-content-placeholder`\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003clink rel=\"import\" href=\"animated-content-placeholder.html\"\u003e\n    \u003ccustom-style\u003e\n      \u003cstyle is=\"custom-style\"\u003e\n        .background-masker {\n          background: #fff;\n          position: absolute;\n        }\n\n        .background-masker.header-top {\n          top: 0;\n          left: 48px;\n          right: 0;\n          height: 4px;\n        }\n\n        .background-masker.header-left {\n          top: 4px;\n          left: 48px;\n          height: 16px;\n          width: 8px;\n        }\n\n        .background-masker.header-bottom {\n          top: 20px;\n          left: 48px;\n          right: 0;\n          height: 10px;\n        }\n\n        .background-masker.subheader-left {\n          top: 30px;\n          left: 48px;\n          height: 12px;\n          width: 8px;\n        }\n\n        .background-masker.subheader-right {\n          top: 30px;\n          left: 200px;\n          right: 0;\n          height: 12px;\n        }\n\n        .background-masker.subheader-bottom {\n          top: 42px;\n          left: 48px;\n          right: 0;\n          height: 8px;\n        }\n      \u003c/style\u003e\n    \u003c/custom-style\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n```html\n\u003canimated-content-placeholder\u003e\n\u003cdiv class=\"background-masker header-top\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"background-masker header-left\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"background-masker header-bottom\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"background-masker subheader-left\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"background-masker subheader-right\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"background-masker subheader-bottom\"\u003e\u003c/div\u003e\n\u003c/animated-content-placeholder\u003e\n```\n\n### Styling\nThe following custom properties and mixins are available for styling:\n\nCustom property | Description | Default\n--------------- | ----------- | ---------\n`--animation-height` | Height of the animated background |\n\n## License\n\n    This software is licensed under the Apache 2 license, quoted below.\n\n    Copyright 2011-2017 Collaborne B.V. \u003chttp://github.com/Collaborne/\u003e\n\n    Licensed under the Apache License, Version 2.0 (the \"License\"); you may not\n    use this file except in compliance with the License. You may obtain a copy of\n    the License at\n\n        http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n    License for the specific language governing permissions and limitations under\n    the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollaborne%2Fanimated-content-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcollaborne%2Fanimated-content-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollaborne%2Fanimated-content-placeholder/lists"}