Create loading icon

Author: fritz-c

src/react-image-lightbox.js

@@ -26,7 +26,8 @@ import baseStyles from './style.scss';
 
 // Add fallback classes for browsers without flexbox support
 let styles = baseStyles;
-if (getIEVersion() < 10) {
+const _ieVersion = getIEVersion();
+if (_ieVersion < 10) {
     styles = {
         ...styles,
         toolbarSide:      `${styles.toolbarSide} ${styles.toolbarSideNoFlex}`,
@@ -799,13 +800,43 @@ class ReactImageLightbox extends Component {
 
             const bestImageInfo = this.getBestImageForType(srcType);
             if (bestImageInfo === null) {
+                let loadingIcon;
+                if (_ieVersion < 10) {
+                    loadingIcon = (
+                        <div className={styles.loadingContainer__icon} >
+                            Loading...
+                        </div>
+                    );
+                } else {
+                    loadingIcon = (
+                        <div className={`${styles.loadingCircle} ${styles.loadingContainer__icon}`}>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                            <div className={styles.loadingCirclePoint}></div>
+                        </div>
+                    );
+                }
+
                 // Fall back to loading icon if the thumbnail has not been loaded
                 images.push(
                     <div
                         className={`${imageClass} ${styles.image} not-loaded`}
                         style={imageStyle}
                         key={this.props[srcType] + keyEndings[srcType]}
-                    />
+                    >
+                        <div className={styles.loadingContainer} >
+                            {loadingIcon}
+                        </div>
+                    </div>
                 );
 
                 return;

src/style.scss

@@ -147,7 +147,7 @@ $toolbarHeight: 50px;
     display: inline-block;
     line-height: $toolbarHeight;
     padding: 0;
-    color: #FFFFFF;
+    color: #FFF;
     font-size: 120%;
     max-width: 100%;
     overflow: hidden;
@@ -199,3 +199,68 @@ $toolbarHeight: 50px;
 .outerAnimating {
     animation-name: closeWindow;
 }
+
+@keyframes pointFade {
+    0%, 19.999%, 100% { opacity: 0; }
+    20% { opacity: 1; }
+}
+
+.loadingCircle {
+    width: 60px;
+    height: 60px;
+    position: relative;
+}
+
+.loadingCirclePoint {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    $point-count: 12;
+    $spin-animation-time: 1200ms;
+
+    &:before {
+        content: '';
+        display: block;
+        margin: 0 auto;
+        width: 15%;
+        height: 15%;
+        background-color: #FFF;
+        border-radius: 30%;
+        animation: pointFade $spin-animation-time infinite ease-in-out both;
+    }
+
+    @for $i from 1 through (($point-count + 1) / 2) {
+        &:nth-of-type(#{$i}) {
+            transform: rotate(360deg / $point-count * ($i - 1));
+        }
+
+        &:nth-of-type(#{$i + $point-count / 2}) {
+            transform: rotate(180deg + 360deg / $point-count * ($i - 1));
+        }
+
+        &:nth-of-type(#{$i}), &:nth-of-type(#{$i + $point-count / 2}) {
+            &:before {
+                animation-delay: - $spin-animation-time + ($spin-animation-time / $point-count * 2 * ($i - 1));
+            }
+        }
+    }
+}
+
+.loadingContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.loadingContainer__icon {
+    color: #FFF;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}