You are here

pace-theme-bounce.css in PACE - Page load progress bar 8

/* This is a compiled file, you should be editing the file in the templates directory */
.pace {
  width: 140px;
  height: 300px;
  position: fixed;
  top: -90px;
  right: -20px;
  z-index: 2000;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
}

.pace.pace-active {
  -webkit-transform: scale(.25);
  -moz-transform: scale(.25);
  -ms-transform: scale(.25);
  -o-transform: scale(.25);
  transform: scale(.25);
  opacity: 1;
}

.pace .pace-activity {
  width: 140px;
  height: 140px;
  border-radius: 70px;
  background: #fcd25a;
  position: absolute;
  top: 0;
  z-index: 1911;
  -webkit-animation: pace-bounce 1s infinite;
  -moz-animation: pace-bounce 1s infinite;
  -o-animation: pace-bounce 1s infinite;
  -ms-animation: pace-bounce 1s infinite;
  animation: pace-bounce 1s infinite;
}

.pace .pace-progress {
  position: absolute;
  display: block;
  left: 50%;
  bottom: 0;
  z-index: 1910;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3) !important;
  -moz-transform: scaleY(.3) !important;
  -ms-transform: scaleY(.3) !important;
  -o-transform: scaleY(.3) !important;
  transform: scaleY(.3) !important;
  -webkit-animation: pace-compress .5s infinite alternate;
  -moz-animation: pace-compress .5s infinite alternate;
  -o-animation: pace-compress .5s infinite alternate;
  -ms-animation: pace-compress .5s infinite alternate;
  animation: pace-compress .5s infinite alternate;
}

@-webkit-keyframes pace-bounce {
  0% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -webkit-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -webkit-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -webkit-animation-timing-function: ease-out;
  }
  95% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
}

@-moz-keyframes pace-bounce {
  0% {
    top: 0;
    -moz-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -moz-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -moz-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -moz-animation-timing-function: ease-out;}
  95% {
    top: 0;
    -moz-animation-timing-function: ease-in;
  }
  100% {top: 0;
    -moz-animation-timing-function: ease-in;
  }
}

@keyframes pace-bounce {
  0% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 140px;
    height: 140px;
    animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    animation-timing-function: ease-out;
  }
  95% {
    top: 0;
    animation-timing-function: ease-in;
  }
  100% {
    top: 0;
    animation-timing-function: ease-in;
  }
}

@-webkit-keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    -webkit-animation-timing-function: ease-out;
  }
}

@-moz-keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    -moz-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    -moz-animation-timing-function: ease-out;
  }
}

@keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    animation-timing-function: ease-out;
  }
}

File

css/yellow/pace-theme-bounce.css
View source
  1. /* This is a compiled file, you should be editing the file in the templates directory */
  2. .pace {
  3. width: 140px;
  4. height: 300px;
  5. position: fixed;
  6. top: -90px;
  7. right: -20px;
  8. z-index: 2000;
  9. -webkit-transform: scale(0);
  10. -moz-transform: scale(0);
  11. -ms-transform: scale(0);
  12. -o-transform: scale(0);
  13. transform: scale(0);
  14. opacity: 0;
  15. -webkit-transition: all 2s linear 0s;
  16. -moz-transition: all 2s linear 0s;
  17. transition: all 2s linear 0s;
  18. }
  19. .pace.pace-active {
  20. -webkit-transform: scale(.25);
  21. -moz-transform: scale(.25);
  22. -ms-transform: scale(.25);
  23. -o-transform: scale(.25);
  24. transform: scale(.25);
  25. opacity: 1;
  26. }
  27. .pace .pace-activity {
  28. width: 140px;
  29. height: 140px;
  30. border-radius: 70px;
  31. background: #fcd25a;
  32. position: absolute;
  33. top: 0;
  34. z-index: 1911;
  35. -webkit-animation: pace-bounce 1s infinite;
  36. -moz-animation: pace-bounce 1s infinite;
  37. -o-animation: pace-bounce 1s infinite;
  38. -ms-animation: pace-bounce 1s infinite;
  39. animation: pace-bounce 1s infinite;
  40. }
  41. .pace .pace-progress {
  42. position: absolute;
  43. display: block;
  44. left: 50%;
  45. bottom: 0;
  46. z-index: 1910;
  47. margin-left: -30px;
  48. width: 60px;
  49. height: 75px;
  50. background: rgba(20, 20, 20, .1);
  51. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  52. border-radius: 30px / 40px;
  53. -webkit-transform: scaleY(.3) !important;
  54. -moz-transform: scaleY(.3) !important;
  55. -ms-transform: scaleY(.3) !important;
  56. -o-transform: scaleY(.3) !important;
  57. transform: scaleY(.3) !important;
  58. -webkit-animation: pace-compress .5s infinite alternate;
  59. -moz-animation: pace-compress .5s infinite alternate;
  60. -o-animation: pace-compress .5s infinite alternate;
  61. -ms-animation: pace-compress .5s infinite alternate;
  62. animation: pace-compress .5s infinite alternate;
  63. }
  64. @-webkit-keyframes pace-bounce {
  65. 0% {
  66. top: 0;
  67. -webkit-animation-timing-function: ease-in;
  68. }
  69. 40% {}
  70. 50% {
  71. top: 140px;
  72. height: 140px;
  73. -webkit-animation-timing-function: ease-out;
  74. }
  75. 55% {
  76. top: 160px;
  77. height: 120px;
  78. border-radius: 70px / 60px;
  79. -webkit-animation-timing-function: ease-in;
  80. }
  81. 65% {
  82. top: 120px;
  83. height: 140px;
  84. border-radius: 70px;
  85. -webkit-animation-timing-function: ease-out;
  86. }
  87. 95% {
  88. top: 0;
  89. -webkit-animation-timing-function: ease-in;
  90. }
  91. 100% {
  92. top: 0;
  93. -webkit-animation-timing-function: ease-in;
  94. }
  95. }
  96. @-moz-keyframes pace-bounce {
  97. 0% {
  98. top: 0;
  99. -moz-animation-timing-function: ease-in;
  100. }
  101. 40% {}
  102. 50% {
  103. top: 140px;
  104. height: 140px;
  105. -moz-animation-timing-function: ease-out;
  106. }
  107. 55% {
  108. top: 160px;
  109. height: 120px;
  110. border-radius: 70px / 60px;
  111. -moz-animation-timing-function: ease-in;
  112. }
  113. 65% {
  114. top: 120px;
  115. height: 140px;
  116. border-radius: 70px;
  117. -moz-animation-timing-function: ease-out;}
  118. 95% {
  119. top: 0;
  120. -moz-animation-timing-function: ease-in;
  121. }
  122. 100% {top: 0;
  123. -moz-animation-timing-function: ease-in;
  124. }
  125. }
  126. @keyframes pace-bounce {
  127. 0% {
  128. top: 0;
  129. animation-timing-function: ease-in;
  130. }
  131. 50% {
  132. top: 140px;
  133. height: 140px;
  134. animation-timing-function: ease-out;
  135. }
  136. 55% {
  137. top: 160px;
  138. height: 120px;
  139. border-radius: 70px / 60px;
  140. animation-timing-function: ease-in;
  141. }
  142. 65% {
  143. top: 120px;
  144. height: 140px;
  145. border-radius: 70px;
  146. animation-timing-function: ease-out;
  147. }
  148. 95% {
  149. top: 0;
  150. animation-timing-function: ease-in;
  151. }
  152. 100% {
  153. top: 0;
  154. animation-timing-function: ease-in;
  155. }
  156. }
  157. @-webkit-keyframes pace-compress {
  158. 0% {
  159. bottom: 0;
  160. margin-left: -30px;
  161. width: 60px;
  162. height: 75px;
  163. background: rgba(20, 20, 20, .1);
  164. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  165. border-radius: 30px / 40px;
  166. -webkit-animation-timing-function: ease-in;
  167. }
  168. 100% {
  169. bottom: 30px;
  170. margin-left: -10px;
  171. width: 20px;
  172. height: 5px;
  173. background: rgba(20, 20, 20, .3);
  174. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
  175. border-radius: 20px / 20px;
  176. -webkit-animation-timing-function: ease-out;
  177. }
  178. }
  179. @-moz-keyframes pace-compress {
  180. 0% {
  181. bottom: 0;
  182. margin-left: -30px;
  183. width: 60px;
  184. height: 75px;
  185. background: rgba(20, 20, 20, .1);
  186. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  187. border-radius: 30px / 40px;
  188. -moz-animation-timing-function: ease-in;
  189. }
  190. 100% {
  191. bottom: 30px;
  192. margin-left: -10px;
  193. width: 20px;
  194. height: 5px;
  195. background: rgba(20, 20, 20, .3);
  196. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
  197. border-radius: 20px / 20px;
  198. -moz-animation-timing-function: ease-out;
  199. }
  200. }
  201. @keyframes pace-compress {
  202. 0% {
  203. bottom: 0;
  204. margin-left: -30px;
  205. width: 60px;
  206. height: 75px;
  207. background: rgba(20, 20, 20, .1);
  208. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  209. border-radius: 30px / 40px;
  210. animation-timing-function: ease-in;
  211. }
  212. 100% {
  213. bottom: 30px;
  214. margin-left: -10px;
  215. width: 20px;
  216. height: 5px;
  217. background: rgba(20, 20, 20, .3);
  218. box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
  219. border-radius: 20px / 20px;
  220. animation-timing-function: ease-out;
  221. }
  222. }