New version - v2.0.8

README.md

@@ -49,4 +49,9 @@ In 2.0.6 you can use the cmponent: ``` RSGFormBasic ``` <br>
 * 2.0.7 <br>
 In 2.0.7 you can use the ``` RSGTransition ``` style function <br>
 [https://github.com/Devs123/rsg-components/wiki/RSGTransition](https://github.com/Devs123/rsg-components/wiki/RSGTransition) <br>
-Note: Added sample paragraph in index.html
+Note: Added sample paragraph in index.html
+
+* 2.0.8 <br>
+In 2.0.8 you can use the component ``` RSGProgressBar ``` <br>
+[https://github.com/Devs123/rsg-components/wiki/RSGProgressBar](https://github.com/Devs123/rsg-components/wiki/RSGProgressBar) <br>
+Note: Added new images in GitHub repo.

lib/RSGProgressBar.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var _ = require('lodash');
+var txt = "Initializing";
+var style = ".RSGProgressBar{  background: rgb(210, 215, 215);  box-shadow: inset 0 1.5px 3px rgb(150, 150, 150);  -webkit-box-shadow: inset 0 1.5px 3px rgb(150, 150, 150);  border-radius: 3px;  height: 20px;} .PP{  background: rgb(51, 122, 183);  transition: width 1s;  width: 1%;  height: 20px;  border-radius: 5px;  text-align: center;  color: white; }";
+
+var RSGProgressBar = React.createClass({
+  displayName: 'RSGProgressBar',
+
+  render: function render() {
+    if (!this.props.anim && !this.props.progressCount && typeof this.props.progressCount !== "number") {
+      return React.DOM.div({}, React.DOM.b({style:{'color': 'red'}}, "You MUST set progressCount prop as number!!!"));
+    }
+    // // // // //
+    if (this.props.checkered === true) {
+      style = ".RSGProgressBar { background: rgb(210, 215, 215); box-shadow: inset 0 1.5px 3px rgb(150, 150, 150); -webkit-box-shadow: inset 0 1.5px 3px rgb(150, 150, 150); border-radius: 3px; height: 20px; } .PP { background: url(https://raw.githubusercontent.com/Devs123/rsg-components/master/images/Progress.png); transition: width 1s; height: 20px; border-radius: 5px;text-align: center; color: white; }";
+    }else if(this.props.checkered === "animated"){
+      style = ".RSGProgressBar { background: rgb(210, 220, 220); box-shadow: inset 0 1.5px 3px rgb(150, 150, 150); -webkit-box-shadow: inset 0 1.5px 3px rgb(150, 150, 150); border-radius: 3px; height: 20px; } @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } .PP { background-image: url(https://raw.githubusercontent.com/Devs123/rsg-components/master/images/Progress.png); background-position: 0px 0px; background-repeat: repeat-x; animation: animatedBackground 75s linear infinite; transition: width 1s; height: 20px; border-radius: 5px; text-align: center; color: white; }";
+    }
+
+    txt = this.props.children && this.props.children.trim() ?
+    this.props.children + " " + this.props.progressCount + "%"
+    : this.props.progressCount + "%";
+    var PPwidth = this.props.progressCount + "%";
+
+    if (this.props.anim === true && this.children) {
+      console.warning('Now you are in "anim"-mode. Move your "children" to arguments in anim() function !!!');
+    }
+
+    var arr = [
+      React.DOM.style({
+        key: 1
+      }, style),
+      React.DOM.div({
+        className: 'RSGProgressBar',
+        key: 2
+      }, React.DOM.div({
+        className: 'PP',
+        style: { width: PPwidth },
+        key: 3
+      }, txt))
+    ]
+
+    if (typeof this.props.animated === "number") {
+      var ScriptInString = 'var p = 1; var text = ' + txt + '; var el = document.querySelector(".PP"); var i = setInterval(function(){ el.style.width = p + "%"; el.innerText = p + "% " + text; p++; if(p > ' + this.props.progressCount + '){ clearInterval(i); } }, ' + this.props.animated + ');';
+      var script = React.DOM.script({ key: 4 }, ScriptInString)
+      arr.push(script);
+    }
+
+    return React.DOM.div({}, arr);
+  }
+});
+
+
+exports['RSGProgressBar'] = RSGProgressBar;
+module.exports = exports['RSGProgressBar'];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsg-components",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Some React.js components with beautiful styles and modified props",
   "main": "rsg-components.js",
   "scripts": {

rsg-components.js

@@ -5,3 +5,4 @@ exports.RSGButton = require('./lib/RSGButton');
 exports.RSGLabel = require('./lib/RSGLabel');
 exports.RSGFormBasic = require('./lib/RSGFormBasic');
 exports.RSGTransition = require('./lib/RSGTransition');
+exports.RSGProgressBar = require('./lib/RSGProgressBar');

src/progress.css

@@ -0,0 +1,27 @@
+.RSGProgressBar {
+  background: rgb(210, 215, 215);
+  box-shadow: inset 0 1.5px 3px rgb(150, 150, 150);
+  -webkit-box-shadow: inset 0 1.5px 3px rgb(150, 150, 150);
+  border-radius: 3px;
+  height: 20px;
+}
+
+@keyframes animatedBackground {
+  from { background-position: 0 0; }
+  to { background-position: 100% 0; }
+}
+
+.PP {
+  background-image: url(https://raw.githubusercontent.com/Devs123/rsg-components/master/images/Progress.png);
+  background-position: 0px 0px;
+  background-repeat: repeat-x;
+
+  animation: animatedBackground 75s linear infinite;
+  transition: width 1s;
+  width: 1%;
+  height: 20px;
+  border-radius: 5px;
+  text-align: center;
+  vertical-text-align: center;
+  color: white;
+}

src/progress_anim.js

@@ -0,0 +1,14 @@
+window.anim = function(txt1, txt2, progressCount, speed){
+  if (!progressCount || !speed) alert("You MUST set text/string, progressCount and speed in the anim() function"); 
+  var p = 1;
+  var el = document.querySelector('.PP');
+  var i = setInterval(function(){
+    el.style.width = p + "%";
+    el.style.transition = "width " + (speed / 500) + "s linear;";
+    el.innerHTML = txt1 + " " + p + "% " + txt2;
+    p++;
+    if(p > progressCount){
+      clearInterval(i);
+    }
+  }, speed);
+}