UIBootstrap components
Didactika theme v0.1Placeholders5.3+
Grey shapes that stand in for content while it loads.
Placeholders (also called skeletons) show the shape of what is coming, so the page does not jump when it arrives. Use them for content that takes more than a moment.
When to use it
Use it
- Match the shape and size of the real content.
- Use the glow animation lightly.
- Mark the placeholder block
aria-hiddenand announce the loading state once.
Don't
- Use them for waits under 300 ms.
- Leave them after an error.
- Mix them with real content in the same block.
Anatomy
Blocks (placeholder) sized with the grid (col-6) inside the element they replace, with an optional animation (placeholder-glow, placeholder-wave).
Variants and states
Placeholder card
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Placeholder × shape | The same shape as the real content: a title line, three text lines, a button. |
| Glow × wave | Glow for a card, wave for a long list; both stop under reduced motion. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The blocks are rounded and quiet | They suggest content without pretending to be it, and nothing jumps when it arrives. |
Classes
| Class | What it does |
|---|---|
placeholder |
A grey block |
col-* |
Its width |
placeholder-glow, placeholder-wave |
Animation of the group |
placeholder-xs, placeholder-sm, placeholder-lg |
Height |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.
Accessibility
- Hide the placeholders from assistive technology and announce the loading state with a status message.
- Respect reduced motion: no animation.