You are here

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

pace-theme-flash.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: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

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

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  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: #29d;
  border-left-color: #29d;
  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/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: #29d;

  16.   position: fixed;

  17.   z-index: 2000;

  18.   top: 0;

  19.   left: 0;

  20.   height: 2px;

  21. 

  22.   -webkit-transition: width 1s;

  23.   -moz-transition: width 1s;

  24.   -o-transition: width 1s;

  25.   transition: width 1s;

  26. }

  27. 

  28. .pace .pace-progress-inner {

  29.   display: block;

  30.   position: absolute;

  31.   right: 0px;

  32.   width: 100px;

  33.   height: 100%;

  34.   box-shadow: 0 0 10px #29d, 0 0 5px #29d;

  35.   opacity: 1.0;

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

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

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

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

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

  41. }

  42. 

  43. .pace .pace-activity {

  44.   display: block;

  45.   position: fixed;

  46.   z-index: 2000;

  47.   top: 15px;

  48.   right: 15px;

  49.   width: 14px;

  50.   height: 14px;

  51.   border: solid 2px transparent;

  52.   border-top-color: #29d;

  53.   border-left-color: #29d;

  54.   border-radius: 10px;

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

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

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

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

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

  60. }

  61. 

  62. @-webkit-keyframes pace-spinner {

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

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

  65. }

  66. @-moz-keyframes pace-spinner {

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

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

  69. }

  70. @-o-keyframes pace-spinner {

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

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

  73. }

  74. @-ms-keyframes pace-spinner {

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

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

  77. }

  78. @keyframes pace-spinner {

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

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

  81. }