https://github.com/kyle-west/element-skeleton
Like a loading spinner, but visually more satisfying and dynamic. See the demo:
https://github.com/kyle-west/element-skeleton
Last synced: 3 months ago
JSON representation
Like a loading spinner, but visually more satisfying and dynamic. See the demo:
- Host: GitHub
- URL: https://github.com/kyle-west/element-skeleton
- Owner: kyle-west
- Created: 2018-06-15T17:32:52.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-22T17:06:28.000Z (almost 7 years ago)
- Last Synced: 2025-02-10T04:58:03.290Z (4 months ago)
- Language: HTML
- Homepage: https://kyle-west.github.io/element-skeleton/demo.html
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# element-skeleton
`element-skeleton` serves the same purpose as a loading spinner, only with more
customization. The purpose of this library is to provide a simple, pulsating style
to any empty DOM element - indicating that content is loading. Once content is
populated to that element, the skeleton will go away.
```html
Will not show a skeleton
```
Will not show a skeleton
This library is intended to be extremely light-weight, and so there are only a
few basic classes provided to give a few general shapes you might need to
serve as a styling base.
# Installing
A regular `` stylesheet will work for most applications.
```html
```
If you need to include `element-skeleton` in a Web Component, Polymer Element,
or template, use the following. (Note the `.html` instead of `.css` in the filename)
```html
...
...
```
# Out-of-the-box Classes
Use the following classes in combination with your own CSS to size and shape
things to you need.
```html
```
# Use DOM Elements to size things
`element-skeleton` uses `1em` for the height size, this way it matches whatever
element you put it on.
```html
```
# Changing Colors
Color can be changed by changing the background like in the example. Unfortunately changing
the color often discards the `background-size` property, so you have to restate
it. By default we reccomend `background-size: 300% 300%;`.
```html
*[element-skeleton]:empty.red {
background: linear-gradient(130deg, red, white);
background-size: 300% 300%;
}
```
*[element-skeleton]:empty.red {
background: linear-gradient(130deg, red, white);
background-size: 300% 300%;
}