simplify loader

README.md

@@ -27,7 +27,7 @@ import ReactIntense from 'react-intense'
 | trigger   | Component<any> | Option to override the thumbnail image as the trigger to maximize the image. Passed `onClick` as prop to trigger maximized view. |
 | vertical  | boolean        | Images lock to scrolling either horizontally (default) or vertically.                                                            |
 | moveSpeed | number         | How fast to scroll images when following mouse.                                                                                  |
-| loader    | string         | The class for the loading animation that shows when the image is being loaded for maximized view. Default is in `loader.css`.    |
+| loader    | string         | The class for the loading animation that shows when the image is being loaded for maximized view. Default is `'ri-loader'`.    |
 
 ## Styling
 

dist/ReactIntense.css

@@ -14,7 +14,7 @@
     no-drop;
 }
 
-.ri-wrapper a.clicked {
+.ri-wrapper .ri-clicked {
   box-shadow: inset 0 0 0 500px rgba(0, 0, 0, 0.2);
 }
 
@@ -64,17 +64,6 @@
   margin-top: 5px;
 }
 
-.ri-loader > div {
-  width: 12px;
-  height: 12px;
-  margin-left: 2px;
-  margin-top: 2px;
-}
-
-.ri-loader > div > div {
-  background: #fff;
-}
-
 .ri-trigger {
   width: 200px;
   height: 200px;
@@ -84,3 +73,20 @@
   justify-content: center;
   align-items: center;
 }
+
+.ri-loader {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(255,255,255,0.2);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+}
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}