CODEWITHSUNDEEP
vue.jsvuejs2vue-componentcountdowncountdowntimer
ShaSha
ShaSha

Reputation: 319

How to create vueJS countdown with animation?

I'm looking for a plugin or a way to make vue js countdown like this:

vue countdown image

Note: I'm converting xd to vue app.

What is your suggestion?

Upvotes: 0

Views: 909

Answers (2)

Taf Hyseni
Taf Hyseni

Reputation: 43

As per the Vue functionality of countdown (for let's say 10 seconds), it works as follow:

<template>
   <div>{{ countdown }}</div>
</template>

<script>
    export default {
        data() {
         countdown: 10
        },
        methods: {
        countSeconds() {
                        if(this.countdown> 0) {
                            setTimeout(() => {
                                this.countdown-= 1
                                this.countSeconds()
                            }, 500);
                        }
                    }
        },
        created() {
            this.countSeconds();
        }
    }
 </script>

You can also make the 10 seconds easy dynamically based on your need! Also as per the animation, feel free to use transition or any other method based on your will!

Upvotes: 0

Davod Aslani Fakor
Davod Aslani Fakor

Reputation: 681

you can use some base code this link and handle compatible by vuejs.

demo code pen

I can't find any demo for vuejs

but also first u should create a simple animation for this reaction and then add pure code timer. after that u must merge CSS animation and js timer together.

Upvotes: 1

Related Questions