simple buffering loaded implemented

src/routes/Player/BufferingLoader/BufferingLoader.js

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './styles';
+
+class BufferingLoader extends PureComponent {
+    render() {
+        if (!this.props.buffering) {
+            return null;
+        }
+
+        return (
+            <div className={classnames(this.props.className, styles['buffering-loader-container'])}>
+                <div className={styles['bufferring-loader']} />
+            </div>
+        );
+    }
+}
+
+BufferingLoader.propTypes = {
+    className: PropTypes.string,
+    buffering: PropTypes.bool
+};
+
+export default BufferingLoader;

src/routes/Player/BufferingLoader/index.js

@@ -0,0 +1,3 @@
+import BufferingLoader from './BufferingLoader';
+
+export default BufferingLoader;

src/routes/Player/BufferingLoader/styles.less

@@ -0,0 +1,24 @@
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.buffering-loader-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .bufferring-loader {
+        width: 150px;
+        height: 150px;
+        border-radius: 50%;
+        border: 10px solid #f3f3f3;
+        border-top: 10px solid #3498db;
+        animation: spin 2s linear infinite;
+    }
+}