How to animate a border using JS for a timer card

Question

I have the following timer card for a timer app that I am making and I want to have a border slowly wrap around it as it counts down similar to this code pen. https://codepen.io/Mamboleoo/pen/zYOJOGb The progress has to be controlled by JS.

I am using VueJS with Vuetify and here is the code that I have.

      

    
      
        
          {{ timer.name }}
          {{ parseTime(timer.timeLeft) }}
        
      

      
        
          Zero
          Reset
        
        
          Delete

user_5665870 · Answer

You can directly use the SVG in the demo in Codepen you attached.

In order to make the border-image to be re-rendered when Reset is clicked, one trick is add empty space to the SVG string then convert it base64.

Below is one simple snippet:

Vue.component('v-timer',{
  render (h) {
    return h('div', {
      style: {
        border: '10px solid black',
        borderImage: `url("data:image/svg+xml;base64,${this.computedSVGUrl}") 1`
      }
    }, [h('span', {}, `${this.inner} Secs`), h('button', {
      on: {
        click: () => {
          this.inner =  this.seconds
          this.spaces += ' '
          this.startTimer(this.seconds)
        }
      }
    }, 'Reset')])
  },
  props: {
    'seconds': {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      spaces: '',
      inner: 0,
      intervalCtrl: null
    }
  },
  computed: {
    computedSVGUrl: function () {
      return window.btoa(``)
    }
  },
  watch: {
    seconds: {
      handler: function (newVal) {
        this.inner = newVal
        this.startTimer(newVal)
      },
      immediate: true
    }
  },
  mounted: function () {
    this.startTimer(this.seconds)
  },
  methods: {
    startTimer: function (seconds) {
      this.resetInterval()
      this.intervalCtrl = setInterval(() => {
        this.inner -= 1
        this.inner <= 0 && this.resetInterval()
      }, 1000)
    },
    resetInterval: function () {
      this.intervalCtrl && clearInterval(this.intervalCtrl)
      this.intervalCtrl = null
    }
  }
})
    
new Vue ({
  el:'#app'
})

.timer {
  width: 200px;
  height: 30px;
}

user_12464900 · Answer

There are several technique how to make animation border. One of them: You can create four empty span tag inside you box:

They represent border sides. They should be absolutely positioned to the card. Then you should provide a keyframe infinite animation tweaking span's width one by one. All this css logic should be binded to one class. Then in your Vue component apply this class dynamically according to your counter logic.

How to animate a border using JS for a timer card

2 Answers