弧进度概念使用Vue.js和SVG

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Oswald");
.progress-arc {
  pointer-events: none;
  position: relative;
  max-width: 35vw;
  font-family: "Oswald", sans-serif;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.progress-arc svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.progress-arc--value {
  fill: var(--color);
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 50%;
}
.progress-arc--value--bg {
  fill: none;
  stroke: var(--color);
  stroke-width: 2.5;
}
.progress-arc--value--mask {
  fill: black;
  stroke: black;
  stroke-width: 0;
}
.progress-arc--ring {
  fill: none;
  stroke: var(--color);
  opacity: .3;
  stroke-linecap: round;
  stroke-width: 6;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.progress-arc--ring--current {
  opacity: 1;
}

.local-content {
  padding: 20%;
  font-size: 2vw;
}
.local-content * {
  margin: 0;
}

input {
  font-family: inherit;
  font-size: inherit;
  background: none;
  color: inherit;
  border: 0;
}
input + input {
  margin-left: 1em;
}
input[type="text"] {
  width: 100%;
}
input[type="text"], input[type="number"] {
  background: rgba(255, 255, 255, 0.3);
  padding: .3em;
  border-radius: .3em;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
input[readonly] {
  opacity: .6;
  background: none;
}
input[type="range"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  display: block;
  padding: 0;
  border: 0;
  width: auto;
  height: .25em;
  border-radius: 1em;
  cursor: pointer;
  font-size: inherit;
  background: currentcolor;
}
input[type="range"]::-moz-range-track {
  -moz-appearance: none;
       appearance: none;
  background: currentcolor;
  outline: none;
}
input[type="range"]::-moz-focus-outer {
  border: 0;
}
input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  width: 1em;
  height: 1em;
  border: none;
  box-shadow: 0 0 0 0.2em var(--color);
  border-radius: 1em;
  background: currentcolor;
  transform: scale(0.7);
  -moz-transition: var(--timing) ease-out;
  transition: var(--timing) ease-out;
}
input[type="range"]::-moz-range-thumb:focus, input[type="range"]::-moz-range-thumb:active {
  -moz-appearance: none;
       appearance: none;
  transform: scale(1.5);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 1em;
  height: 1em;
  border: none;
  box-shadow: 0 0 0 0.2em var(--color);
  border-radius: 1em;
  background: currentcolor;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: var(--timing) ease-out;
  transition: var(--timing) ease-out;
}
input[type="range"]::-webkit-slider-thumb:focus, input[type="range"]::-webkit-slider-thumb:active {
  -webkit-appearance: none;
          appearance: none;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

body {
  --color: #663490;
  margin: 0;
  background: #fffc79 linear-gradient(135deg, #ff2f92 0%, #fffc79 90%);
  color: var(--color);
  font-family: sans-serif;
  display: -webkit-box;
  display: flex;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
main > * {
  -webkit-box-flex: 1;
          flex: 1;
}

.control-bar {
  --color: #33344f;
  -webkit-box-flex: 0;
          flex: none;
  align-self: stretch;
  background: var(--color);
  color: #fff;
  padding: 1em;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.control-bar::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: .85em 4em .85em 1em;
  background: transparent linear-gradient(60deg, #fff calc(100% - 3em), transparent calc(100% - 3em));
  color: var(--color);
  text-transform: uppercase;
  font-size: .75em;
}
.control-bar span {
  opacity: .5;
}

JavaScript

Vue.component('progress-arc', {
  template: `
		<div class="progress-arc">
			<slot></slot>
			<svg viewBox="0 0 100 100" width="100%">
				<mask id="ring-mask">
					<rect fill="white" width="100%" height="100%" />
					<circle class="progress-arc--value--mask" r="12" cx="83.25%" cy="16.75%" />
				</mask>
				<g mask="url(#ring-mask)">
					<path v-once class="progress-arc--ring" :d="ringArc" />
					<path v-if="hasValidValue" class="progress-arc--ring progress-arc--ring--current" :d="arc" />
				</g>
				<circle class="progress-arc--value--bg" r="9" cx="83.25%" cy="16.75%" />
				<text class="progress-arc--value" x="83.5%" y="16.5%">{{ currentValue }}</text>
			</svg>
		</div>
  `,
  props: [
    'value',
    'max',
  ],
  data () {
    return {
      currentValue: 0,
    }
  },
  created () {
    this.precision = 2
    this.maxArc = 335
    this.duration = 350
  },
  mounted () {
    this.currentValue = this.value
  },
  watch: {
    value (newValue) {
      if(newValue === null || newValue === undefined) {
        this.currentValue = 0 //newValue
      } else {
        this.animateValue('currentValue', newValue, this.duration)
      }
    },
  },
  computed: {
    maxValue () {
      return this.max
    },
    pulse () {
      return this.setPulse(this.currentValue)
    },
    ringArc () {
      return this.setArc(this.maxArc)
    },
    arc () {
      return this.setArc(this.pulse)
    },
    hasValidValue () {
      return (this.currentValue !== null && this.currentValue !== undefined)
    },
  },
  methods: {
    setPulse (value) {
      return parseFloat(value / this.maxValue * this.maxArc).toFixed(this.precision)
    },
    setArc (value) {
      return this.describeVectorArc(50, 50, 47, 0, value)
    },
    polarToCartesian (centerX, centerY, radius, angleInDegrees) {
      let angleInRadians = (angleInDegrees) * Math.PI / 180.0

return {
        x: (centerX + (radius * Math.cos(angleInRadians))).toFixed(this.precision),
        y: (centerY + (radius * Math.sin(angleInRadians))).toFixed(this.precision)
      }
    },
    describeVectorArc (x, y, radius, startAngle, endAngle) {
      const start = this.polarToCartesian(x, y, radius, endAngle);
      const end = this.polarToCartesian(x, y, radius, startAngle);
      const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;

return [
        'M', start.x, start.y,
        'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y
      ].join(' ')
    },
    animateValue (thing, end, duration) {
      let range = end - this[thing]

// calc step time to show all intermediate values
      let stepTime = Math.abs(Math.floor(duration / range))

// get current time and calculate desired end time
      let startTime = new Date().getTime()
      let endTime = startTime + duration
      let timer

let run = () => {
        let now = new Date().getTime()
        let remaining = Math.max((endTime - now) / duration, 0)
        let step = Math.round(end - (remaining * range))
        this[thing] = step
        if(step === end) {
          clearInterval(timer)
        }
      }

// never go below minTimer
      stepTime = Math.max(stepTime, 50)
      timer = setInterval(run, stepTime)
      run()
    },
  }
})

// host app implementation - talks to component
let vm = new Vue({
  el: 'main',

data: {
    value: 29,
    maxValue: 100,
		info: 'Snackwave vinyl helvetica artisan, tote bag man-braid photo booth unicorn.',
  },
	
	computed: {
		heading() {
			return this.info.length > 0 ? this.info.split(' ')[0] : ''
		},
	},

methods: {
    setValue(event) {
      this.value = parseInt(event.target.value)
    },
    setMaxValue(event) {
      this.maxValue = parseInt(event.target.value)
    },
  },
})

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