Skeleton

The shape of what is coming, so nothing jumps when it arrives. It never spins.

  • kit.skeleton()
  • 322 B of CSS · 7 rules
  • kit.css
  • No script needed

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.skeleton({ kind: 'row', count: 3 });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.skeleton({ kind: 'row', count: 3 });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 689 B
<div class="ovk-skels ovk-skels-row" role="status" aria-busy="true" aria-label="Loading"><div class="ovk-skel-row"><span class="ovk-skel ovk-skel-avatar"></span><span class="ovk-skel-lines"><span class="ovk-skel ovk-skel-l1"></span><span class="ovk-skel ovk-skel-l2"></span></span></div><div class="ovk-skel-row"><span class="ovk-skel ovk-skel-avatar"></span><span class="ovk-skel-lines"><span class="ovk-skel ovk-skel-l1"></span><span class="ovk-skel ovk-skel-l2"></span></span></div><div class="ovk-skel-row"><span class="ovk-skel ovk-skel-avatar"></span><span class="ovk-skel-lines"><span class="ovk-skel ovk-skel-l1"></span><span class="ovk-skel ovk-skel-l2"></span></span></div></div>

What it weighs

Its own rules are 731 B, 322 B as sent: 2% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.