You are here

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

/* This is a compiled file, you should be editing the file in the templates directory */
.pace.pace-inactive {
  display: none;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

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

  z-index: 2000;
  position: fixed;
  height: 60px;
  width: 100px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace .pace-progress {
  z-index: 2000;
  position: absolute;
  height: 60px;
  width: 100px;

  -webkit-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.pace .pace-progress:before {
  content: attr(data-progress-text);
  text-align: center;
  color: #fff;
  background: #d6d6d6;
  border-radius: 50%;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 100;
  line-height: 1;
  padding: 20% 0 7px;
  width: 50%;
  height: 40%;
  margin: 10px 0 0 30px;
  display: block;
  z-index: 999;
  position: absolute;
}

.pace .pace-activity {
  font-size: 15px;
  line-height: 1;
  z-index: 2000;
  position: absolute;
  height: 60px;
  width: 100px;

  display: block;
  -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
  -moz-animation: pace-theme-center-atom-spin 2s linear infinite;
  -o-animation: pace-theme-center-atom-spin 2s linear infinite;
  animation: pace-theme-center-atom-spin 2s linear infinite;
}

.pace .pace-activity {
  border-radius: 50%;
  border: 5px solid #d6d6d6;
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100px;
}

.pace .pace-activity:after {
  border-radius: 50%;
  border: 5px solid #d6d6d6;
  content: ' ';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  height: 60px;
  width: 100px;

  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}

.pace .pace-activity:before {
  border-radius: 50%;
  border: 5px solid #d6d6d6;
  content: ' ';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  height: 60px;
  width: 100px;

  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
}

@-webkit-keyframes pace-theme-center-atom-spin {
  0%   { -webkit-transform: rotate(0deg) }
  100% { -webkit-transform: rotate(359deg) }
}
@-moz-keyframes pace-theme-center-atom-spin {
  0%   { -moz-transform: rotate(0deg) }
  100% { -moz-transform: rotate(359deg) }
}
@-o-keyframes pace-theme-center-atom-spin {
  0%   { -o-transform: rotate(0deg) }
  100% { -o-transform: rotate(359deg) }
}
@keyframes pace-theme-center-atom-spin {
  0%   { transform: rotate(0deg) }
  100% { transform: rotate(359deg) }
}

File

css/silver/pace-theme-center-atom.css
View source
  1. /* This is a compiled file, you should be editing the file in the templates directory */
  2. .pace.pace-inactive {
  3. display: none;
  4. }
  5. .pace {
  6. -webkit-pointer-events: none;
  7. pointer-events: none;
  8. -webkit-user-select: none;
  9. -moz-user-select: none;
  10. user-select: none;
  11. z-index: 2000;
  12. position: fixed;
  13. height: 60px;
  14. width: 100px;
  15. margin: auto;
  16. top: 0;
  17. left: 0;
  18. right: 0;
  19. bottom: 0;
  20. }
  21. .pace .pace-progress {
  22. z-index: 2000;
  23. position: absolute;
  24. height: 60px;
  25. width: 100px;
  26. -webkit-transform: translate3d(0, 0, 0) !important;
  27. -ms-transform: translate3d(0, 0, 0) !important;
  28. transform: translate3d(0, 0, 0) !important;
  29. }
  30. .pace .pace-progress:before {
  31. content: attr(data-progress-text);
  32. text-align: center;
  33. color: #fff;
  34. background: #d6d6d6;
  35. border-radius: 50%;
  36. font-family: "Helvetica Neue", sans-serif;
  37. font-size: 14px;
  38. font-weight: 100;
  39. line-height: 1;
  40. padding: 20% 0 7px;
  41. width: 50%;
  42. height: 40%;
  43. margin: 10px 0 0 30px;
  44. display: block;
  45. z-index: 999;
  46. position: absolute;
  47. }
  48. .pace .pace-activity {
  49. font-size: 15px;
  50. line-height: 1;
  51. z-index: 2000;
  52. position: absolute;
  53. height: 60px;
  54. width: 100px;
  55. display: block;
  56. -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
  57. -moz-animation: pace-theme-center-atom-spin 2s linear infinite;
  58. -o-animation: pace-theme-center-atom-spin 2s linear infinite;
  59. animation: pace-theme-center-atom-spin 2s linear infinite;
  60. }
  61. .pace .pace-activity {
  62. border-radius: 50%;
  63. border: 5px solid #d6d6d6;
  64. content: ' ';
  65. display: block;
  66. position: absolute;
  67. top: 0;
  68. left: 0;
  69. height: 60px;
  70. width: 100px;
  71. }
  72. .pace .pace-activity:after {
  73. border-radius: 50%;
  74. border: 5px solid #d6d6d6;
  75. content: ' ';
  76. display: block;
  77. position: absolute;
  78. top: -5px;
  79. left: -5px;
  80. height: 60px;
  81. width: 100px;
  82. -webkit-transform: rotate(60deg);
  83. -moz-transform: rotate(60deg);
  84. -o-transform: rotate(60deg);
  85. transform: rotate(60deg);
  86. }
  87. .pace .pace-activity:before {
  88. border-radius: 50%;
  89. border: 5px solid #d6d6d6;
  90. content: ' ';
  91. display: block;
  92. position: absolute;
  93. top: -5px;
  94. left: -5px;
  95. height: 60px;
  96. width: 100px;
  97. -webkit-transform: rotate(120deg);
  98. -moz-transform: rotate(120deg);
  99. -o-transform: rotate(120deg);
  100. transform: rotate(120deg);
  101. }
  102. @-webkit-keyframes pace-theme-center-atom-spin {
  103. 0% { -webkit-transform: rotate(0deg) }
  104. 100% { -webkit-transform: rotate(359deg) }
  105. }
  106. @-moz-keyframes pace-theme-center-atom-spin {
  107. 0% { -moz-transform: rotate(0deg) }
  108. 100% { -moz-transform: rotate(359deg) }
  109. }
  110. @-o-keyframes pace-theme-center-atom-spin {
  111. 0% { -o-transform: rotate(0deg) }
  112. 100% { -o-transform: rotate(359deg) }
  113. }
  114. @keyframes pace-theme-center-atom-spin {
  115. 0% { transform: rotate(0deg) }
  116. 100% { transform: rotate(359deg) }
  117. }