---
name: "[up-placeholder]"
area: "API"
kind: "HTML attribute"
parent: "up.status module"
visibility: "experimental"
url: "https://unpoly.com/api/up-placeholder"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.status module](https://unpoly.com/api/up.status.md)</nav>

# [up-placeholder]

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

Links or forms can define a [placeholder](https://unpoly.com/learn/placeholders.md) that will be shown within the targeted fragment while loading content from the server.

All other children of the targeted fragment will be hidden while the request is in flight. When the request [ends](https://unpoly.com/api/up.Request.prototype.ended.md) for any reason, the placeholder will be removed and the original fragment children will be shown again.

When [targeting multiple fragments](https://unpoly.com/learn/targeting-fragments.md#multiple), the placeholder will be shown in the first fragment.

<nav aria-label="Guides">

- [Learn: Placeholders](https://unpoly.com/learn/placeholders.md)

</nav>

## Example {#example}

This link will show the message _"Loading…"_ within `#target` while its request is loading:

```html
<a href="/path" up-target="#target" up-placeholder="<p>Loading…</p>">Show story</a>

<div id="target">
  Old content
</div>
```

See [Placeholders](https://unpoly.com/learn/placeholders.md) for details and elaborate examples.

---

## Modifying attributes {#attributes}

### up-placeholder {#up-placeholder}

(required)

The HTML string for the placeholder.

You can also [use a template](https://unpoly.com/learn/placeholders.md#from-template) by setting this attribute to a CSS selector matching a `<template>` or `<script>` element.