Skip to content

Instantly share code, notes, and snippets.

@ennjoy

ennjoy/swert-content-loader.html

Last active January 10, 2022 14:31
Show Gist options
  • Save ennjoy/a2f901b56679a7724103632ae052c31d to your computer and use it in GitHub Desktop.
Save ennjoy/a2f901b56679a7724103632ae052c31d to your computer and use it in GitHub Desktop.
Download ZIP
Skeleton loader IVinete
Raw
swert-content-loader.html
<!-- Weather -->
<div class="placeload weather-widget-placeload">
<div class="header">
<div class="inner-wrap">
<div class="img loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="body">
<div class="inner-wrap">
<div class="rect loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
<!-- Birhday -->
<div class="placeload mini-widget-placeload">
<div class="body">
<div class="inner-wrap">
<div class="img loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="button-shape loads"></div>
</div>
</div>
</div>
<!-- Jobs -->
<div class="placeload mini-widget-placeload">
<div class="body">
<div class="inner-wrap">
<div class="img loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="button-shape loads"></div>
</div>
</div>
</div>
<!-- LatestActivity -->
<div class="placeload list-placeload">
<div class="header">
<div class="content-shape loads"></div>
</div>
<div class="body">
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<!-- Pages Invites -->
<div class="placeload list-placeload">
<div class="header">
<div class="content-shape loads"></div>
</div>
<div class="body">
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<!-- Publish -->
<div class="placeload compose-placeload">
<div class="header">
<div class="content-shape is-lg loads"></div>
<div class="content-shape is-lg loads"></div>
<div class="content-shape is-lg loads"></div>
</div>
<div class="body">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
<!-- Questions Menu -->
<div class="placeload is-bold questions-menu-placeload">
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<!-- Recommended Pages -->
<div class="placeload list-placeload">
<div class="header">
<div class="content-shape loads"></div>
</div>
<div class="body">
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<!-- Related Pages -->
<div class="placeload list-placeload">
<div class="header">
<div class="content-shape loads"></div>
</div>
<div class="body">
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<!-- Stories -->
<div class="placeload stories-placeload">
<div class="header">
<div class="content-shape loads"></div>
</div>
<div class="body">
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<!-- Suggested Friends -->
<div class="placeload list-placeload">
<div class="header">
<div class="content-shape loads"></div>
</div>
<div class="body">
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="flex-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<!-- Wall -->
<div class="placeload post-placeload">
<div class="header">
<div class="img loads"></div>
<div class="header-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="image-placeholder loads"></div>
<div class="placeholder-footer">
<div class="footer-block">
<div class="img loads"></div>
<div class="inner-wrap">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<!-- Categories -->
<div class="placeload is-bold questions-categories-placeload">
<div class="tile is-ancestor categories-tile-grid">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<div class="tile is-child is-tile-placeload">
<div class="img loads"></div>
<div class="placeload-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="tile is-child is-tile-placeload">
<div class="img loads"></div>
<div class="placeload-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
<div class="tile is-parent is-vertical">
<div class="tile is-child is-tile-placeload">
<div class="img loads"></div>
<div class="placeload-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="tile is-child is-tile-placeload">
<div class="img loads"></div>
<div class="placeload-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child is-tile-placeload is-card">
<div class="img loads"></div>
<div class="placeload-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
<div class="tile is-parent is-vertical">
<div class="tile is-child is-tile-placeload">
<div class="img loads"></div>
<div class="placeload-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
<div class="tile is-child is-tile-placeload">
<div class="img loads"></div>
<div class="placeload-content">
<div class="content-shape loads"></div>
<div class="content-shape loads"></div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment