1 files changed, 89 insertions, 0 deletions
diff --git a/vendor/desandro/imagesloaded/sandbox/progress/index.html b/vendor/desandro/imagesloaded/sandbox/progress/index.html
new file mode 100644
index 000000000..b01ce28c5
--- /dev/null
+++ b/vendor/desandro/imagesloaded/sandbox/progress/index.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>progress</title>
+
+  <style>
+  #image-container img {
+    max-height: 140px;
+  }
+
+  li {
+    height: 140px;
+    min-width: 100px;
+    display: block;
+    float: left;
+    list-style: none;
+    margin: 0 5px 5px 0;
+    background-color: black;
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
+  li img,
+  #status {
+    -webkit-transition: opacity 0.4s;
+       -moz-transition: opacity 0.4s;
+        -ms-transition: opacity 0.4s;
+            transition: opacity 0.4s;
+  }
+
+  li.is-loading {
+    background-color: black;
+    background-image: url('http://desandro.github.io/imagesloaded/assets/loading.gif');
+  }
+
+  li.is-broken {
+    background-image: url('http://desandro.github.io/imagesloaded/assets/broken.png');
+    background-color: #be3730;
+    width: 120px;
+  }
+
+  li.is-loading img,
+  li.is-broken img {
+    opacity: 0;
+  }
+
+  .buttons { margin-bottom: 1.0em; }
+
+  button {
+    font-size: 18px;
+    padding: 0.4em 0.8em;
+    font-family: sans-serif;
+  }
+
+  #status {
+    opacity: 0;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    background: hsla( 0, 0%, 0%, 0.8);
+    padding: 20px;
+    border-radius: 10px;
+    z-index: 2; /* over other stuff */
+  }
+  </style>
+  
+</head>
+<body>
+
+  <h1>progress</h1>
+
+  <div class="buttons">
+    <button id="add">Add images</button>
+    <button id="reset">Reset</button>
+  </div>
+  <div id="status">
+    <progress max="7" value="0"></progress>
+  </div>
+  <div id="image-container"></div>
+
+<script src="../../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../../imagesloaded.js"></script>
+<script src="progress.js"></script>
+
+</body>
+</html>