You are here

pace-theme-mac-osx.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: #CCCCCC;
  position: fixed;
  top: 0;
  right: 100%;
  width: 100%;
  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 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  -moz-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  -o-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
}

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

  -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);

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

  -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  animation: pace-theme-mac-osx-motion 500ms linear infinite;
}

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

File

css/white/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. 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: #CCCCCC;
  22. position: fixed;
  23. top: 0;
  24. right: 100%;
  25. width: 100%;
  26. height: 12px;
  27. overflow: hidden;
  28. -webkit-border-radius: 0 0 4px 0;
  29. -moz-border-radius: 0 0 4px 0;
  30. -o-border-radius: 0 0 4px 0;
  31. border-radius: 0 0 4px 0;
  32. -webkit-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  33. -moz-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  34. -o-box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  35. box-shadow: inset -1px 0 #808080, inset 0 -1px #808080, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  36. }
  37. .pace .pace-activity {
  38. position: fixed;
  39. top: 0;
  40. left: 0;
  41. right: -28px;
  42. bottom: 0;
  43. -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  44. -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  45. -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  46. background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  47. -webkit-background-size: 28px 100%;
  48. -moz-background-size: 28px 100%;
  49. -o-background-size: 28px 100%;
  50. background-size: 28px 100%;
  51. -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  52. -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  53. -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  54. -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  55. animation: pace-theme-mac-osx-motion 500ms linear infinite;
  56. }
  57. @-webkit-keyframes pace-theme-mac-osx-motion {
  58. 0% { -webkit-transform: none; transform: none; }
  59. 100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  60. }
  61. @-moz-keyframes pace-theme-mac-osx-motion {
  62. 0% { -moz-transform: none; transform: none; }
  63. 100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  64. }
  65. @-o-keyframes pace-theme-mac-osx-motion {
  66. 0% { -o-transform: none; transform: none; }
  67. 100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  68. }
  69. @-ms-keyframes pace-theme-mac-osx-motion {
  70. 0% { -ms-transform: none; transform: none; }
  71. 100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
  72. }
  73. @keyframes pace-theme-mac-osx-motion {
  74. 0% { transform: none; transform: none; }
  75. 100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
  76. }