diff --git a/themes/openpowerfoundation/assets/css/preloader.scss b/themes/openpowerfoundation/assets/css/preloader.scss
new file mode 100644
index 0000000..def7a29
--- /dev/null
+++ b/themes/openpowerfoundation/assets/css/preloader.scss
@@ -0,0 +1,248 @@
+.preloader {
+	animation: hideAnimation 0s ease-in 5s;
+	animation-fill-mode: forwards;
+}
+.preloader figure {
+	position: absolute;
+	width: 0;
+	height: 0;
+	left: 50%;
+	top: 50%;
+	margin: -60px -50px;
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	-ms-transform-style: preserve-3d;
+	-o-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	-webkit-perspective: 600;
+	-moz-perspective: 600;
+	perspective: 600;
+	z-index: 9999;
+}
+.preloader figure span {
+	display: block;
+	position: absolute;
+	-webkit-transform-origin: 50% 100%;
+	-moz-transform-origin: 50% 100%;
+	-ms-transform-origin: 50% 100%;
+	-o-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+}
+.preloader figure span:after {
+	display: block;
+	content: "";
+	border-style: solid;
+	border-color: transparent;
+	border-width: 100px 58px 0;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+.preloader figure span:nth-child(1) {
+	-webkit-transform: rotate3d(0, 0, 1, 90deg);
+	-moz-transform: rotate3d(0, 0, 1, 90deg);
+	-ms-transform: rotate3d(0, 0, 1, 90deg);
+	-o-transform: rotate3d(0, 0, 1, 90deg);
+	transform: rotate3d(0, 0, 1, 90deg);
+}
+.preloader figure span:nth-child(1):after {
+	border-top-color: #eaff00;
+	-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+	-o-transform: rotate3d(0.5, 1, 0, 180deg);
+	transform: rotate3d(0.5, 1, 0, 180deg);
+	-webkit-animation: split 2s 0.1111111111s ease infinite;
+	-moz-animation: split 2s 0.1111111111s ease infinite;
+	animation: split 2s 0.1111111111s ease infinite;
+}
+.preloader figure span:nth-child(2) {
+	-webkit-transform: rotate3d(0, 0, 1, 150deg);
+	-moz-transform: rotate3d(0, 0, 1, 150deg);
+	-ms-transform: rotate3d(0, 0, 1, 150deg);
+	-o-transform: rotate3d(0, 0, 1, 150deg);
+	transform: rotate3d(0, 0, 1, 150deg);
+}
+.preloader figure span:nth-child(2):after {
+	border-top-color: #d5ff00;
+	-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+	-o-transform: rotate3d(0.5, 1, 0, 180deg);
+	transform: rotate3d(0.5, 1, 0, 180deg);
+	-webkit-animation: split 2s 0.2222222222s ease infinite;
+	-moz-animation: split 2s 0.2222222222s ease infinite;
+	animation: split 2s 0.2222222222s ease infinite;
+}
+.preloader figure span:nth-child(3) {
+	-webkit-transform: rotate3d(0, 0, 1, 210deg);
+	-moz-transform: rotate3d(0, 0, 1, 210deg);
+	-ms-transform: rotate3d(0, 0, 1, 210deg);
+	-o-transform: rotate3d(0, 0, 1, 210deg);
+	transform: rotate3d(0, 0, 1, 210deg);
+	}
+.preloader figure span:nth-child(3):after {
+	border-top-color: #bfff00;
+	-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+	-o-transform: rotate3d(0.5, 1, 0, 180deg);
+	transform: rotate3d(0.5, 1, 0, 180deg);
+	-webkit-animation: split 2s 0.3333333333s ease infinite;
+	-moz-animation: split 2s 0.3333333333s ease infinite;
+	animation: split 2s 0.3333333333s ease infinite;
+}
+.preloader figure span:nth-child(4) {
+	-webkit-transform: rotate3d(0, 0, 1, 270deg);
+	-moz-transform: rotate3d(0, 0, 1, 270deg);
+	-ms-transform: rotate3d(0, 0, 1, 270deg);
+	-o-transform: rotate3d(0, 0, 1, 270deg);
+	transform: rotate3d(0, 0, 1, 270deg);
+}
+.preloader figure span:nth-child(4):after {
+	border-top-color: #aaff00;
+	-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+	-o-transform: rotate3d(0.5, 1, 0, 180deg);
+	transform: rotate3d(0.5, 1, 0, 180deg);
+	-webkit-animation: split 2s 0.4444444444s ease infinite;
+	-moz-animation: split 2s 0.4444444444s ease infinite;
+	animation: split 2s 0.4444444444s ease infinite;
+}
+.preloader figure span:nth-child(5) {
+	-webkit-transform: rotate3d(0, 0, 1, 330deg);
+	-moz-transform: rotate3d(0, 0, 1, 330deg);
+	-ms-transform: rotate3d(0, 0, 1, 330deg);
+	-o-transform: rotate3d(0, 0, 1, 330deg);
+	transform: rotate3d(0, 0, 1, 330deg);
+}
+.preloader figure span:nth-child(5):after {
+	border-top-color: #95ff00;
+	-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+	-o-transform: rotate3d(0.5, 1, 0, 180deg);
+	transform: rotate3d(0.5, 1, 0, 180deg);
+	-webkit-animation: split 2s 0.5555555556s ease infinite;
+	-moz-animation: split 2s 0.5555555556s ease infinite;
+	animation: split 2s 0.5555555556s ease infinite;
+}
+.preloader figure span:nth-child(6) {
+	-webkit-transform: rotate3d(0, 0, 1, 390deg);
+	-moz-transform: rotate3d(0, 0, 1, 390deg);
+	-ms-transform: rotate3d(0, 0, 1, 390deg);
+	-o-transform: rotate3d(0, 0, 1, 390deg);
+	transform: rotate3d(0, 0, 1, 390deg);
+}
+.preloader figure span:nth-child(6):after {
+	border-top-color: #80ff00;
+	-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+	-o-transform: rotate3d(0.5, 1, 0, 180deg);
+	transform: rotate3d(0.5, 1, 0, 180deg);
+	-webkit-animation: split 2s 0.6666666667s ease infinite;
+	-moz-animation: split 2s 0.6666666667s ease infinite;
+	animation: split 2s 0.6666666667s ease infinite;
+}
+@-webkit-keyframes split {
+	0% {
+		-webkit-transform-origin: 50% 100%;
+		-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+	25% {
+		-webkit-transform-origin: 50% 100%;
+		-webkit-transform: rotate3d(0, 1, 0, 360deg);
+	}
+	50% {
+		opacity: 1;
+		-webkit-transform-origin: 100% 0%;
+		-webkit-transform: rotate3d(0, 1, 0, 360deg);
+	}
+	75% {
+		opacity: 0;
+		-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+}
+@-moz-keyframes split {
+	0% {
+		-moz-transform-origin: 50% 100%;
+		-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+	25% {
+		-moz-transform-origin: 50% 100%;
+		-moz-transform: rotate3d(0, 1, 0, 360deg);
+	}
+	50% {
+		opacity: 1;
+		-moz-transform-origin: 100% 0%;
+		-moz-transform: rotate3d(0, 1, 0, 360deg);
+	}
+	75% {
+		opacity: 0;
+		-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+	100% {
+		opacity: 1;
+		-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+}
+@keyframes split {
+	0% {
+		-webkit-transform-origin: 50% 100%;
+		-moz-transform-origin: 50% 100%;
+		-ms-transform-origin: 50% 100%;
+		-o-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+		-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+		-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+		-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+		-o-transform: rotate3d(0.5, 1, 0, 180deg);
+		transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+	25% {
+		-webkit-transform-origin: 50% 100%;
+		-moz-transform-origin: 50% 100%;
+		-ms-transform-origin: 50% 100%;
+		-o-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+		-webkit-transform: rotate3d(0, 1, 0, 360deg);
+		-moz-transform: rotate3d(0, 1, 0, 360deg);
+		-ms-transform: rotate3d(0, 1, 0, 360deg);
+		-o-transform: rotate3d(0, 1, 0, 360deg);
+		transform: rotate3d(0, 1, 0, 360deg);
+	}
+	50% {
+		opacity: 1;
+		-webkit-transform-origin: 100% 0%;
+		-moz-transform-origin: 100% 0%;
+		-ms-transform-origin: 100% 0%;
+		-o-transform-origin: 100% 0%;
+		transform-origin: 100% 0%;
+		-webkit-transform: rotate3d(0, 1, 0, 360deg);
+		-moz-transform: rotate3d(0, 1, 0, 360deg);
+		-ms-transform: rotate3d(0, 1, 0, 360deg);
+		-o-transform: rotate3d(0, 1, 0, 360deg);
+		transform: rotate3d(0, 1, 0, 360deg);
+	}
+	75% {
+		opacity: 0;
+		-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+		-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+		-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+		-o-transform: rotate3d(0.5, 1, 0, 180deg);
+		transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: rotate3d(0.5, 1, 0, 180deg);
+		-moz-transform: rotate3d(0.5, 1, 0, 180deg);
+		-ms-transform: rotate3d(0.5, 1, 0, 180deg);
+		-o-transform: rotate3d(0.5, 1, 0, 180deg);
+		transform: rotate3d(0.5, 1, 0, 180deg);
+	}
+}