VueEternalLoading left position

by gavrashenko

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/vue@3.2.25/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ts-pro/vue-eternal-loading/dist/vue-eternal-loading.umd.js"></script>

<div id="app">
  <div class="container">
    <div ref="container" class="d-flex" style="overflow-x: auto;width: 500px">

      <vue-eternal-loading class="flex-shrink-0" :load="load" position="left" :container="$refs['container']">
        <template #loading>
          <div class="spinner-border text-success" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
        </template>
      </vue-eternal-loading>

      <img v-for="user in users" :key="user.id"  :src="user.avatar" class="flex-shrink-0" alt="...">

    </div>  
  </div>

</div>

CSS

.vue-eternal-loading>div {
  margin: 10px;
  text-align: center;
}

img {
  width: 100px;
  height: 100px;
}

JavaScript

const URL = 'https://reqres.in/api/users';
const PAGE_SIZE = 5;

const App = {
  data() {
    return {
      page: 1,
      users: [],
    }
  },
  
  methods: {
    loadUsers(page) {
      return fetch( `${URL}?delay=1&per_page=${PAGE_SIZE}&page=${page}`)
        .then(res => res.json())
        .then(res => res.data);
    },

    load(action) {
      this.loadUsers(this.page).then((users) => {
        this.users.unshift(...users);
        this.page += 1;
        action.loaded(users.length, PAGE_SIZE);
        
      })
    }
  }
};

const app = Vue.createApp(App);
app.component('vue-eternal-loading', window.TSPro.VueEternalLoading);
app.mount('#app');