less/patternfly/spinner.less

   1 //
   2 // Spinner
   3 // --------------------------------------------------
   4
   5 @-webkit-keyframes rotation {
   6   from {-webkit-transform: rotate(0deg);}
   7   to {-webkit-transform: rotate(359deg);}
   8 }
   9
  10 @keyframes rotation {
  11   from {transform: rotate(0deg);}
  12   to {transform: rotate(359deg);}
  13 }
  14
  15 .spinner {
  16   -webkit-animation: rotation .6s infinite linear;
  17   animation: rotation .6s infinite linear;
  18   border-bottom: 4px solid rgba(0,0,0,.25);
  19   border-left: 4px solid rgba(0,0,0,.25);
  20   border-right: 4px solid rgba(0,0,0,.25);
  21   border-radius: 100%;
  22   border-top: 4px solid rgba(0,0,0,.75);
  23   height: @font-size-base*2;
  24   margin: 0 auto;
  25   position: relative;
  26   width: @font-size-base*2;
  27   &.spinner-inline {
  28     display: inline-block;
  29     margin-right: 3px;
  30   }
  31   &.spinner-lg {
  32     border-width: 5px;
  33     height: @font-size-base*2.5;
  34     width: @font-size-base*2.5;
  35   }
  36   &.spinner-sm {
  37     border-width: 3px;
  38     height: @font-size-base*1.5;
  39     width: @font-size-base*1.5;
  40   }
  41   &.spinner-xs {
  42     border-width: 2px;
  43     height: @font-size-base;
  44     width: @font-size-base;
  45   }
  46 }
  47
  48 .ie9 .spinner {
  49   background: url("@{img-path}/@{img-spinner}") no-repeat;
  50   border: 0;
  51   &.spinner-lg {
  52     background-image: url("@{img-path}/@{img-spinner-lg}");
  53   }
  54   &.spinner-sm {
  55     background-image: url("@{img-path}/@{img-spinner-sm}");
  56   }
  57   &.spinner-xs {
  58     background-image: url("@{img-path}/@{img-spinner-xs}");
  59   }
  60 }