Merge pull request #28 from raphaelfabeni/hotfix/#27

Change the default animation of loader bar - fix #27
raphaelfabeni · Feb 24, 2017 · ec197d5 · ec197d5
2 parents adeba9a + f0827e4
commit ec197d5
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -120,7 +120,7 @@ The variations _data-half_, _data-text_ and _data-blink_ work together. 😄
 <div class="loader loader-bar is-active"></div>
 ```
 
-![loader-bar](https://cloud.githubusercontent.com/assets/1345662/19314685/6d719056-9071-11e6-88c8-2c3750ca0198.gif)
+![loader-bar-updated](https://cloud.githubusercontent.com/assets/1345662/23286931/5eae58a8-fa19-11e6-8718-ae28d633ed1e.gif)
 
 [See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar) :metal:
 
@@ -131,6 +131,8 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
 ```html
 <div class="loader loader-bar is-active" data-text></div>
 <!-- -->
+<div class="loader loader-bar is-active" data-inverse></div>
+<!-- -->
 <div class="loader loader-bar is-active" data-text="Custom text"></div>
 <!-- -->
 <div class="loader loader-bar is-active" data-text data-blink></div>
@@ -140,14 +142,26 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
 
 **rounded**: passing the `data-rounded` attribute, it's possible to add a simple `border-radius` to the loader.
 
-![loader-bar-rounded](https://cloud.githubusercontent.com/assets/1345662/19315031/ab850700-9072-11e6-9cd4-9fe899f05a10.gif)
+![loader-bar-rounded-updated](https://cloud.githubusercontent.com/assets/1345662/23287022/abe16980-fa19-11e6-87c3-c7a4c28e7bb5.gif)
 
 ```html
 <div class="loader loader-bar is-active" data-text data-rounded></div>
 ```
 
 [See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar-rounded) :metal:
 
+**inverse**: passing the `data-inverse` attribute, it's possible change the direction of the animation (from left to right).
+
+![loader-bar](https://cloud.githubusercontent.com/assets/1345662/19314685/6d719056-9071-11e6-88c8-2c3750ca0198.gif)
+
+```html
+<div class="loader loader-bar is-active" data-inverse></div>
+```
+
+[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar-inverse) :metal:
+
+*Obs*. It's also possible pass a parameter `data-text` with a content value that will show as a text loader, or with no value, and the default *loading* text  it's going to show instead.
+
 ### Border
 
 ![loader-border](https://cloud.githubusercontent.com/assets/1345662/19314686/6d733622-9071-11e6-8167-a55e6c16a02f.gif)

diff --git a/dist/css-loader.css b/dist/css-loader.css
diff --git a/dist/loader-bar.css b/dist/loader-bar.css
diff --git a/examples/loader-bar.html b/examples/loader-bar.html
@@ -18,7 +18,7 @@
 <body>
 
   <!-- Loader -->
-  <div class="loader loader-bar is-active" data-text data-rounded></div>
+  <div class="loader loader-bar is-active"></div>
 
   <!-- Fake content -->
   <div class="container">

diff --git a/examples/loader-curtain.html b/examples/loader-curtain.html
@@ -13,7 +13,7 @@
     }
   </style>
 
-  <link rel="stylesheet" href="../dist/css-loader.css">
+  <link rel="stylesheet" href="../dist/loader-bar.css">
 </head>
 <body>
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -9,6 +9,7 @@ var cssFiles = [
   'src/css-loader.sass',
   'src/loader-default.sass',
   'src/loader-double.sass',
+  'src/loader-bar.sass',
   'src/loader-border.sass',
   'src/loader-ball.sass',
   'src/loader-clock.sass',

diff --git a/src/loader-bar.sass b/src/loader-bar.sass
@@ -0,0 +1,5 @@
+@import './config'
+
+@import './general/base'
+
+@import './loaders/loader-bar'
diff --git a/src/loaders/_loader-bar.sass b/src/loaders/_loader-bar.sass
@@ -19,13 +19,16 @@
     background: linear-gradient( -45deg, $loader-bar--color-secondary 25%, $loader-bar--color 25%, $loader-bar--color 50%, $loader-bar--color-secondary 50%, $loader-bar--color-secondary 75%, $loader-bar--color 75%, $loader-bar--color)
     background-size: 20px 20px
     box-shadow: inset 0 10px 0 rgba(255, 255, 255, .2), 0 0 0 5px rgba(0, 0, 0, .2)
-    animation: moveBar 1.5s linear infinite
+    animation: moveBar 1.5s linear infinite reverse
 
-  // Rounded version
   &[data-rounded]
     &:after
       border-radius: 15px
 
+  &[data-inverse]
+    &:after
+      animation-direction: normal
+
 // Animation for bars
 @keyframes moveBar
   from
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ @@
         }
       </style>
-      <link rel="stylesheet" href="../dist/css-loader.css">
+      <link rel="stylesheet" href="../dist/loader-bar.css">
     </head>
     <body>
@@ Expand Down @@