grape-web - npm Package Compare versions

Comparing version 0.27.1 to 0.28.0

lib/spinner/Spinner.js

@@ -39,3 +39,4 @@ 'use strict';
       image: _react.PropTypes.string,
-      overlay: _react.PropTypes.bool
+      overlay: _react.PropTypes.bool,
+      size: _react.PropTypes.number
     },
@@ -49,3 +50,4 @@ enumerable: true
       image: undefined,
-      overlay: false
+      overlay: false,
+      size: 60
     },
@@ -91,9 +93,21 @@ enumerable: true
       if (!this.state.active) return null;
-      var classes = this.props.sheet.classes;
+      var _props = this.props;
+      var sheet = _props.sheet;
+      var width = _props.size;
+      var height = _props.size;
+      var image = _props.image;
 
-      var backgroundImage = 'url(' + this.props.image + ')';
+      var backgroundImage = 'url(' + image + ')';
+      var classes = sheet.classes;
+
       var className = classes.spinner;
       if (this.props.overlay) className += ' ' + classes.overlay;
       // TODO use svg.
-      return _react2['default'].createElement('span', { className: className, style: { backgroundImage: backgroundImage } });
+      return _react2['default'].createElement(
+        'span',
+        { className: className },
+        _react2['default'].createElement('i', {
+          className: classes.animation,
+          style: { backgroundImage: backgroundImage, width: width, height: height } })
+      );
     }
@@ -100,0 +114,0 @@ }]);

lib/spinner/style.js

@@ -24,9 +24,16 @@ 'use strict';
     height: '100%',
-    width: '100%',
-    background: 'no-repeat center'
+    width: '100%'
   },
+  animation: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    background: 'no-repeat center',
+    backgroundSize: '100%'
+  },
   overlay: {
-    backgroundColor: (0, _color2['default'])(_grapeThemeDistBaseColors2['default'].white).alpha(0.7).rgbaString()
+    background: (0, _color2['default'])(_grapeThemeDistBaseColors2['default'].white).alpha(0.7).rgbaString()
   }
 };
 module.exports = exports['default'];

package.json

 {
   "name": "grape-web",
-  "version": "0.27.1",
+  "version": "0.28.0",
   "dependencies": {
@@ -5,0 +5,0 @@ "jss": "^3.3.0",

No alert changes

Improved metrics

Total package byte prevSize

121571

increased by0.4%

Lines of code

1344

increased by1.51%

No dependency changes