vue加载进度

下载代码

html

css

分享到微信朋友圈

html

css

@font-face {
  font-family: 'd7';
  src:  url("http://www.jq22.com/jswj/digital7-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
html {
  font-size: 100%;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: black;
  color: white;
  font-size: 62.5%;
  text-align: center;
  background-size: 8%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.05" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

#app {
  --health-level-1: #83FA21;
  --health-level-2: #C8FF9B;
  --label-color: #444;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

.health-bar-container {
  padding: 2rem;
  margin: 0 1rem;
  background: black;
  border-radius: 24px 0 24px 0;
  box-shadow: inset 0 0 0 5px #222;
}

.health-bar {
  width: 100%;
}
@media (min-width: 801px) {
  .health-bar {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
  }
}

.health-val {
  position: relative;
  font-family: 'd7', monospace;
  font-size: 6rem;
  font-weight: normal;
  color: var(--label-color);
  text-align: left;
  padding: 0;
  margin: 0;
}
.health-val span {
  position: relative;
  z-index: 1;
}
.health-val:before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "000";
  color: #222;
}
@media (max-width: 800px) {
  .health-val {
    display: none;
  }
}

.col {
  padding: 0 .85rem;
}

@media (min-width: 801px) {
  .col:first-of-type {
    width: 20%;
  }
}

.col:last-of-type ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 0.5rem;
  grid-row-gap: 0px;
}
.col:last-of-type li {
  position: relative;
  padding: 2.5rem 1rem;
  -webkit-transform: skewX(30deg);
          transform: skewX(30deg);
}
.col:last-of-type li:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--health-level-1)), color-stop(84%, var(--health-level-2)));
  background-image: linear-gradient(0deg, var(--health-level-1) 0%, var(--health-level-2) 84%);
}
@media (min-width: 801px) {
  .col:last-of-type {
    -webkit-box-flex: 1;
            flex: 1;
  }
  .col:last-of-type ul {
    grid-column-gap: 1.25rem;
  }
}

button {
  display: inline-block;
  text-align: center;
  margin: 0.5rem auto 0 auto;
  padding: 0.75rem 1rem;
  border: 0;
  font-family: monospace;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 6px;
  background: #333;
  color: #777;
}

input[type="range"] {
  height: 25px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 10px 0;
  width: 100%;
  background: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: var(--health-level-1);
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: 1px solid var(--health-level-1);
  height: 25px;
  width: 25px;
  border-radius: 25px;
  background: var(--health-level-1);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  margin-top: -7px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--health-level-1);
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: none;
  background: var(--health-level-1);
}

input[type=range]::-moz-range-thumb {
  border: 1px solid var(--health-level-1);
  height: 25px;
  width: 25px;
  border-radius: 25px;
  background: var(--health-level-1);
  cursor: pointer;
}

JavaScript

const app = new Vue({
  el: '#app',
  data () {
    return {
      amount: 0,
      progress: 0
    }
  },
  mounted () {
    this.animateHealth()
  },
  methods: {
    animateHealth (progress) {
      const tl = new TimelineMax({
        ease: Power3.easOut,
        onUpdate: () => {
          const tlProgress = tl.progress()
          this.progress = tl.progress()
          
          if (tlProgress <= 0.1) {
            // dead!
            this.$el.style.setProperty('--label-color', '#444')
          } else if (tlProgress <= 0.35) {
            // danger!
            this.$el.style.setProperty('--health-level-1', '#8B0000')
            this.$el.style.setProperty('--health-level-2', '#DC143C')
            this.$el.style.setProperty('--label-color', '#DC143C')
          } else if (tlProgress <= 0.65) {
            // caution!
            this.$el.style.setProperty('--health-level-1', 'goldenrod')
            this.$el.style.setProperty('--health-level-2', 'gold')
            this.$el.style.setProperty('--label-color', 'goldenrod')
          } else {
            // healthy!
            this.$el.style.setProperty('--health-level-1', '#83FA21')
            this.$el.style.setProperty('--health-level-2', '#C8FF9B')
            this.$el.style.setProperty('--label-color', '#83FA21')
          }
        }
      })
      
      TweenMax.set('.col ul li', {
        autoAlpha: 0.35,
        filter: 'grayscale(10)',
        scale: 0.85
      })
      
      // meter bar animation
      tl.to( '.col ul li', {
        stagger: 0.1,
        autoAlpha: 1,
        filter: 'none',
        scale: 1
      })
      
      // counter animation
      const start = { var: 0 }

tl.to( start, 1.2, {
        var: 100,
        roundProps: 'var',
        onUpdate: () => {
          this.amount = ('000' + Math.ceil(start.var)).substr('-3')
        }
      }, '-=1.2')
      
      if (progress) {
        tl.pause()
        tl.progress(progress)
      }
    },
    adjustHealth (ev) {
      this.amount = ev.target.value
      this.progress = ev.target.value
      
      this.animateHealth(ev.target.value)
    }
  }
})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg