diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 38dd401..6510a6c 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -82,8 +82,6 @@
 //Inventory
 $active: #c6b6f5;
 $inactive: $severity-medium-lightbg;
-$present: #b1bef3;
-$not-present: $severity-medium-lightbg;
 
 // Links
 $links: #3c6df0;
@@ -95,4 +93,5 @@
 $nav__top-level-color: #1a273b;
 $nav__second-level-color: #e6e9ed;
 
-
+//Loader
+$loaderColor: #1d3458;
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 7b1d1c5..c9e29d9 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -6,6 +6,7 @@
 @import "alerts";
 @import "inline-confirm";
 @import "accordion";
+@import "loader";
 @import "content-search";
 @import "paginate";
 @import "thresholds";
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