Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use Vue load animation library to reduce the bounce rate of our site", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use Vue load animation library to reduce the bounce rate of our website" this article.

1. Vue Simple Spinner

Github: https://dzwillia.github.io/vue-simple-spinner/examples/

As the name implies, this is a very simple component, but it is still very powerful. Vue Simple Spinner provides customizable loading styles. With props, we can control the corresponding style:

Size

Background and foreground colors

Speed

Label Text

Much more...

Installation commands:

Npm install vue-simple-spinner-- save.

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

Import VueSimpleSpinner from 'vue-simple-spinner' export default {components: {VueSimpleSpinner}}

The effect is as follows:

2. Vue Radial Progress

Github address: https://github.com/wyzantinc/vue-radial-progress

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

Vue Radial Progress can set the number of steps and the steps that the user is currently in in the progress bar. Then, fill in a certain percentage of the progress bar based on the number of completions.

With smooth animation, customizable features, and a SVG-based filling system, this library is powerful when you have an asynchronous process with multiple discrete steps.

Installation:

Npm install-save vue-radial-progress

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

Total steps: {{totalSteps}}

Completed steps: {{completedSteps}}

Import RadialProgressBar from 'vue-radial-progress' export default {data () {return {completedSteps: 0, totalSteps: 10}}, components: {RadialProgressBar}}

3.Vue Loading Overlay

Github: https://github.com/ankurk91/vue-loading-overlay

* * Vue Loading Overlay * * is an ideal solution for full-screen loading components. For example, this library is useful if your application contains some kind of dashboard and you have to wait until all the data has been loaded before allowing users to click around.

Another useful feature of this library is that when the user clicks the mask, the user can cancel the load and trigger an event that we can use to cancel any running task.

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

Installation commands:

Npm install-save vue-loading-overlay

The following is an example of using Loading Overlay library:

Full page? Fetch Data / / 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.')}

4. Vue Progress Path

Github address: https://github.com/Akryum/vue-progress-path

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

Using SVG,Vue Progress Path creates a progress bar for forming. It comes with several built-in shapes, but the most powerful feature is the ability to pass our own SVG shapes-which means unlimited possibilities.

Use npm I-- save vue-progress-path to add it to the project, and then use to add the file globally 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',})

Now, let's take a look at how to add a schedule path to a component.

Another nice thing about this library is that you don't need to go through props to change the style, but use the CSS code to edit the style:

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

5. Vue Loading Button

Github address: https://github.com/shwilliam/vue-loading-button

Vue Loading Button is a simple and effective way to show users that something is being loaded.

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

Installation:

Npm install-save vue-loading-button

Example:

Import VueLoadingButton from 'vue-loading-button' export default {components: {VueLoadingButton,}}

6. TB Skeleton

Github address: https://github.com/anthinkingcoder/tb-skeleton

The TBSkeleton experience is very good. However, this requires quite tedious code and reasonable planning 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)

The following is an example of a skeleton component in an TBSkeleton document.

Import {TbSkeleton,Skeleton} from 'tb-skeleton' export default {components: {TbSkeleton,Skeleton}}

As you can see, there is some time cost to use this library, but it can be used in some requirements that require an excellent user experience.

The above is all the contents of the article "how to use Vue to load animation libraries to reduce the bounce rate of our website". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.