SOURCE CODE: Uize.Widgets.ProgressBar.Css

<%@ required ('Uize.Widgets.CssUtil'); %>
<%
  var _cssUtil = Uize.Widgets.CssUtil;
%>
.`` {
  position: relative;
}

.`track`, .`trackBg`, .`trackFull`, .`trackEmpty`, .`statusText` {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.`trackBg` {
  background: #000 url(track-bg.gif) repeat-x left top;
}

.`trackFull` {
  background: #0f0;
  opacity: .55;
  filter: alpha(opacity=55);
}

.`trackEmpty` {
  background: #ddd;
  opacity: .2;
  filter: alpha(opacity=20);
}

.`statusText` {
  border-width: 1px;
  border-style: solid;
  border-color: #eee #666 #666 #eee;
  color: #eee;
  <%= _cssUtil.pseudoStroke ('rgba(0,0,0,.4)') %>
  text-align: center;
}

/*** different sizes ***/
<%
  var _sizes = Uize.Widgets.CssUtil.sizes;
%>
  .`tiny` {
    height: <%= _sizes.tiny.outer %>px;
  }
  .`tiny` .`statusText` {
    font-size: <%= _sizes.tiny.font %>px;
    line-height: 20px;
  }
                       
  .`small` {
    height: <%= _sizes.small.outer %>px;
  }
  .`small` .`statusText` {
    font-size: <%= _sizes.small.font %>px;
    line-height: 24px;
  }

  .`medium` {
    height: <%= _sizes.medium.outer %>px;
  }
  .`medium` .`statusText` {
    font-size: <%= _sizes.medium.font %>px;
    line-height: 34px;
    letter-spacing: 1px;
  }

  .`large` {
    height: <%= _sizes.large.outer %>px;
  }
  .`large` .`statusText` {
    font-size: <%= _sizes.large.font %>px;
    line-height: 46px;
    letter-spacing: 2px;
  }