Vue3 Flip countdown is customize the countdown counter with Flip Animation for Vue 3.x.
flip countdown timer jquery, flip countdown timer online, flip clock, countdown timer with animation, flipclock countdown to date, css countdown timer animation
How to make use of it:
Install and download:
# NPM $ npm i vue3-flip-countdown
1. Import and register the component.
import { createApp } from 'vue' import App from './App.vue' import Countdown from 'vue3-flip-countdown' createApp(App).use(Countdown).mount('#app')
2. Add a countdown timer to the template.
<vue3-flip-countdown />
3. Props available to configure the countdown timer.
deadline: { type: String, required: false, default: moment() .add(32, "d") .add(10, "s") .format(fmt), }, deadlineISO: { type: String, required: false, }, deadlineDate: { type: Date, required: false, }, countdownSize:{ type:String, required:false, // default:"2.2rem" }, labelSize:{ type:String, required:false, // default:"2.2rem" }, stop: { type: Boolean, required: false, }, flipAnimation: { type: Boolean, required: false, default: true, }, showDays: { type: Boolean, required: false, default: true, }, showHours: { type: Boolean, required: false, default: true, }, showMinutes: { type: Boolean, required: false, default: true, }, showSeconds: { type: Boolean, required: false, default: true, }, showLabels: { type: Boolean, required: false, default: true, }, labels: { type: Object, required: false, default: function () { return { days: 'Days', hours: 'Hours', minutes: 'Minutes', seconds: 'Seconds', }; }, }, mainColor: { type: String, default: '#EC685C' }, secondFlipColor: { type: String, default: (props) => props.mainColor, }, mainFlipBackgroundColor: { type: String, default: '#222222' }, secondFlipBackgroundColor: { type: String, default: '#393939' }, labelColor: { type: String, default: '#222222' }
Countdown Timer With Flip Animation, vue3-flip-countdown Plugin/Github
See Demo And Download
Official Website(coskuncayemre): Click Here
This superior jQuery/javascript plugin is developed by coskuncayemre. For extra Advanced Usages, please go to the official website.
Be First to Comment