locked
increase height of indeterminate progress dot size

Answers

  • 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.


    Thursday, March 6, 2014 4:57 PM

All replies

  • 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.


    Thursday, March 6, 2014 4:57 PM
  • thanks u so much kraig
    Friday, March 7, 2014 4:16 AM