You are here

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

/* This is a compiled file, you should be editing the file in the templates directory */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 12px;
  background: #fff;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #22df80;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100%;
  overflow: hidden;
}

.pace .pace-activity {
  position: fixed;
  top: 0;
  right: -32px;
  bottom: 0;
  left: 0;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  animation: pace-theme-barber-shop-motion 500ms linear infinite;
}

@-webkit-keyframes pace-theme-barber-shop-motion {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-theme-barber-shop-motion {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-theme-barber-shop-motion {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-theme-barber-shop-motion {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-theme-barber-shop-motion {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

File

css/green/pace-theme-barber-shop.css
View source
  1. /* This is a compiled file, you should be editing the file in the templates directory */
  2. .pace {
  3. -webkit-pointer-events: none;
  4. pointer-events: none;
  5. -webkit-user-select: none;
  6. -moz-user-select: none;
  7. user-select: none;
  8. overflow: hidden;
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. z-index: 2000;
  13. width: 100%;
  14. height: 12px;
  15. background: #fff;
  16. }
  17. .pace-inactive {
  18. display: none;
  19. }
  20. .pace .pace-progress {
  21. background-color: #22df80;
  22. position: fixed;
  23. top: 0;
  24. bottom: 0;
  25. right: 100%;
  26. width: 100%;
  27. overflow: hidden;
  28. }
  29. .pace .pace-activity {
  30. position: fixed;
  31. top: 0;
  32. right: -32px;
  33. bottom: 0;
  34. left: 0;
  35. -webkit-transform: translate3d(0, 0, 0);
  36. -moz-transform: translate3d(0, 0, 0);
  37. -ms-transform: translate3d(0, 0, 0);
  38. -o-transform: translate3d(0, 0, 0);
  39. transform: translate3d(0, 0, 0);
  40. background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  41. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  42. background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  43. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  44. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  45. -webkit-background-size: 32px 32px;
  46. -moz-background-size: 32px 32px;
  47. -o-background-size: 32px 32px;
  48. background-size: 32px 32px;
  49. -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  50. -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  51. -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  52. -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  53. animation: pace-theme-barber-shop-motion 500ms linear infinite;
  54. }
  55. @-webkit-keyframes pace-theme-barber-shop-motion {
  56. 0% { -webkit-transform: none; transform: none; }
  57. 100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
  58. }
  59. @-moz-keyframes pace-theme-barber-shop-motion {
  60. 0% { -moz-transform: none; transform: none; }
  61. 100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
  62. }
  63. @-o-keyframes pace-theme-barber-shop-motion {
  64. 0% { -o-transform: none; transform: none; }
  65. 100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
  66. }
  67. @-ms-keyframes pace-theme-barber-shop-motion {
  68. 0% { -ms-transform: none; transform: none; }
  69. 100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
  70. }
  71. @keyframes pace-theme-barber-shop-motion {
  72. 0% { transform: none; transform: none; }
  73. 100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
  74. }