Edit this page

up.feedback .up-active
HTML selector

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:

Action Origin element
Submitting a form with submit button The submit button
Submitting a form by pressing Return The focused field
Following a link The link
Preloading a link The link
Validating a field The changed field
Auto-submitting a field The changed field

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:

a.up-active,
input[type=submit].up-active,
button[type=submit].up-active  {
  outline: 2px solid blue;
}

If you're looking to style the targeted fragment, use the .up-loading class instead.