mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 15:25:26 +00:00
18aa2470a0
* fix accesibility and keyboard navigation issues in examples * fix review comments * remove redundant aria attributes, remove redundant autofocus * rework progress bar demo's accesibility * rework tabs HATEOS example to be more ARIA compliant * rework tabs _hyperscript example to be ARIA compliant
1.3 KiB
1.3 KiB
+++ title = "Lazy Loading" template = "demo.html" +++
This example shows how to lazily load an element on a page. We start with an initial state that looks like this:
<div hx-get="/graph" hx-trigger="load">
<img alt="Result loading..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>
Which shows a progress indicator as we are loading the graph. The graph is then loaded and faded gently into view via a settling CSS transition:
.htmx-settling img {
opacity: 0;
}
img {
transition: opacity 300ms ease-in;
}
{{ demoenv() }}