Initial

README.md

@@ -0,0 +1,31 @@
+Loader
+=========
+
+A small library for managing loaders.
+
+## Installation
+
+  `npm install brsjs-loader`
+
+## Usage
+### Initialize loader with
+```
+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.
+### Show loader with
+```
+loader.show();
+```
+### Hide loader with
+```
+loader.hide();
+```
+
+## Example
+
+    let loader = new Loader('app', 'standard');
+
+    loader.show();
+

index.js

@@ -0,0 +1,21 @@
+import './style.css';
+
+class Loader {
+    uniqueClassName = '-brsjsloader';
+    constructor(placeToDisplay, type) {
+        this.type = type ? type : 'standard';
+        this.element = document.getElementById(placeToDisplay);
+        this.loader = document.createElement("div");
+        this.loader.className = this.type + this.uniqueClassName;
+    }
+
+    hide() {
+        this.loader.remove()
+    }
+
+    show() {
+        this.element.appendChild(this.loader)
+    }
+}
+
+export default Loader;

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "brsjs-loader",
+  "version": "1.0.0",
+  "description": "Simple library for managing loaders",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BrsJsk/brsjs-loader.git"
+  },
+  "keywords": [
+    "javascript",
+    "loader",
+    "css"
+  ],
+  "author": "Boris Joskic",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/BrsJsk/brsjs-loader/issues"
+  },
+  "homepage": "https://github.com/BrsJsk/brsjs-loader#readme"
+}

style.css

@@ -0,0 +1,42 @@
+.standard-brsjsloader {
+    height: 4px;
+    width: 100%;
+    position: absolute;
+    overflow: hidden;
+    background-color: #ddd;
+    top: 0;
+    z-index: 100;
+}
+
+.standard-brsjsloader:before {
+    display: block;
+    position: absolute;
+    content: "";
+    left: -200px;
+    width: 200px;
+    height: 4px;
+    background-color: #2980b9;
+    animation: standard-loading-brsjsloader 2s linear infinite;
+}
+
+@keyframes standard-loading-brsjsloader {
+    from {
+        left: -200px;
+        width: 30%;
+    }
+    50% {
+        width: 30%;
+    }
+    70% {
+        width: 70%;
+    }
+    80% {
+        left: 50%;
+    }
+    95% {
+        left: 120%;
+    }
+    to {
+        left: 100%;
+    }
+}