You are here

pace-theme-mac-osx.css in PACE - Page load progress bar 7

/* 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;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #78c0f0;

  color: #CBE7F9;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px 0;
  -o-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;

  -webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  -o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -28px;
  bottom: 0;

  background-image: -o-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: -moz-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: -webkit-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);


  -webkit-background-size: 28px 100%;
  -moz-background-size: 28px 100%;
  -o-background-size: 28px 100%;
  background-size: 28px 100%;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
}

File

css/pace-theme-mac-osx.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. }
  9. .pace-inactive {
  10. display: none;
  11. }
  12. .pace .pace-progress {
  13. background-color: #78c0f0;
  14. color: #CBE7F9;
  15. position: fixed;
  16. z-index: 2000;
  17. top: 0;
  18. left: 0;
  19. height: 12px;
  20. overflow: hidden;
  21. -webkit-border-radius: 0 0 4px 0;
  22. -moz-border-radius: 0 0 4px 0;
  23. -o-border-radius: 0 0 4px 0;
  24. border-radius: 0 0 4px 0;
  25. -webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  26. -moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  27. -o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  28. box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  29. -webkit-transition: width 1s;
  30. -moz-transition: width 1s;
  31. -o-transition: width 1s;
  32. transition: width 1s;
  33. }
  34. .pace .pace-progress-inner {
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. right: -28px;
  39. bottom: 0;
  40. background-image: -o-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  41. background-image: -moz-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  42. background-image: -webkit-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  43. background-image: radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  44. -webkit-background-size: 28px 100%;
  45. -moz-background-size: 28px 100%;
  46. -o-background-size: 28px 100%;
  47. background-size: 28px 100%;
  48. -webkit-animation: pace-stripe-animation 500ms linear infinite;
  49. -moz-animation: pace-stripe-animation 500ms linear infinite;
  50. -ms-animation: pace-stripe-animation 500ms linear infinite;
  51. -o-animation: pace-stripe-animation 500ms linear infinite;
  52. animation: pace-stripe-animation 500ms linear infinite;
  53. }
  54. @-webkit-keyframes pace-stripe-animation {
  55. 0% { -webkit-transform: none; transform: none; }
  56. 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  57. }
  58. @-moz-keyframes pace-stripe-animation {
  59. 0% { -moz-transform: none; transform: none; }
  60. 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  61. }
  62. @-o-keyframes pace-stripe-animation {
  63. 0% { -o-transform: none; transform: none; }
  64. 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  65. }
  66. @-ms-keyframes pace-stripe-animation {
  67. 0% { -ms-transform: none; transform: none; }
  68. 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  69. }
  70. @keyframes pace-stripe-animation {
  71. 0% { transform: none; transform: none; }
  72. 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
  73. }