You are here

Home » API reference » PACE - Page load progress bar 8

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

Same filename in this branch
  1. 8 css/orange/pace-theme-flash.css
  2. 8 css/green/pace-theme-flash.css
  3. 8 css/purple/pace-theme-flash.css
  4. 8 css/black/pace-theme-flash.css
  5. 8 css/red/pace-theme-flash.css
  6. 8 css/yellow/pace-theme-flash.css
  7. 8 css/pink/pace-theme-flash.css
  8. 8 css/silver/pace-theme-flash.css
  9. 8 css/blue/pace-theme-flash.css
  10. 8 css/white/pace-theme-flash.css
Same filename and directory in other branches
  1. 2.0.x css/red/pace-theme-flash.css
/* 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: #ee3148;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #ee3148, 0 0 5px #ee3148;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #ee3148;
  border-left-color: #ee3148;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

File

css/red/pace-theme-flash.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. 

  10. .pace-inactive {

  11.   display: none;

  12. }

  13. 

  14. .pace .pace-progress {

  15.   background: #ee3148;

  16.   position: fixed;

  17.   z-index: 2000;

  18.   top: 0;

  19.   right: 100%;

  20.   width: 100%;

  21.   height: 2px;

  22. }

  23. 

  24. .pace .pace-progress-inner {

  25.   display: block;

  26.   position: absolute;

  27.   right: 0px;

  28.   width: 100px;

  29.   height: 100%;

  30.   box-shadow: 0 0 10px #ee3148, 0 0 5px #ee3148;

  31.   opacity: 1.0;

  32.   -webkit-transform: rotate(3deg) translate(0px, -4px);

  33.   -moz-transform: rotate(3deg) translate(0px, -4px);

  34.   -ms-transform: rotate(3deg) translate(0px, -4px);

  35.   -o-transform: rotate(3deg) translate(0px, -4px);

  36.   transform: rotate(3deg) translate(0px, -4px);

  37. }

  38. 

  39. .pace .pace-activity {

  40.   display: block;

  41.   position: fixed;

  42.   z-index: 2000;

  43.   top: 15px;

  44.   right: 15px;

  45.   width: 14px;

  46.   height: 14px;

  47.   border: solid 2px transparent;

  48.   border-top-color: #ee3148;

  49.   border-left-color: #ee3148;

  50.   border-radius: 10px;

  51.   -webkit-animation: pace-spinner 400ms linear infinite;

  52.   -moz-animation: pace-spinner 400ms linear infinite;

  53.   -ms-animation: pace-spinner 400ms linear infinite;

  54.   -o-animation: pace-spinner 400ms linear infinite;

  55.   animation: pace-spinner 400ms linear infinite;

  56. }

  57. 

  58. @-webkit-keyframes pace-spinner {

  59.   0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

  60.   100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }

  61. }

  62. @-moz-keyframes pace-spinner {

  63.   0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }

  64.   100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }

  65. }

  66. @-o-keyframes pace-spinner {

  67.   0% { -o-transform: rotate(0deg); transform: rotate(0deg); }

  68.   100% { -o-transform: rotate(360deg); transform: rotate(360deg); }

  69. }

  70. @-ms-keyframes pace-spinner {

  71.   0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }

  72.   100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }

  73. }

  74. @keyframes pace-spinner {

  75.   0% { transform: rotate(0deg); transform: rotate(0deg); }

  76.   100% { transform: rotate(360deg); transform: rotate(360deg); }

  77. }