drag-to-reload.html

<style>
        .loading-spinner {
            --paper-spinner-color: var(--vi-primary-color);
        }
        .reload-spinner {
            @apply(--layout-self-center);
            @apply(--layout-vertical);
            @apply(--layout-center-center);
            @apply(--shadow-elevation-2dp);
            z-index: 2;
            width: 48px;
            height: 48px;
            background-color: #fff;
            border-radius: 50%;
            margin-top: 12px;
            position: absolute;
        }
        #refreshIcon {
            color: var(--vi-primary-color);
            --iron-icon-height: 36px;
            --iron-icon-width: 36px;
        }
</style>
<script>
    {
        _load: function (reload) {
            this._loading = true;
            this._someLoadFunction()
                .then(function () {
                    this._loading = false;
                });
        },

        _handleTrack: function(e) {
            switch(e.detail.state) {
                case 'start':
                    this._dragging = true;
                    this.transform('scale(0)', this.$.reloadSpinner);
                    this.transform('rotate(0deg)', this.$.refreshIcon);
                    break;
                case 'track':
                    if (e.detail.dy >= 100 || e.detail.dy <= 0) {
                        return;
                    }
                    var scale = e.detail.dy / 100;
                    var deg = -Math.round(90 / scale);
                    this.transform(`scale(${scale}) translate3d(0, -${e.detail.dy / scale}px, 0)`, this.$.reloadSpinner);
                    this.transform(`rotate(${deg}deg)`, this.$.refreshIcon);
                    this.translate3d(0, e.detail.dy + 'px', 0, this.$.activitiesList);
                    break;
                case 'end':
                    if (e.detail.dy > 100) {
                        this._load(true);
                    }
                    this._dragging = false;
                    this.translate3d(0, 0, 0, this.$.reloadSpinner);
                    this.translate3d(0, 0, 0, this.$.activitiesList);
                    this.transform('rotate(0deg)', this.$.refreshIcon);
                    break;
            }
        }
    }
</script>

<div class="activities-list" on-track="_handleTrack" id="activitiesList">
    <div class="reload-spinner" id="reloadSpinner" hidden$="[[_reloadSpinnerHidden(_dragging, _loading)]]">
        <paper-spinner-lite class="loading-spinner" active hidden$="[[!_loading]]"></paper-spinner-lite>
        <iron-icon id="refreshIcon" icon="refresh" hidden$="[[_loading]]"></iron-icon>
    </div>
    <!-- your dom repeat of items here -->
</div>