/
loading-indicators.md
106 lines (67 loc) · 2.97 KB
/
loading-indicators.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
Loading indicators
==================
This page describes how to show loading indicators while waiting for the network.
Progress bar
------------
By default [late responses](/up:network:late) event will cause an animated
progress bar to appear at the top edge of the screen:
The progress bar can be disabled with `up.network.config.progressBar`.
### Styling the progress bar
The progress bar is implemented as a single `<up-progress-bar>` element.
Unpoly will automatically insert and remove this element as requests
are [late](/up:network:late) or [recovered](up:network:recover).
Its default appearance is a simple blue bar at the top edge of the screen,
mimicking the style of Chrome's native progress bar.
You may customize the style using CSS:
```css
up-progress-bar {
background-color: red;
}
```
### Controlling when the progress bar appears
Unpoly will show the progress bar when a request is taking longer to respond
than `up.network.config.badResponseTime`.
You may override this per-request by using the [`{ badResponseTime }`](/up.render#options.badResponseTime)
option or [`[up-bad-response-time]`](/a-up-follow#up-bad-response-time) attribute.
Requests that are loading in the background should never show the progress bar.
You may move a request into the background by passing
an [`{ background: true }`](/up.render#options.background) option
or setting an [`[up-background]`](/a-up-follow#up-background) attribute.
Requests from [preloading](/a-up-preload) or [polling](/up-poll) are automatically
marked as background requests.
Custom loading indicators
-------------------------
If you don't like the default progress bar, you can observe the `up:network:late`
and [`up:network:recover`](/up:network:recover) events to implement a custom
loading indicator that appears during long-running requests.
To implement a fully custom loading indicator instead,
observe the `up:network:late` and `up:network:recover` events.
To build a custom loading indicator, place an element like this in your application layout:
```html
<loading-indicator>Please wait!</loading-indicator>
```
Now add a [compiler](/up.compiler) that hides the `<loading-indicator>` element
while there are no long-running requests:
```js
// Disable the default progress bar
up.network.config.progressBar = false
up.compiler('loading-indicator', function(indicator) {
function show() { up.element.show(indicator) }
function hide() { up.element.hide(indicator) }
hide()
return [
up.on('up:network:late', show),
up.on('up:network:recover', hide)
]
})
```
Styling loading elements
------------------------
Unpoly adds CSS classes to fragments while they are loading over the network.
You may style these classes to provide instant feedback to user interactions.
See [Navigation feedback](/up.feedback) for details.
Signaling severe network problems
----------------------------------
See [Handling network issues](/network-issues).
@page loading-indicators