Pull to refresh

dist/css/ionic.css

@@ -2248,6 +2248,7 @@ body, .ionic-body {
   display: block;
   position: relative;
   overflow: hidden;
+  margin-top: -1px;
   width: auto;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
@@ -2278,8 +2279,14 @@ body, .ionic-body {
 
 .scroll-refresher {
   overflow: hidden;
-  margin-top: -100px;
-  height: 100px; }
+  margin-top: -60px;
+  height: 60px;
+  position: relative; }
+  .scroll-refresher .icon-refreshing {
+    display: none;
+    -webkit-animation-duration: 1.5s;
+    -moz-animation-duration: 1.5s;
+    animation-duration: 1.5s; }
 
 .scroll-refresher-content {
   position: relative;
@@ -2288,30 +2295,42 @@ body, .ionic-body {
   text-align: center; }
 
 .ionic-refresher-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  text-align: center; }
-
-.ionic-refresher {
   position: absolute;
-  bottom: 25px;
-  left: 50%;
-  margin-left: -5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #4a87ee; }
+  left: 0;
+  bottom: 15px;
+  width: 100%;
+  text-align: center;
+  font-size: 30px;
+  color: #666666; }
 
-@-webkit-keyframes refresher-pulsate {
+@-webkit-keyframes refresh-spin {
   0% {
-    -webkit-transform: scale(2, 2); }
-
-  50% {
-    -webkit-transform: scale(1.5, 1.5); }
+    -webkit-transform: rotate(0); }
 
   100% {
-    -webkit-transform: scale(2, 2); } }
+    -webkit-transform: rotate(-180deg); } }
+
+.scroll-refresher.active .icon-pulling {
+  display: block; }
+.scroll-refresher.active .icon-refreshing {
+  display: none; }
+.scroll-refresher.active.refreshing .icon-pulling {
+  display: none; }
+.scroll-refresher.active.refreshing .icon-refreshing {
+  display: block; }
+.scroll-refresher.active .ionic-refresher-content {
+  -webkit-animation-duration: 200ms;
+  -moz-animation-duration: 200ms;
+  animation-duration: 200ms;
+  -webkit-animation-timing-function: linear;
+  -moz-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-name: refresh-spin;
+  -moz-animation-name: refresh-spin;
+  animation-name: refresh-spin; }
 
 .overflow-scroll {
   overflow-x: hidden;

dist/js/ionic-angular.js

@@ -752,7 +752,7 @@ angular.module('ionic.ui.content', [])
     restrict: 'E',
     replace: true,
     require: ['^?content', '^?list'],
-    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
+    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
     scope: true,
     link: function($scope, $element, $attr, scrollCtrl) {
       var icon = $element[0].querySelector('.ionic-refresher');

js/ext/angular/src/directive/ionicContent.js

@@ -128,7 +128,7 @@ angular.module('ionic.ui.content', [])
     restrict: 'E',
     replace: true,
     require: ['^?content', '^?list'],
-    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
+    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
     scope: true,
     link: function($scope, $element, $attr, scrollCtrl) {
       var icon = $element[0].querySelector('.ionic-refresher');

js/ext/angular/test/tabs.html

@@ -65,12 +65,7 @@
           <button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
         </header>
         <content>
-          <refresher>
-            <div id="refresh-content">
-              Refreshing
-              <i class="icon ion-ios7-reloading"></i>
-            </div>
-          </refresher>
+          <refresher></refresher>
           <list scroll="false" on-refresh="onRefresh()" on-reorder="onReorder(el, start, end)" is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
             <item ng-repeat="item in items" 
             item="item"
@@ -190,7 +185,7 @@
         };
 
         // Create the items
-        for(var i = 0; i < 5; i++) {
+        for(var i = 0; i < 25; i++) {
           $scope.items.push({
             title: 'Task ' + (i + 1),
             buttons: [{

scss/_scaffolding.scss

@@ -64,6 +64,9 @@ body, .ionic-body {
   position: relative;
   overflow: hidden;
 
+  // Hide the top border if any
+  margin-top: -1px;
+
   width: auto;
   @include flex(1);
 }
@@ -84,8 +87,14 @@ body, .ionic-body {
 // Scroll refresher (for pull to refresh)
 .scroll-refresher {
   overflow: hidden;
-  margin-top: -100px;
-  height: 100px;
+  margin-top: -60px;
+  height: 60px;
+  position: relative;
+
+  .icon-refreshing {
+    display: none;
+    @include animation-duration(1.5s);
+  }
 }
 
 .scroll-refresher-content {
@@ -96,29 +105,45 @@ body, .ionic-body {
 }
 
 .ionic-refresher-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-}
-
-.ionic-refresher {
   position: absolute;
-  bottom: 25px;
-  left: 50%;
-  margin-left: -5px;
-  // A custom refresher
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: $positive;
+  left: 0;
+  bottom: 15px;
+  width: 100%;
+  text-align: center;
+
+  font-size: 30px;
+  color: $scroll-refresh-icon-color;
 }
 
+@-webkit-keyframes refresh-spin {
+  0% {-webkit-transform: rotate(0); }
+  100% {-webkit-transform: rotate(-180deg); }
+}
 
-@-webkit-keyframes refresher-pulsate {
-  0% {-webkit-transform: scale(2, 2); }
-  50% {-webkit-transform: scale(1.5, 1.5); }
-  100% {-webkit-transform: scale(2, 2); }
+.scroll-refresher.active {
+
+  .icon-pulling {
+    display: block;
+  }
+  .icon-refreshing {
+    display: none;
+  }
+
+  &.refreshing {
+    .icon-pulling {
+      display: none;
+    }
+    .icon-refreshing {
+      display: block;
+    }
+  }
+
+  .ionic-refresher-content {
+    @include animation-duration(200ms);
+    @include animation-timing-function(linear);
+    @include animation-fill-mode(both);
+    @include animation-name(refresh-spin);
+  }
 }
 
 .overflow-scroll {

scss/_variables.scss

@@ -57,6 +57,10 @@ $border-radius-base:             4px !default;
 $border-radius-large:            6px !default;
 $border-radius-small:            3px !default;
 
+// Content
+// -------------------------------
+
+$scroll-refresh-icon-color: #666666;
 
 // Buttons
 // -------------------------------