Initial Commit

Author: shamin

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "env",
+    "react",
+    "stage-2"
+  ]
+}

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  "extends": "airbnb",
+  "parserOptions": {
+      "ecmaVersion": 8,
+      "ecmaFeatures": {
+        "experimentalObjectRestSpread": true
+      }
+    },
+  "rules": {
+      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+      "comma-dangle": ["error", "never"],
+      "semi": [2, "never"],
+      "import/no-named-as-default": 0,
+      "import/no-named-as-default-member": 0,
+      "react/prefer-stateless-function": 0,
+      "indent": ["error", 4],
+      "indent": ["warn", 2],
+    },
+  "env": {
+      "browser": true,
+      "node": true
+    }
+};

.gitignore

@@ -0,0 +1,50 @@
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+node_modules/
+
+#Dist directory
+dist/
+
+### Visual Studio Code ###
+.settings/
+.vscode/
+tsconfig.json
+jsconfig.json
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

example/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Loading from '../lib/loading'
+
+ReactDOM.render(
+  <div>
+    <Loading loading background="#2ecc71" loaderColor="#3498db" />
+  </div>,
+  document.getElementById('app')
+)
+

lib/loading.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import './styles.css'
+
+class Loading extends React.Component {
+  render() {
+    const backgroundColor = {
+      background: this.props.background
+    }
+    const loaderColor = {
+      background: this.props.loaderColor
+    }
+    if (this.props.loading) {
+      return (
+        <div className="loading-background" style={backgroundColor}>
+          <div className="loading-bar" >
+            <div className="loading-circle-1" style={loaderColor} />
+            <div className="loading-circle-2" style={loaderColor} />
+          </div>
+        </div>
+      )
+    }
+    return null
+  }
+}
+
+Loading.defaultProps = {
+  loading: false,
+  background: 'rgba(236, 240, 241, 0.7)',
+  loaderColor: '#e74c3c'
+}
+
+Loading.propTypes = {
+  loading: PropTypes.bool,
+  background: PropTypes.string,
+  loaderColor: PropTypes.string
+}
+
+export default Loading

lib/styles.css

@@ -0,0 +1,56 @@
+.loading-background {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  cursor: progress;
+}
+.loading-background .loading-bar {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 50px;
+  height: 50px;
+  transform: translate(-50%, -50%);
+}
+.loading-background .loading-bar .loading-circle-1,
+.loading-background .loading-bar .loading-circle-2 {
+  content: " ";
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #e74c3c;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+.loading-background .loading-bar .loading-circle-2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes sk-bounce {
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}