From cff4912d9d7d0f0d45f63f536d85abc8036367b1 Mon Sep 17 00:00:00 2001
From: Paul <peiche@gmail.com>
Date: Fri, 28 Nov 2014 17:38:22 -0600
Subject: [PATCH 1/3] Two new Material Design templates.

---
 templates/pace-theme-material-center.tmpl.css | 238 +++++++++++++++++
 templates/pace-theme-material-left.tmpl.css   | 240 ++++++++++++++++++
 2 files changed, 478 insertions(+)
 create mode 100644 templates/pace-theme-material-center.tmpl.css
 create mode 100644 templates/pace-theme-material-left.tmpl.css

diff --git a/templates/pace-theme-material-center.tmpl.css b/templates/pace-theme-material-center.tmpl.css
new file mode 100644
index 00000000..5a899b53
--- /dev/null
+++ b/templates/pace-theme-material-center.tmpl.css
@@ -0,0 +1,238 @@
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/templates/pace-theme-material-left.tmpl.css b/templates/pace-theme-material-left.tmpl.css
new file mode 100644
index 00000000..ac2f3c8c
--- /dev/null
+++ b/templates/pace-theme-material-left.tmpl.css
@@ -0,0 +1,240 @@
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}

From cddbbdc702f50de013597faa69ac9c0afb39efc5 Mon Sep 17 00:00:00 2001
From: Paul <peiche@gmail.com>
Date: Fri, 28 Nov 2014 17:39:32 -0600
Subject: [PATCH 2/3] Generated theme stylesheets.

They do not use the theme's designated color.
---
 themes/black/pace-theme-material-center.css  | 239 ++++++++++++++++++
 themes/black/pace-theme-material-left.css    | 241 +++++++++++++++++++
 themes/blue/pace-theme-material-center.css   | 239 ++++++++++++++++++
 themes/blue/pace-theme-material-left.css     | 241 +++++++++++++++++++
 themes/green/pace-theme-material-center.css  | 239 ++++++++++++++++++
 themes/green/pace-theme-material-left.css    | 241 +++++++++++++++++++
 themes/orange/pace-theme-material-center.css | 239 ++++++++++++++++++
 themes/orange/pace-theme-material-left.css   | 241 +++++++++++++++++++
 themes/pink/pace-theme-material-center.css   | 239 ++++++++++++++++++
 themes/pink/pace-theme-material-left.css     | 241 +++++++++++++++++++
 themes/purple/pace-theme-material-center.css | 239 ++++++++++++++++++
 themes/purple/pace-theme-material-left.css   | 241 +++++++++++++++++++
 themes/red/pace-theme-material-center.css    | 239 ++++++++++++++++++
 themes/red/pace-theme-material-left.css      | 241 +++++++++++++++++++
 themes/silver/pace-theme-material-center.css | 239 ++++++++++++++++++
 themes/silver/pace-theme-material-left.css   | 241 +++++++++++++++++++
 themes/white/pace-theme-material-center.css  | 239 ++++++++++++++++++
 themes/white/pace-theme-material-left.css    | 241 +++++++++++++++++++
 themes/yellow/pace-theme-material-center.css | 239 ++++++++++++++++++
 themes/yellow/pace-theme-material-left.css   | 241 +++++++++++++++++++
 20 files changed, 4800 insertions(+)
 create mode 100644 themes/black/pace-theme-material-center.css
 create mode 100644 themes/black/pace-theme-material-left.css
 create mode 100644 themes/blue/pace-theme-material-center.css
 create mode 100644 themes/blue/pace-theme-material-left.css
 create mode 100644 themes/green/pace-theme-material-center.css
 create mode 100644 themes/green/pace-theme-material-left.css
 create mode 100644 themes/orange/pace-theme-material-center.css
 create mode 100644 themes/orange/pace-theme-material-left.css
 create mode 100644 themes/pink/pace-theme-material-center.css
 create mode 100644 themes/pink/pace-theme-material-left.css
 create mode 100644 themes/purple/pace-theme-material-center.css
 create mode 100644 themes/purple/pace-theme-material-left.css
 create mode 100644 themes/red/pace-theme-material-center.css
 create mode 100644 themes/red/pace-theme-material-left.css
 create mode 100644 themes/silver/pace-theme-material-center.css
 create mode 100644 themes/silver/pace-theme-material-left.css
 create mode 100644 themes/white/pace-theme-material-center.css
 create mode 100644 themes/white/pace-theme-material-left.css
 create mode 100644 themes/yellow/pace-theme-material-center.css
 create mode 100644 themes/yellow/pace-theme-material-left.css

diff --git a/themes/black/pace-theme-material-center.css b/themes/black/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/black/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/black/pace-theme-material-left.css b/themes/black/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/black/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/blue/pace-theme-material-center.css b/themes/blue/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/blue/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/blue/pace-theme-material-left.css b/themes/blue/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/blue/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/green/pace-theme-material-center.css b/themes/green/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/green/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/green/pace-theme-material-left.css b/themes/green/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/green/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/orange/pace-theme-material-center.css b/themes/orange/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/orange/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/orange/pace-theme-material-left.css b/themes/orange/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/orange/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/pink/pace-theme-material-center.css b/themes/pink/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/pink/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/pink/pace-theme-material-left.css b/themes/pink/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/pink/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/purple/pace-theme-material-center.css b/themes/purple/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/purple/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/purple/pace-theme-material-left.css b/themes/purple/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/purple/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/red/pace-theme-material-center.css b/themes/red/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/red/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/red/pace-theme-material-left.css b/themes/red/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/red/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/silver/pace-theme-material-center.css b/themes/silver/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/silver/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/silver/pace-theme-material-left.css b/themes/silver/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/silver/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/white/pace-theme-material-center.css b/themes/white/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/white/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/white/pace-theme-material-left.css b/themes/white/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/white/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/yellow/pace-theme-material-center.css b/themes/yellow/pace-theme-material-center.css
new file mode 100644
index 00000000..c5951616
--- /dev/null
+++ b/themes/yellow/pace-theme-material-center.css
@@ -0,0 +1,239 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    right: 50%;
+}
+.pace:after {
+    left: 50%;
+}
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 50%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 50%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 50%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 50%;
+        background-color: #4caf50;
+    }
+}
diff --git a/themes/yellow/pace-theme-material-left.css b/themes/yellow/pace-theme-material-left.css
new file mode 100644
index 00000000..d897b364
--- /dev/null
+++ b/themes/yellow/pace-theme-material-left.css
@@ -0,0 +1,241 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 8px;
+    width: 100%;
+    background-color: #159756;
+    opacity: 0;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+    -webkit-animation: preloader-background linear 3.5s infinite;
+    -moz-animation: preloader-background linear 3.5s infinite;
+    -o-animation: preloader-background linear 3.5s infinite;
+    animation: preloader-background linear 3.5s infinite;
+}
+.pace:before,
+.pace:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 0;
+    height: 8px;
+    background: #afa;
+    -webkit-animation: preloader-front linear 3.5s infinite;
+    -moz-animation: preloader-front linear 3.5s infinite;
+    -o-animation: preloader-front linear 3.5s infinite;
+    animation: preloader-front linear 3.5s infinite;
+}
+.pace:before {
+    left: 0;
+}
+/*
+.pace:after {
+    left: 50%;
+}
+*/
+.pace.pace-active {
+    opacity: 1;
+}
+.pace.pace-inactive {
+    opacity: 0;
+}
+
+@-webkit-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-moz-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@-o-keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+@keyframes preloader-background {
+    0%, 24.9% {
+        background-color: #4caf50;
+    }
+    25%, 49.9% {
+        background-color: #026ed2;
+    }
+    50%, 74.9% {
+        background-color: #f44336;
+    }
+    75%, 100% {
+        background-color: #ffeb3b;
+    }
+}
+
+@-webkit-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-moz-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}
+@-o-keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 10050%;
+        background-color: #4caf50;
+    }
+}
+@keyframes preloader-front {
+    0% {
+        width: 0;
+        background-color: #026ed2;
+    }
+    24.9% {
+        width: 100%;
+        background-color: #026ed2;
+    }
+    25% {
+        width: 0;
+        background-color: #f44336;
+    }
+    49.9% {
+        width: 100%;
+        background-color: #f44336;
+    }
+    50% {
+        width: 0;
+        background-color: #ffeb3b;
+    }
+    74.9% {
+        width: 100%;
+        background-color: #ffeb3b;
+    }
+    75% {
+        width: 0%;
+        background-color: #4caf50;
+    }
+    100% {
+        width: 100%;
+        background-color: #4caf50;
+    }
+}

From 72b47ff151549d8171630a3ddc6bb502005cfd63 Mon Sep 17 00:00:00 2001
From: Paul <peiche@gmail.com>
Date: Mon, 15 Dec 2014 09:58:41 -0600
Subject: [PATCH 3/3] Added z-index

Modified files for center and left material design templates, also
committed generated theme files.
---
 templates/pace-theme-material-center.tmpl.css | 1 +
 templates/pace-theme-material-left.tmpl.css   | 1 +
 themes/black/pace-theme-material-center.css   | 1 +
 themes/black/pace-theme-material-left.css     | 1 +
 themes/blue/pace-theme-material-center.css    | 1 +
 themes/blue/pace-theme-material-left.css      | 1 +
 themes/green/pace-theme-material-center.css   | 1 +
 themes/green/pace-theme-material-left.css     | 1 +
 themes/orange/pace-theme-material-center.css  | 1 +
 themes/orange/pace-theme-material-left.css    | 1 +
 themes/pink/pace-theme-material-center.css    | 1 +
 themes/pink/pace-theme-material-left.css      | 1 +
 themes/purple/pace-theme-material-center.css  | 1 +
 themes/purple/pace-theme-material-left.css    | 1 +
 themes/red/pace-theme-material-center.css     | 1 +
 themes/red/pace-theme-material-left.css       | 1 +
 themes/silver/pace-theme-material-center.css  | 1 +
 themes/silver/pace-theme-material-left.css    | 1 +
 themes/white/pace-theme-material-center.css   | 1 +
 themes/white/pace-theme-material-left.css     | 1 +
 themes/yellow/pace-theme-material-center.css  | 1 +
 themes/yellow/pace-theme-material-left.css    | 1 +
 22 files changed, 22 insertions(+)

diff --git a/templates/pace-theme-material-center.tmpl.css b/templates/pace-theme-material-center.tmpl.css
index 5a899b53..4bae2f12 100644
--- a/templates/pace-theme-material-center.tmpl.css
+++ b/templates/pace-theme-material-center.tmpl.css
@@ -14,6 +14,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/templates/pace-theme-material-left.tmpl.css b/templates/pace-theme-material-left.tmpl.css
index ac2f3c8c..51f64463 100644
--- a/templates/pace-theme-material-left.tmpl.css
+++ b/templates/pace-theme-material-left.tmpl.css
@@ -14,6 +14,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/black/pace-theme-material-center.css b/themes/black/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/black/pace-theme-material-center.css
+++ b/themes/black/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/black/pace-theme-material-left.css b/themes/black/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/black/pace-theme-material-left.css
+++ b/themes/black/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/blue/pace-theme-material-center.css b/themes/blue/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/blue/pace-theme-material-center.css
+++ b/themes/blue/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/blue/pace-theme-material-left.css b/themes/blue/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/blue/pace-theme-material-left.css
+++ b/themes/blue/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/green/pace-theme-material-center.css b/themes/green/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/green/pace-theme-material-center.css
+++ b/themes/green/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/green/pace-theme-material-left.css b/themes/green/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/green/pace-theme-material-left.css
+++ b/themes/green/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/orange/pace-theme-material-center.css b/themes/orange/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/orange/pace-theme-material-center.css
+++ b/themes/orange/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/orange/pace-theme-material-left.css b/themes/orange/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/orange/pace-theme-material-left.css
+++ b/themes/orange/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/pink/pace-theme-material-center.css b/themes/pink/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/pink/pace-theme-material-center.css
+++ b/themes/pink/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/pink/pace-theme-material-left.css b/themes/pink/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/pink/pace-theme-material-left.css
+++ b/themes/pink/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/purple/pace-theme-material-center.css b/themes/purple/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/purple/pace-theme-material-center.css
+++ b/themes/purple/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/purple/pace-theme-material-left.css b/themes/purple/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/purple/pace-theme-material-left.css
+++ b/themes/purple/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/red/pace-theme-material-center.css b/themes/red/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/red/pace-theme-material-center.css
+++ b/themes/red/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/red/pace-theme-material-left.css b/themes/red/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/red/pace-theme-material-left.css
+++ b/themes/red/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/silver/pace-theme-material-center.css b/themes/silver/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/silver/pace-theme-material-center.css
+++ b/themes/silver/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/silver/pace-theme-material-left.css b/themes/silver/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/silver/pace-theme-material-left.css
+++ b/themes/silver/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/white/pace-theme-material-center.css b/themes/white/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/white/pace-theme-material-center.css
+++ b/themes/white/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/white/pace-theme-material-left.css b/themes/white/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/white/pace-theme-material-left.css
+++ b/themes/white/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/yellow/pace-theme-material-center.css b/themes/yellow/pace-theme-material-center.css
index c5951616..a948edd7 100644
--- a/themes/yellow/pace-theme-material-center.css
+++ b/themes/yellow/pace-theme-material-center.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {
diff --git a/themes/yellow/pace-theme-material-left.css b/themes/yellow/pace-theme-material-left.css
index d897b364..e7a2f519 100644
--- a/themes/yellow/pace-theme-material-left.css
+++ b/themes/yellow/pace-theme-material-left.css
@@ -15,6 +15,7 @@
     -moz-animation: preloader-background linear 3.5s infinite;
     -o-animation: preloader-background linear 3.5s infinite;
     animation: preloader-background linear 3.5s infinite;
+    z-index: 2000;
 }
 .pace:before,
 .pace:after {