LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Please use the button to proceed
Save Cancel Delete Back
{{ action }}
CSS
.prompt {
  margin: auto;
  margin-bottom: 1em;
}
.best-btn {
  width: 400px;
  height: 50px;
  margin: auto;
  margin-top: 1em;
  border: 2px solid black;
  box-style: border-box;
  transition: all 250ms ease;
  cursor: pointer;
}
.best-btn:hover {
  background-color: lightgrey;
}
.best-btn-inner {
  display: flex;
  justify-content: space-around;
  line-height: 46px;
}
JS
new Vue({
  el: '#app',
  data() {
    return {
      ms: 0,
      max: 5000,
      interval: undefined,
      snackbar: false,
      action: 'saved'
    };
  },
  computed: {
    percent() {
      return (this.ms / this.max) * 100;
    },
    gradient() {
      return `linear-gradient(to right, red 0%, red ${this.percent}%, lightgrey ${this.percent}%)`;
    }
  },
  methods: {
    onPress() {
      if(this.snackbar) {return}
      
      this.interval = setInterval(() => {
        this.ms += 10;
      }, 10)
      console.log('press')
    },
    onRelease() {
      if(this.snackbar || !this.ms > 0) { return }

      clearInterval(this.interval);
      
      if (this.percent > 8 && this.percent < 15) {
        this.action = "Saved"
      } else if(this.percent > 31 && this.percent < 41) {
        this.action = "Cancelled"
      } else if(this.percent > 56.5 && this.percent < 66) {
        this.action = "Deleted"
      } else if(this.percent > 83 && this.percent < 91) {
        this.action = "Going Back"
      } else {
        this.action = "Looks like you missed, try again in 2 sec."
      }
      
      this.snackbar = true;
      setTimeout(() => {
        this.ms = 0;
        this.snackbar = false;
      }, 2000)
    },
  },
})
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv