theme-bar.less 2.15 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
/* ------------------------------------------------------------------------------
 *
 *  # Pace. Progress bar theme
 *
 *  Bar css spinner theme for Pace. Default size
 *
 *  Version: 1.0
 *  Latest update: May 25, 2015
 *
 * ---------------------------------------------------------------------------- */


// Preloader template. Default dark background
// ------------------------------

.preloader,
.preloader-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: @color-slate-800; // Change it to any suitable dark color
  z-index: 9000; 
  .opacity(0.9);
}

// Light background
.preloader-light {
  background-color: #fff; // Change it to any suitable light color
}

// Change colors for the light version. Feel free to change colors
.pace-light {
  &.pace {
    background-color: fade(#000, 80%);
  }

  .pace-progress {
    background-color: #fff;

    &:after {
      color: @color-slate-800;
    }
  }
}


// Pace theme styles
// ------------------------------

// Base
.pace {
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-pointer-events: none;
  pointer-events: none;

  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 6px;
  background-color: fade(#000, 40%);
  z-index: 9999;
  border-radius: 100px;
  .user-select(none);
  .box-shadow(0 0 5px fade(#fff, 10%));
}

// Progress
.pace-progress {
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  max-width: 198px;
  z-index: 9999;
  display: block;
  position: absolute;
  left: 1px;
  top: 1px;
  height: 4px;
  background: @color-blue-400; /* Change it to any suitable bright color */
  color: #fff;
  line-height: 32px;
  font-size: @font-size-small;
  border-radius: 100px;
  .transition(width 1s ease-in-out 1s linear);
  .translate3d(0,0,0);
}

// Hide inactive
.pace-inactive {
  display: none;
}


// Uncomment code below to show loader text with indicator

/*
.pace-progress:after {
  content: attr(data-progress-text);
  text-align: center;
  width: 100%;
  display: inline-block;
  margin-top: 5px;
}
*/