Smooth Load

Component

Visual Example

Here's an example of the spinner in action.

Normally, it'd be covering up the entire page until you're done loading your data.

Code Example

And here's a code example.

<template>
   <div id='myView'>
      <smooth-load :loading=loading :pulsing=true />
      <h1>{{loadedData.title}}</h1>
      <p>{{loadedData.content}}</p>
    </div>
</template>

<script>
export default {
   name: 'AView',
   data() {
      return {
         loading: true,
         loadedData: Object,
      }
   },
   created() {
      this.loadData();
   },
   methods: {
      async loadData() {
         const response = await SomeAPIService.request();
         if(response.status === 200) {
            this.loadedData.title = response.title;
            this.loadedData.content = response.content;
            this.loading = false;
         }
      }
   }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

As you can see, the spinner is really easy to use. The only requirement is that you bind a boolean variable that specifies when you're done loading your data to the component.

(Otherwise you'll be looking at the animation forever!).

Props

Name Type Description Required Default
loading Boolean Toggles show/hide of the spinner true true
spin Boolean Controls whether the inner spinner is spinning false true
spinnerColor String Sets the inner spinner color false #ffffff
pulse Boolean Controls whether the outer circle is pulsing false false
pulseColorLeft String Sets the left half of the outer circle gradient false #1565c0
pulseColorRight String Sets the right half of the outer circle gradient false #149ac36b
text String Sets loading text underneath the spinner false

←