Added Progress bar to docs

Dogfalo · Jan 9, 2015 · 0c4e9b9 · 0c4e9b9
1 parent 9f9cda7
commit 0c4e9b9
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 79 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
@@ -2275,35 +2275,48 @@ span.badge {
   background-clip: padding-box;
   margin: 0.5rem 0 1rem 0;
   overflow: hidden; }
+  .progress .determinate {
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    bottom: 0;
+    background-color: #03a9f4;
+    -webkit-transition: width 0.3s linear;
+    -moz-transition: width 0.3s linear;
+    -o-transition: width 0.3s linear;
+    -ms-transition: width 0.3s linear;
+    transition: width 0.3s linear; }
   .progress .indeterminate {
     background-color: #03a9f4; }
     .progress .indeterminate:before {
       content: '';
-      background-color: inherit;
       position: absolute;
+      background-color: inherit;
       top: 0;
+      left: 0;
       bottom: 0;
-      -webkit-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      -moz-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      -ms-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      -o-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
+      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      -moz-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      -ms-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      -o-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
     .progress .indeterminate:after {
       content: '';
       position: absolute;
       background-color: inherit;
       top: 0;
+      left: 0;
       bottom: 0;
-      -webkit-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -moz-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -ms-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -o-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -webkit-animation-delay: 1.05s;
-      -moz-animation-delay: 1.05s;
-      -ms-animation-delay: 1.05s;
-      -o-animation-delay: 1.05s;
-      animation-delay: 1.05s; }
+      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -moz-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -ms-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -o-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -webkit-animation-delay: 1.15s;
+      -moz-animation-delay: 1.15s;
+      -ms-animation-delay: 1.15s;
+      -o-animation-delay: 1.15s;
+      animation-delay: 1.15s; }
 
 @-webkit-keyframes indeterminate {
   0% {
@@ -2346,42 +2359,42 @@ span.badge {
 
 @-webkit-keyframes indeterminate-short {
   0% {
-    left: -100%;
+    left: -200%;
     right: 100%; }
 
   60% {
-    left: 105%;
-    right: -10%; }
+    left: 107%;
+    right: -8%; }
 
   100% {
-    left: 105%;
-    right: -15%; } }
+    left: 107%;
+    right: -8%; } }
 
 @-moz-keyframes indeterminate-short {
   0% {
-    left: -100%;
+    left: -200%;
     right: 100%; }
 
   60% {
-    left: 105%;
-    right: -10%; }
+    left: 107%;
+    right: -8%; }
 
   100% {
-    left: 105%;
-    right: -15%; } }
+    left: 107%;
+    right: -8%; } }
 
 @keyframes indeterminate-short {
   0% {
-    left: -100%;
+    left: -200%;
     right: 100%; }
 
   60% {
-    left: 105%;
-    right: -10%; }
+    left: 107%;
+    right: -8%; }
 
   100% {
-    left: 105%;
-    right: -15%; } }
+    left: 107%;
+    right: -8%; } }
 
 /*******************
   Utility Classes

diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
@@ -2275,35 +2275,48 @@ span.badge {
   background-clip: padding-box;
   margin: 0.5rem 0 1rem 0;
   overflow: hidden; }
+  .progress .determinate {
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    bottom: 0;
+    background-color: #03a9f4;
+    -webkit-transition: width 0.3s linear;
+    -moz-transition: width 0.3s linear;
+    -o-transition: width 0.3s linear;
+    -ms-transition: width 0.3s linear;
+    transition: width 0.3s linear; }
   .progress .indeterminate {
     background-color: #03a9f4; }
     .progress .indeterminate:before {
       content: '';
-      background-color: inherit;
       position: absolute;
+      background-color: inherit;
       top: 0;
+      left: 0;
       bottom: 0;
-      -webkit-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      -moz-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      -ms-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      -o-animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      animation: indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
+      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      -moz-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      -ms-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      -o-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
     .progress .indeterminate:after {
       content: '';
       position: absolute;
       background-color: inherit;
       top: 0;
+      left: 0;
       bottom: 0;
-      -webkit-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -moz-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -ms-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -o-animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      animation: indeterminate-short 2s cubic-bezier(0.285, 0.59, 0.355, 1) infinite;
-      -webkit-animation-delay: 1.05s;
-      -moz-animation-delay: 1.05s;
-      -ms-animation-delay: 1.05s;
-      -o-animation-delay: 1.05s;
-      animation-delay: 1.05s; }
+      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -moz-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -ms-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -o-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -webkit-animation-delay: 1.15s;
+      -moz-animation-delay: 1.15s;
+      -ms-animation-delay: 1.15s;
+      -o-animation-delay: 1.15s;
+      animation-delay: 1.15s; }
 
 @-webkit-keyframes indeterminate {
   0% {
@@ -2346,42 +2359,42 @@ span.badge {
 
 @-webkit-keyframes indeterminate-short {
   0% {
-    left: -100%;
+    left: -200%;
     right: 100%; }
 
   60% {
-    left: 105%;
-    right: -10%; }
+    left: 107%;
+    right: -8%; }
 
   100% {
-    left: 105%;
-    right: -15%; } }
+    left: 107%;
+    right: -8%; } }
 
 @-moz-keyframes indeterminate-short {
   0% {
-    left: -100%;
+    left: -200%;
     right: 100%; }
 
   60% {
-    left: 105%;
-    right: -10%; }
+    left: 107%;
+    right: -8%; }
 
   100% {
-    left: 105%;
-    right: -15%; } }
+    left: 107%;
+    right: -8%; } }
 
 @keyframes indeterminate-short {
   0% {
-    left: -100%;
+    left: -200%;
     right: 100%; }
 
   60% {
-    left: 105%;
-    right: -10%; }
+    left: 107%;
+    right: -8%; }
 
   100% {
-    left: 105%;
-    right: -15%; } }
+    left: 107%;
+    right: -8%; } }
 
 /*******************
   Utility Classes

diff --git a/jade/page-contents/preloader_content.html b/jade/page-contents/preloader_content.html
@@ -7,10 +7,44 @@
   <div class="row">
 
     <div class="col s12 m9 l10">
+      <p class="caption">If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.</p>
 
-  <!-- Preloader Section-->
-      <div id="preloader" class="section scrollspy">
-        <p class="caption">If you have content that will take a long time to load, you should give the user feedback. In this case we have an animated preloader.</p>
+      <div id="linear" class="section scrollspy">
+        <h2 class="header">Linear</h2>
+        <p>There are a couple different types of linear progress bars.</p>
+        <h4>Determinate</h4>
+        <div class="row">
+          <div class="div col s8 offset-s2">
+            <div class="progress">
+                <div class="determinate" style="width: 70%"></div>
+            </div>
+          </div>
+        </div>
+        <pre><code class="language-markup">
+  &lt;div class="progress">
+      &lt;div class="determinate" style="width: 70%">&lt;/div>
+  &lt;/div>
+        </code></pre>
+
+        <h4>Indeterminate</h4>
+        <div class="row">
+          <div class="div col s8 offset-s2">
+            <div class="progress">
+                <div class="indeterminate"></div>
+            </div>
+          </div>
+        </div>
+        <pre><code class="language-markup">
+  &lt;div class="progress">
+      &lt;div class="indeterminate">&lt;/div>
+  &lt;/div>
+        </code></pre>
+
+      </div>
+
+      <!-- Preloader Section-->
+      <div id="circular" class="section scrollspy">
+        <h2 class="header">Circular</h2>
         <div class="row">
           <div class="col s12 m4 center">
             <div class="preloader-wrapper big active">
@@ -197,7 +231,8 @@
     <div class="col hide-on-small-only m3 l2">
       <div style="height: 1px;">
         <ul class="section table-of-contents">
-          <li><a href="#preloader">Preloader</a></li>
+          <li><a href="#linear">Linear</a></li>
+          <li><a href="#circular">Circular</a></li>
         </ul>
       </div>
     </div>

diff --git a/preloader.html b/preloader.html
@@ -102,10 +102,44 @@
   <div class="row">
 
     <div class="col s12 m9 l10">
+      <p class="caption">If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.</p>
 
-  <!-- Preloader Section-->
-      <div id="preloader" class="section scrollspy">
-        <p class="caption">If you have content that will take a long time to load, you should give the user feedback. In this case we have an animated preloader.</p>
+      <div id="linear" class="section scrollspy">
+        <h2 class="header">Linear</h2>
+        <p>There are a couple different types of linear progress bars.</p>
+        <h4>Determinate</h4>
+        <div class="row">
+          <div class="div col s8 offset-s2">
+            <div class="progress">
+                <div class="determinate" style="width: 70%"></div>
+            </div>
+          </div>
+        </div>
+        <pre><code class="language-markup">
+  &lt;div class="progress">
+      &lt;div class="determinate" style="width: 70%">&lt;/div>
+  &lt;/div>
+        </code></pre>
+
+        <h4>Indeterminate</h4>
+        <div class="row">
+          <div class="div col s8 offset-s2">
+            <div class="progress">
+                <div class="indeterminate"></div>
+            </div>
+          </div>
+        </div>
+        <pre><code class="language-markup">
+  &lt;div class="progress">
+      &lt;div class="indeterminate">&lt;/div>
+  &lt;/div>
+        </code></pre>
+
+      </div>
+
+      <!-- Preloader Section-->
+      <div id="circular" class="section scrollspy">
+        <h2 class="header">Circular</h2>
         <div class="row">
           <div class="col s12 m4 center">
             <div class="preloader-wrapper big active">
@@ -292,7 +326,8 @@
     <div class="col hide-on-small-only m3 l2">
       <div style="height: 1px;">
         <ul class="section table-of-contents">
-          <li><a href="#preloader">Preloader</a></li>
+          <li><a href="#linear">Linear</a></li>
+          <li><a href="#circular">Circular</a></li>
         </ul>
       </div>
     </div>