diff --git a/app/common/directives/loader.html b/app/common/directives/loader.html
new file mode 100644
index 0000000..65f818b
--- /dev/null
+++ b/app/common/directives/loader.html
@@ -0,0 +1,3 @@
+<div class="loader__wrapper"><svg class="loader" viewBox="25 25 50 50">
+	<circle class="loader__path" cx="50" cy="50" r="20"/></circle>
+</svg></div>
\ No newline at end of file
diff --git a/app/common/styles/elements/loader.scss b/app/common/styles/elements/loader.scss
new file mode 100644
index 0000000..a711e04
--- /dev/null
+++ b/app/common/styles/elements/loader.scss
@@ -0,0 +1,40 @@
+// Loader
+
+@keyframes rotate {
+  0% {  transform: rotate(0deg);}
+  100% {  transform: rotate(360deg);}
+}
+
+.loader__wrapper {
+  width: 115px;
+  height: 115px;
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 3em 0;
+}
+
+.loader{
+  width:100%;
+  height:100%;
+  transform: translateZ(0) rotate(360deg);
+  transform-origin: center center;
+  -moz-transform-origin: 50px 50px; /* firefox requires fixed values */
+  animation: rotate 1s linear infinite;
+}
+
+.loader__path{
+  stroke-dasharray: 80px;
+  stroke-dashoffset: 9.7px;
+  r: 16px;
+  cx: 50px;
+  cy: 50px;
+  fill: transparent;
+  stroke: $loaderColor;
+  stroke-width: 5px;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
+  -webkit-animation: a 4s ease-out infinite;
+  animation: a 4s ease-out infinite;
+}
\ No newline at end of file