Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/crutchcorn/sync-skeleton. Vanilla CSS Synchronized Skeleton Loaders sync-skeleton.dev
css loading-animations shimmer-effect skeleton-loading skelton-css
Something went wrong. Try again.
2.3 kB · 61 lines
HTML
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" />
<title>Sync Skeleton Simple Example App</title> <link rel="stylesheet" href="node_modules/sync-skeleton/skeleton.css" /> <link rel="stylesheet" href="./index.css" /> </head> <body> <div style="display: flex; flex-direction: column; gap: 1rem"> <div> <div id="card-1" class="container"> <div class="loading-skeleton image"></div> <div class="content"> <div class="loading-skeleton lineHeight lineOne"> lorem ipsum dolor sit amet </div> <div class="loading-skeleton lineHeight lineTwo"></div> <footer class="footer"> <div class="loading-skeleton circle"></div> <div class="loading-skeleton lineHeight lineFour"></div> </footer> </div> </div> </div> <div style="margin-left: 10rem"> <div id="card-2" class="container dark"> <div class="loading-skeleton image"></div> <div class="content"> <div class="loading-skeleton lineHeight lineOne"> lorem ipsum dolor sit amet </div> <div class="loading-skeleton lineHeight lineTwo"></div> <footer class="footer"> <div class="loading-skeleton circle"></div> <div class="loading-skeleton lineHeight lineFour"></div> </footer> </div> </div> </div> <div style="margin-left: 20rem"> <div id="card-3" class="container orangePurpleLoader"> <div class="loading-skeleton image"></div> <div class="content"> <div class="loading-skeleton lineHeight lineOne"> lorem ipsum dolor sit amet </div> <div class="loading-skeleton lineHeight lineTwo"></div> <footer class="footer"> <div class="loading-skeleton circle"></div> <div class="loading-skeleton lineHeight lineFour"></div> </footer> </div> </div> </div> </div> </body></html>