Added 3 more loaders

README.md

@@ -11,10 +11,11 @@ A small library for managing loaders.
 ## Usage
 ### Initialize loader with
 ```
+import Loader from 'brsjs-loader';
 let loader = new Loader('id', 'type');
 ```
 #### 'id' is id of your element where you want to show your loader.
-#### 'type' is type of loader. Currently only 'standard' is supported.
+#### 'type' is type of loader.
 ### Show loader with
 ```
 loader.show();
@@ -26,11 +27,15 @@ loader.hide();
 
 # Loaders
 - standard
+- small-circle
+- bars
+- dots
 
 ## Example
 [Live example](https://stackblitz.com/edit/brsjs-loader-live-example)
 
     let loader = new Loader('app', 'standard');
 
     loader.show();
+    loader.hide();
 

index.js

@@ -1,4 +1,4 @@
-import './style.css';
+import './style.min.css';
 
 class Loader {
     constructor(placeToDisplay, type) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "brsjs-loader",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Simple library for managing loaders",
   "main": "index.js",
   "scripts": {

style.css

@@ -1,14 +1,14 @@
+/* Standard loader */
 .standard-brsjsloader {
     height: 4px;
-    width: 100%;
-    position: absolute;
-    overflow: hidden;
-    background-color: #ddd;
-    top: 0;
-    z-index: 100;
-}
-
-.standard-brsjsloader:before {
+      width: 100%;
+      position: absolute;
+      overflow: hidden;
+      background-color: #ddd;
+      top: 0;
+      z-index: 100;
+  }
+  .standard-brsjsloader:before{
     display: block;
     position: absolute;
     content: "";
@@ -17,26 +17,151 @@
     height: 4px;
     background-color: #2980b9;
     animation: standard-loading-brsjsloader 2s linear infinite;
-}
-
-@keyframes standard-loading-brsjsloader {
-    from {
-        left: -200px;
-        width: 30%;
+  }
+
+  @keyframes standard-loading-brsjsloader {
+      from {left: -200px; width: 30%;}
+      50% {width: 30%;}
+      70% {width: 70%;}
+      80% { left: 50%;}
+      95% {left: 120%;}
+      to {left: 100%;}
+  }
+
+  /* Small circle loader */
+  .small-circle-brsjsloader {
+      border: 5px solid #f3f3f3;
+      -webkit-animation: spin 1s linear infinite;
+      animation: small-circle-brsjsloader 1s linear infinite;
+      border-top: 5px solid #555;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+  }
+
+  @keyframes small-circle-brsjsloader {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+  }
+
+  /* Bars loader */
+  .bars-brsjsloader,
+  .bars-brsjsloader:before,
+  .bars-brsjsloader:after {
+    background: #ffffff;
+    -webkit-animation: bars-brsjsloader 1s infinite ease-in-out;
+    animation: bars-brsjsloader 1s infinite ease-in-out;
+    width: 1em;
+    height: 4em;
+  }
+  .bars-brsjsloader {
+    color: #ffffff;
+    text-indent: -9999em;
+    margin: 88px auto;
+    margin-top: 40px;
+    position: relative;
+    font-size: 11px;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+  .bars-brsjsloader:before,
+  .bars-brsjsloader:after {
+    position: absolute;
+    top: 0;
+    content: '';
+  }
+  .bars-brsjsloader:before {
+    left: -1.5em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  .bars-brsjsloader:after {
+    left: 1.5em;
+  }
+  @-webkit-keyframes bars-brsjsloader {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0;
+      height: 4em;
     }
-    50% {
-        width: 30%;
+    40% {
+      box-shadow: 0 -2em;
+      height: 5em;
     }
-    70% {
-        width: 70%;
+  }
+  @keyframes bars-brsjsloader {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0;
+      height: 4em;
+    }
+    40% {
+      box-shadow: 0 -2em;
+      height: 5em;
+    }
+  }
+
+  .dots-brsjsloader,
+  .dots-brsjsloader:before,
+  .dots-brsjsloader:after {
+    border-radius: 50%;
+    width: 2.5em;
+    height: 2.5em;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation: loadots-brsjsloaderd 1.8s infinite ease-in-out;
+    animation: dots-brsjsloader 1.8s infinite ease-in-out;
+  }
+  .dots-brsjsloader {
+    color: #ffffff;
+    font-size: 10px;
+    margin: 80px auto;
+        margin-top: 40px;
+    position: relative;
+    text-indent: -9999em;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+  .dots-brsjsloader:before,
+  .dots-brsjsloader:after {
+    content: '';
+    position: absolute;
+    top: 0;
+  }
+  .dots-brsjsloader:before {
+    left: -3.5em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  .dots-brsjsloader:after {
+    left: 3.5em;
+  }
+  @-webkit-keyframes dots-brsjsloader {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 2.5em 0 -1.3em;
     }
-    80% {
-        left: 50%;
+    40% {
+      box-shadow: 0 2.5em 0 0;
     }
-    95% {
-        left: 120%;
+  }
+  @keyframes dots-brsjsloader {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 2.5em 0 -1.3em;
     }
-    to {
-        left: 100%;
+    40% {
+      box-shadow: 0 2.5em 0 0;
     }
-}
+  }
+