Skeleton Loader

Ask us anything
1

Hi there!

Is it possible to include this in a weweb app?

https://skeletonreact.com/

On my end the loading animation does not work, I used the SVG inside an HTML Element…

Thank you!

3 Likes
2

This interests me too. I’ll subscribe

2 Likes
3

Humm not sure about importing the svg directly, but you can recreate a skeleton loader using CSS animations!

2 Likes
4

Can you tell me how you did this?

1 Like
5

I made a quick video about how I created it!

As a bonus note, at the end you can make it as a WeWeb component for better reusability

10 Likes
6

Thank you so much, really awesome work!!! :tada:

1 Like
7

@jptrinh Slick! What are the pros/cons of doing it this way versus predominantly with CSS. I’m not much of a coder so you’ve got me wondering if the tactic I found online has limitations:

<style>
.skeleton-loader {
  border-radius:16px;
  background-color: #e5e5e5 50%; /* Updated to the primary color */
  background-image: linear-gradient(
    -85deg,
    #e5e5e5 8%,
    #f5f5f5 20%,
    #f5f5f5 24%,
    #e5e5e5 32%
  );
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

@keyframes shine {  to {    background-position-x: -200%;  }} 
</style>
1 Like
8

Hi @archenia_jsanchez !
There are many ways of building a skeleton!
Your snippet seems to be working fine also :slight_smile: Maybe better since you don’t need an extra div actually.