While rendering with navigation feedback, the .up-active class is added to the origin
element that triggered the change.
The .up-active class is removed once the new content has been loaded and rendered.
Example
We have a link:
<a href="/foo" up-follow>Foo</a>
When the user clicks on the link, the link is assigned the .up-active class
while the request is loading:
<a href="/foo" up-follow class="up-active">Foo</a>
Once the link destination has loaded and rendered, the .up-active class
is removed and the .up-current class is added:
<a href="/foo" up-follow class="up-current" aria-current="page">Foo</a>
Note
Links do not need an [up-nav] container to get the .up-active class while loading.
Default origins
The origin element is set automatically for many actions, for example:
When rendering from JavaScript, you may set the origin by passing an
{ origin } option.
Styling active elements
To improve the perceived responsiveness of your user interface,
consider highlighting active links and submit buttons in your CSS:
.up-active:is(a, [up-follow], input[type=submit], button[type=submit], button:not([type])) {
outline: 2px solid blue;
}
If you're looking to style the targeted fragment, use the .up-loading class
instead.
