By Matt Maribojoc

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

One way to keep people from leaving our site is to add visual feedback to let them know our pages are loading rather than breaking. Visual feedback also grabs people’s attention, so the wait time seems much shorter than on a static screen.

Whether it’s adding tweaks or adding an actual progress bar, providing beautiful visual elements can improve your site’s performance and make your visitors’ experience better.

For Vue developers, there are plenty of similar libraries available.

In this post, SHARE 6 of my favorites.

1. Vue Simple Spinner

Making: dzwillia. Making. IO/vue – simple -…

As the name suggests, this is a very simple component, but still very powerful. The Vue Simple Spinner provides customizable load styles. Using props, we can control the corresponding styles:

  • Size
  • Background and foreground colors
  • Speed
  • Label Text
  • Much more…

Installation command:

npm install vue-simple-spinner --save. 
Copy the code

Then, import it into the component, declare it in the template, and change the desired props:

<template>
   <vue-simple-spinner size="medium" />
</template>
<script>
import VueSimpleSpinner from 'vue-simple-spinner'
export default {
   components: { 
      VueSimpleSpinner
   }
}
Copy the code

The effect is as follows:

2. Vue Radial Progress

Github address: github.com/wyzantinc/v…

Vue Radial Progress is a great library if you want a real Progress bar instead of a rotating animation.

Vue Radial Progress allows you to set the number of steps and the step the user is currently in in the Progress bar. Then, fill in a percentage of the progress bar based on the number completed.

With smooth animations, customizable functionality, and an SVG-based population system, this library is very powerful when you have asynchronous procedures with multiple discrete steps.

Installation:

npm install --save vue-radial-progress
Copy the code

In addition, the library uses component slots to make it easy to add text to a circle

<template> <radial-progress-bar :diameter="200" :completed-steps="completedSteps" :total-steps="totalSteps"> <p>Total steps: {{ totalSteps }}</p> <p>Completed steps: {{ completedSteps }}</p> </radial-progress-bar> </template> <script> import RadialProgressBar from 'vue-radial-progress'  export default { data () { return { completedSteps: 0, totalSteps: 10 } }, components: { RadialProgressBar } } </script>Copy the code

3.Vue Loading Overlay

Making: github.com/ankurk91/vu…

**Vue Loading Overlay ** is an ideal solution for full screen Loading components. This library is useful, for example, if your application includes some kind of dashboard and lets users click around until all the data is loaded.

Another nice feature of the library is that when loading, the user clicks on the mask, which cancels loading and triggers an event that we can use to cancel any tasks that are running.

Adding this feature allows users to decide when tasks take too long to load and exit. This means they don’t have to leave the page.

Installation command:

npm install --save vue-loading-overlay
Copy the code

Loading Overlay Library Loading Overlay library

<template> <div class="vld-parent"> <loading :active.sync="isLoading" :can-cancel="true" :on-cancel="onCancel" :is-full-page="fullPage"></loading> <label><input type="checkbox" v-model="fullPage">Full page? </label> <button @click.prevent="doAjax">fetch Data</button> </div> </template> <script> // Import component import Loading from 'vue-loading-overlay'; // Import stylesheet import 'vue-loading-overlay/dist/vue-loading.css'; export default { data() { return { isLoading: false, fullPage: true } }, components: { Loading }, methods: { doAjax() { this.isLoading = true; // simulate AJAX setTimeout(() => { this.isLoading = false },5000) }, onCancel() { console.log('User cancelled the loader.') } } } </script>Copy the code

4. Vue Progress Path

Github address: github.com/Akryum/vue-…

Vue Progress Path is one of the most popular loading libraries. Created by Guillaume Chau, a member of the Vue Core team, this is one of my favorite tools to use.

With SVG, Vue Progress Path creates a formalized Progress bar. It comes with several built-in shapes, but the most powerful feature is the ability to pass our own SVG shapes – which means endless possibilities.

Use NPM I –save vue-progress-path to add it to the project, then use globally to add the file to the SRC /main.js file.

import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'

Vue.use(VueProgress, {
  // defaultShape: 'circle',
})
Copy the code

Now look at how to add a progress path to the component.

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  shape="semicircle"
  size="64"
/>
Copy the code

Another nice thing about this library is that you don’t need to use props to change styles, but use CSS code directly to edit styles:

.vue-progress-path path {
  stroke-width: 12;
}

.vue-progress-path .progress {
  stroke: red;
}
Copy the code

5. Vue Loading Button

Github address: github.com/shwilliam/v…

A Vue Loading Button is a simple and effective way to show the user that something is Loading.

All it does is add a wheel animation when the button is clicked. But with smooth animation, it can create a seamless look that makes the site popular.

Installation:

npm install --save vue-loading-button
Copy the code

Example:

<template>
   <VueLoadingButton aria-label='Send message' />
</template>
<script>
import VueLoadingButton from 'vue-loading-button'

export default {
  components: {
    VueLoadingButton,
  }
}
</script>
Copy the code

6. TB Skeleton

Github address: github.com/anthinkingc…

The TBSkeleton experience was very good. However, this requires quite a bit of tedious code and proper planning of elements.

I think the best way to understand this is to write an example.

First, install using NPM install –save TB-skeleton. Then, add the following to the SRC /main.js file.

import skeleton from 'tb-skeleton'
import  'tb-skeleton/dist/skeleton.css'
Vue.use(skeleton)
Copy the code

Here is an example of a skeleton component from the TBSkeleton documentation.

<template>
  <div>
    <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">
     <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
   </skeleton>
  </div>
</template>
<script>
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      TbSkeleton,
      Skeleton
    }
  }
</script>
Copy the code

As you can see, this library takes some time to use, but it can be used for requirements that require a great user experience.

Finish, I am a bowl wisdom, go to the bowl, see you next time ~

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: learnv co / 2020/02/6 – v…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.