Change the size of a <progress> element?

Question

How do you change the size of a <progress> bar? I would like one that appears in the middle of the screen and is a lot larger than usual, for a loading bar.

Answer 1

How do you change the size of a <progress> bar?

The progress element is displayed by default as an inline-block so you can assign it a width and height using CSS in your Story Stylesheet area. The following example changes the default width and height of all progress elements.

progress {
	width: 20em;
	height: 3em;
}

I would like one that appears in the middle of the screen...

There are two basic methods you can use to centre a progress element.

1. Wrap it within block based element that has a text-align: center property.

1a. The HTML within the Passage:

Some progress:
<div class="centered"><progress max="100" value="66">66%</progress></div>

1b. The CSS to centre the above HTML, goes in the Story Stylesheet area.

.centered {
	width: 100%;
	text-align: center;
}
progress {
	width: 20em;
	height: 3em;
}

2. Convert the progress element to be block based and then use an auto left & right margin to centre it.

2a. The HTML within the Passage:

Some more progress:
<progress max="100" value="66">66%</progress>

2b. The CSS to centre the above HTML.

progress {
	display: block;
	margin: 0 auto;
	width: 20em;
	height: 3em;
}