increase height of indeterminate progress dot size

Question

hi,

   how to increase size of the dot in indeteminate progress bar,i tried with height attribute but the dot size can't be increase

Answer 1

It is possible, but limited.

First, add class="win-large" to the progress element.

Then style the height to a value up to 7px, which in my tests seems to be the internal size limit.

I tested this with these elements:

4 px <progress id="test4" class="win-large"></progress>
5 px <progress id="test5" class="win-large"></progress>
6 px <progress id="test6" class="win-large"></progress>
7 px <progress id="test7" class="win-large"></progress>
8 px <progress id="test8" class="win-large"></progress>
9 px <progress id="test9" class="win-large"></progress>
10px <progress id="test10" class="win-large"></progress>

And these styles:

#test4 {
    height: 4px;
}

#test5 {
    height: 5px;
}

#test6 {
    height: 6px;
}

#test7 {
    height: 7px;
}

#test8 {
    height: 8px;
}

#test9 {
    height: 9px;
}
#test10 {
    height: 10px;
}

With these results, showing the 7px cap:

Kraig

Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8) also available.

Answer 2

thanks u so much kraig