src/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss

   1 .x-progressindicator {
   2         width: 50%;
   3         height: 1.3em;
   4 }
   5
   6 .x-progressindicator .x-progressindicator-inner {
   7         background: #222222;
   8         padding: 10px;
   9         height: 100%;
  10         border-radius: 20px;
  11         box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);
  12         box-sizing: content-box;
  13         position: relative;
  14 }
  15
  16 .x-progressindicator .x-progressindicator-text {
  17         @include st-box;
  18         @include st-box-align(center);
  19         @include st-box-pack(center);
  20         width: 100%;
  21         height: 100%;
  22         position: absolute;
  23         top: 0px;
  24         left: 0px;
  25         color: white;
  26         text-shadow: 1px 1px 2px black;
  27 }
  28
  29 .x-progressindicator .x-progressindicator-bar {
  30         height: 100%;
  31         width: 0%;
  32         border-radius: 10px;
  33 }
  34
  35 .x-progressindicator:not(.x-item-hidden) .x-progressindicator-bar .x-progressindicator-bar-fill {
  36         height: 100%;
  37         width: 100%;
  38         background-color: gray;
  39         border-radius: 10px;
  40
  41         $animation-support: webkit, moz, o, ms, not khtml;
  42         @include experimental('animation-name', progressIndicator, $animation-support);
  43         @include experimental('animation-duration', 1s, $animation-support);
  44         @include experimental('animation-timing-function', linear, $animation-support);
  45         @include experimental('animation-iteration-count', infinite, $animation-support);
  46
  47         background-repeat: repeat-x;
  48         background-size: 30px 30px;
  49         @include background-image(linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent))
  50 }
  51
  52 @-webkit-keyframes progressIndicator
  53 {
  54         to {
  55                 background-position: 30px;
  56         }
  57 }
  58 @-moz-keyframes progressIndicator
  59 {
  60         to {
  61                 background-position: 30px;
  62         }
  63 }
  64 @keyframes progressIndicator
  65 {
  66         to {
  67                 background-position: 30px;
  68         }
  69 }