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

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