src/themes/tizen/common/jquery.mobile.tizen.progress.less

   1 @import "config.less";
   2
   3 /* Progress - circle style */
   4 @img-height: 32 * @unit_base;
   5 @img-width: 32 * @unit_base;
   6
   7 @-webkit-keyframes ui-rotate-animation {
   8         from {
   9                 -webkit-transform: rotate(0deg);
  10         } to {
  11                 -webkit-transform: rotate(360deg);
  12         }
  13 }
  14
  15 .ui-progress-container-circle {
  16         position: absolute;
  17         right: 13 * @unit_base;
  18         top: 25%;
  19 }
  20
  21 .ui-progress-circle {
  22         position: relative;
  23         top: 0;
  24
  25         height: @img-height;
  26         width: @img-width;
  27
  28         background: url(images/00_list_process_01.png) no-repeat;
  29         .LESSbackground-size(@img-width, @img-height);
  30 }
  31
  32 .ui-progress-circle-running {
  33         -webkit-animation: ui-rotate-animation 1s infinite linear;
  34 }
  35
  36 /* Progress - pending style */
  37 @bar-height: 7 * @unit_base;
  38 @bar-margin: 21 * @unit_base;
  39
  40 @-webkit-keyframes ui-move-animation {
  41         from {
  42                 -webkit-transform: translateY(-@bar-height * 2);
  43         } to {
  44                 -webkit-transform: translateY(0);
  45         }
  46 }
  47
  48 .ui-progress-pending {
  49         position: relative;
  50         top: 0;
  51         width: 100%;
  52         height: @bar-height * 3;
  53         padding-top: 0;
  54         padding-bottom: 0;
  55
  56         background: -webkit-gradient(linear,
  57                                 left top,
  58                                 right bottom,
  59                                 color-stop(0%,  rgba(0,0,0,0)),
  60                                 color-stop(25%, rgba(0,0,0,0)),
  61                                 color-stop(25%, @color_progress_value0),
  62                                 color-stop(50%, @color_progress_value0),
  63                                 color-stop(50%, rgba(0,0,0,0)),
  64                                 color-stop(75%, rgba(0,0,0,0)),
  65                                 color-stop(75%, @color_progress_value0));
  66
  67         background-color: @color_progress_bar0;
  68
  69         .LESSbackground-size(@bar-height * 2, @bar-height * 2);
  70 }
  71
  72 .ui-progress-pending-running {
  73         -webkit-animation: ui-move-animation 0.5s infinite linear;
  74 }