HTML and CSS Reference
You use indeterminate tasks when you don't know how long a task will take to complete
but still want to show users that some work is occurring and that they should wait. You still
use the <progress> element but remove the value attribute. When you don't specify the value
attribute, the browser can infer that the <progress> element represents an indeterminate
task. This might be useful for data received from a service where you have no control over or
knowledge of how quickly the request will complete or how large the request results will be.
The following HTML5 markup demonstrates an indeterminate task:
<p>Data download is in progress, please wait patiently:</p>
This code produces a progress display like the one shown in Figure 1-11:
FIGURE 1-11 Showing indeterminate progress by using moving dots to demonstrate that work is occurring
In Figure 1-11, the blue dots replace the progress bar from the previous determinate
example. This visual change to the progress indicator occurred by simply removing the value
attribute from the <progress> element. In actuality, the dots are animated, as you would see
if you run the code in a browser.
With the <mark> element, you can easily highlight important information or any text you
want to emphasize. It has essentially the same function as a highlighter. By wrapping text in a
<mark> element and providing a background-color attribute to its style element, you can get
the desired highlight effect. The following HTML code demonstrates the <mark> element:
<p>Some very <mark style="background-color:red;">important</mark> information provided
Figure 1-12 shows the output of this HTML. The word “important” is highlighted as a result
of the <mark> element being placed around it.
FIGURE 1-12 The effect on text placed inside the <mark> element