All Projects → Collaborne → animated-content-placeholder

Collaborne / animated-content-placeholder

Licence: Apache-2.0 license
Animated placeholder used while loading elements on the page (Polymer)

Programming Languages

HTML
75241 projects

Projects that are alternatives of or similar to animated-content-placeholder

polymer-ui-router
UI-router wrapper for Web Components
Stars: ✭ 24 (+33.33%)
Mutual labels:  polymer
nuxeo-elements
Nuxeo web components
Stars: ✭ 23 (+27.78%)
Mutual labels:  polymer
MaterialDjango
🖌️ Polymer Paper-UI widgets, vendored polymer, and tools for django
Stars: ✭ 27 (+50%)
Mutual labels:  polymer
file-fire
Simple way to upload and download files from Firebase Storage.
Stars: ✭ 13 (-27.78%)
Mutual labels:  polymer
chat-window
A simple and flexible chat window for listing messages.
Stars: ✭ 27 (+50%)
Mutual labels:  polymer
order-management
Simple Order Management web application built using NodeJS, ExpressJS, Polymer, MongoDB
Stars: ✭ 33 (+83.33%)
Mutual labels:  polymer
mdgrad
Pytorch differentiable molecular dynamics
Stars: ✭ 127 (+605.56%)
Mutual labels:  polymer
vaadin-context-menu
The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
Stars: ✭ 26 (+44.44%)
Mutual labels:  polymer
skeleton-carousel
Carousel component. Horizontal and vertical swipe navigation
Stars: ✭ 31 (+72.22%)
Mutual labels:  polymer
auth-ajax
Auth token handling for Polymer
Stars: ✭ 15 (-16.67%)
Mutual labels:  polymer
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (+283.33%)
Mutual labels:  polymer
paper-weather
☀️🌧 Material design weather element inspired by google weather
Stars: ✭ 14 (-22.22%)
Mutual labels:  polymer
paper-countries
Select Dropdown with list of countries with flags and autocomplete
Stars: ✭ 16 (-11.11%)
Mutual labels:  polymer
scheduler-component
A Web Component wrapper for FullCalendar library that uses Polymer version 2.0 and ES6.
Stars: ✭ 24 (+33.33%)
Mutual labels:  polymer
awesome-polymer
A collection of awesome Polymer resources.
Stars: ✭ 43 (+138.89%)
Mutual labels:  polymer
x-play
🎼 🎶 🎵 🎹 🎻 🎷 🎺 🎸
Stars: ✭ 23 (+27.78%)
Mutual labels:  polymer
polymer-2-carousel
Codelab
Stars: ✭ 18 (+0%)
Mutual labels:  polymer
plotly-plot
Polymer element for the plotly.js library
Stars: ✭ 21 (+16.67%)
Mutual labels:  polymer
multiselect-combo-box
A multi select combo box web component based on Polymer and the vaadin-combo-box
Stars: ✭ 41 (+127.78%)
Mutual labels:  polymer
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (+16.67%)
Mutual labels:  polymer

animated-content-placeholder Bower version Travis state Published on webcomponents.org

Published on Vaadin  Directory Stars on vaadin.com/directory

Animated placeholder used while loading elements on the page. This element is built for Polymer.

This element is based on the deconstruction of the Facebook placeholders by George Phillips.

It 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.

To use the element:

bower install animated-content-placeholder

<animated-content-placeholder>
<div class="background-masker header-top"></div>
  <div class="background-masker header-left"></div>
  <div class="background-masker header-bottom"></div>
  <div class="background-masker subheader-left"></div>
  <div class="background-masker subheader-right"></div>
  <div class="background-masker subheader-bottom"></div>
</animated-content-placeholder>

Styling

The following custom properties and mixins are available for styling:

Custom property Description Default
--animation-height Height of the animated background

License

This software is licensed under the Apache 2 license, quoted below.

Copyright 2011-2017 Collaborne B.V. <http://github.com/Collaborne/>

Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
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].