Ember-text-placeholder NPM

ember-text-placeholder

The goal of ember-text-placeholder is to provide a mechanism for placing placeholder text while an app loads. The effect is inspired by Facebook.

Inspiration

Usage

`{{text-placeholder}}`

The default usage is {{text-placeholder}}. This uses the unicode Upper Half Block (▀) and a Zero Width Space to create a solid line that text wraps.

{{text-placeholder}} supports a width property which may be a string short|medium|long, or a number.

size parameter as string: {{text-placeholder size='long'}}

size parameter as number: {{text-placeholder size=25}}

Also supports a varLength boolean property. If true, the size parameter functions as max-size and the string length is random. When using varLength, you may also use min to specify the shortest the random string length can be.

varLength parameter: {{text-placeholder size='long' varLength=true}}

You can override the default character array by passing the array helper to characters, {{text-placeholder varLength=true characters=(array "🙌" " ")}}. The final length of the string is determined by recursively joining the characters array a size number of times.

default usage: {{rect-placeholder}}

with height and width properties: {{rect-placeholder height=25 width=100}}

with radiusX and radiusY properties: {{rect-placeholder radiusX=20 radiusY=20}}

height, width, radiusX, and radiusY are all measured in pixels.

Styles

.TextPlaceholder {
  animation: ScrollingBackground 3s linear infinite;
  background: linear-gradient(270deg, #333 0%, #999 20%, #333 40%, #999 60%, #333 80%, #999 100%);
  -webkit-background-clip: text;
  background-size: 500% 100%;
  font-family: monospace;
  -webkit-text-fill-color: transparent;
}
@keyframes ScrollingBackground {
  0% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}