Add more features into loader

src/custombox.scss

@@ -1827,11 +1827,14 @@ $effect23: #{$cb}-flash;
   }
 }
 .#{$cb}-loader {
-  border: #999 solid 5px;
+  border-style: solid;
+  border-width: 5px;
   border-radius: 50%;
   width: 40px;
   height: 40px;
-  animation: spin 1.5s linear infinite;
+  animation-name: spin;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
   position: fixed;
   top: 50%;
   left: 50%;

src/custombox.spec.ts

@@ -811,14 +811,17 @@ describe('Custombox', () => {
           target: '#foo-1',
         },
         loader: {
-          color: '#F00'
+          color: '#F00',
+          background: '#FFF',
+          speed: 1500,
         }
       }).open();
 
       setTimeout(() => {
         expect(hasElement('.custombox-loader')).toBe(true);
         let loader: any = document.querySelector('.custombox-loader');
-        expect(loader.style.borderTopColor).toEqual('rgb(255, 0, 0)');
+        expect(loader.style.borderColor).toEqual('rgb(255, 0, 0) rgb(255, 255, 255) rgb(255, 255, 255)');
+        expect(loader.style.animationDuration).toEqual('1500ms');
         done();
       }, 200);
     });

src/custombox.ts

@@ -30,6 +30,8 @@ namespace Custombox {
   interface LoaderSchema {
     active: boolean;
     color: string;
+    background: string;
+    speed: number;
   }
 
   interface Speed {
@@ -111,7 +113,9 @@ namespace Custombox {
     };
     loader = {
       active: true,
-      color: '#000'
+      color: '#FFF',
+      background: '#999',
+      speed: 1000,
     };
   }
 
@@ -133,7 +137,9 @@ namespace Custombox {
     constructor(private options: OptionsSchema) {
       this.element = document.createElement('div');
       this.element.classList.add(`${CB}-loader`);
+      this.element.style.borderColor = this.options.loader.background;
       this.element.style.borderTopColor = this.options.loader.color;
+      this.element.style.animationDuration = `${this.options.loader.speed}ms`;
       document.body.appendChild(this.element);
     }