add loader and loader box

src/scss/cdb-components/shapes/check-circle.scss

@@ -100,25 +100,25 @@ Description
 
   &.is-medium {
     &::before {
-      top: 6px;
+      top: 5px;
       left: 4px;
       height: 4px;
     }
     &::after {
-      top: 4px;
+      top: 3px;
       right: 5px;
-      height: 7px;
+      height: 6px;
     }
   }
 
   &.is-small {
     &::before {
-      top: 5px;
-      left: 3px;
+      top: 4px;
+      left: 2px;
       height: 3px;
     }
     &::after {
-      top: 3px;
+      top: 2px;
       right: 3px;
       height: 5px;
     }
@@ -143,4 +143,14 @@ Description
   }
 }
 
+.CDB-Shape-tick.is-green {
+  &::before {
+    background: $cHighlight;
+  }
+  &::after {
+    background: $cHighlight;
+  }
+}
+
+
 

src/scss/cdb-components/shapes/close.scss

@@ -137,3 +137,13 @@ Description
     background: $cWhite;
   }
 }
+
+.CDB-Shape-close.is-red {
+  &::before {
+    background: $cError;
+  }
+  &::after {
+    background: $cError;
+  }
+}
+

src/scss/cdb-components/shapes/error-circle.scss

@@ -66,12 +66,18 @@ Description
   &.is-small {
     width: 9px;
     height: 9px;
-    margin: 2px auto;
+    margin: 0 auto;
   }
   &.is-blue {
     border: 1px solid $cBlue;
   }
   &.is-white {
     border: 1px solid $cWhite;
+  } 
+  &.is-green {
+    border: 1px solid $cHighlight;
+  }
+  &.is-red {
+    border: 1px solid $cError;
   }
 }

src/scss/cdb-components/shapes/threePoints.scss

@@ -104,4 +104,3 @@ Description
     background: $cWhite;
   }
 }
-