wxcz_admin
/
projectcc-smart-construction-git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue.js Radial Progress Bar Demo</title>
    <style>
      html, body {
        background: #4e4f4f;
        text-align: center;
        color: #FFF;
        font-family: 'Open Sans', Helvetica, Verdana, sans-serif;
        font-size: 16px;
      }
      #app {
        display: flex;
        align-items: center;
      }
      .radial-progress-display {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .radial-progress-controls {
        display: flex;
        flex: 1;
      }
      .controls {
        margin-top: 10px;
        text-align: center;
      }
      .controls button {
        border-radius: 5px;
        color: #fff;
        padding: 13px 20px;
        background: #ff9f37;
        border: 0;
        outline: 0;
        line-height: 1.3em;
        text-transform: uppercase;
        cursor: pointer;
        box-sizing: border-box;
      }
      .controls button:hover {
        background: #ff9f37;
      }
      p {
        margin: 5px 0;
      }
      .visible-collapse {
        visibility: collapse;
      }
      input {
        margin: 0;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      input, button {
        font: inherit;
        margin-bottom: 10px;
      }
      .text-left {
        text-align: left;
      }
      .text-right {
        text-align: right;
      }
      label {
        margin-right: 15px;
      }
      .spc-b {
        margin-bottom: 30px;
      }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </head>
  <body>
    <h1>Vue.js Radial Progress Bar</h1>
      <p class="spc-b">Customizable radial progress bar component with gradients and animations!</p>
      <div class="spc-b">
        <a class="github-button"
          href="https://github.com/wyzant-dev/vue-radial-progress"
          data-style="mega"
          data-count-href="/wyzant-dev/vue-radial-progress/stargazers"
          data-count-api="/repos/wyzant-dev/vue-radial-progress#stargazers_count"
          data-count-aria-label="# stargazers on GitHub"
          aria-label="Star wyzant-dev/vue-radial-progress on GitHub">View on Github</a>
      </div>
    <div id="app">
      <div class="radial-progress-display">
        <radial-progress-bar :diameter="diameter"
                            :total-steps="totalSteps"
                            :completed-steps="completedSteps"
                            :animate-speed="animateSpeed"
                            :stroke-width="strokeWidth"
                            :start-color="startColor"
                            :stop-color="stopColor"
                            :inner-stroke-color="innerStrokeColor"
                            :timing-func="timingFunc">
          <p>Total steps: {{ totalSteps }}</p>
          <p>Completed steps: {{ completedSteps }}</p>
        </radial-progress-bar>
        <div class="controls">
          <button :disabled="completedSteps <= 0"
                  @click.prevent="prevStep">Prev</button>
          <button :disabled="completedSteps >= totalSteps"
                  @click.prevent="nextStep">Next</button>
        </div>
      </div>
      <table class="radial-progress-controls text-right">
        <tr>
          <td>
            <label for="total-steps">Total steps</label>
          </td>
          <td>
            <input id="total-steps" type="number" placeholder="Total steps" :value="totalSteps" @input="totalStepsChanged">
          </td>
        </tr>
        <tr>
          <td>
            <label for="animate-speed">Animate speed</label>
          </td>
          <td>
            <input id="animate-speed" type="number" placeholder="Animate speed" :value="animateSpeed" @input="animateSpeedChanged">
          </td>
        </tr>
        <tr>
          <td>
            <label for="diameter">Diameter</label>
          </td>
          <td>
            <input id="diameter" type="number" placeholder="Diameter" :value="diameter" @input="diameterChanged">
          </td>
        </tr>
        <tr>
          <td>
            <label for="stroke-width">Stoke width</label>
          </td>
          <td>
            <input id="stroke-width" type="number" placeholder="Stroke width" :value="strokeWidth" @input="strokeWidthChanged">
          </td>
        </tr>
        <tr>
          <td>
            <label for="timing-function">Timing function</label>
          </td>
          <td>
            <input id="timing-function" type="text" placeholder="Timing function" :value="timingFunc" @input="timingFuncChanged">
          </td>
        </tr>
        <tr>
          <td>
            <label for="start-color">Start color</label>
          </td>
          <td>
            <input id="start-color" type="color" placeholder="Start color" :value="startColor" @input="startColorChanged">
          </td>
        </tr>
        <tr>
          <td>
            <label for="stop-color">Stop color</label>
          </td>
          <td>
            <input id="stop-color" type="color" placeholder="Stop color" :value="stopColor" @input="stopColorChanged">
          </td>
        </tr>
        <tr>
          <td>
            <label for="inner-stroke-color">Inner stroke color</label>
          </td>
          <td>
            <input id="inner-stroke-color" type="color" placeholder="Inner stroke color" :value="innerStrokeColor" @input="innerStrokeColorChanged">
          </td>
        </tr>
      </div>
    </table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.1/vue.min.js"></script>
    <script src="./dist/vue-radial-progress.min.js"></script>

    <script>
      Vue.config.debug = true

      new Vue({
        el: '#app',
        components: {
          RadialProgressBar: RadialProgressBar,
        },
        data () {
          return {
            completedSteps: 1,
            totalSteps: 6,
            animateSpeed: 1000,
            diameter: 300,
            strokeWidth: 10,
            startColor: '#bbff42',
            stopColor: '#429321',
            innerStrokeColor: '#323232',
            timingFunc: 'linear'
          }
        },
        methods: {
          timingFuncChanged(e) {
            this.timingFunc = e.target.value
          },

          innerStrokeColorChanged (e) {
            this.innerStrokeColor = e.target.value
          },

          stopColorChanged (e) {
            this.stopColor = e.target.value
          },

          startColorChanged (e) {
            this.startColor = e.target.value
          },

          strokeWidthChanged (e) {
            e.preventDefault()
            const val = e.target.value

            if (!val || isNaN(val)) {
              return false
            }

            this.strokeWidth = parseInt(val)
          },

          diameterChanged (e) {
            e.preventDefault()
            const val = e.target.value

            if (!val || isNaN(val)) {
              return false
            }

            this.diameter = parseInt(val)
          },

          animateSpeedChanged (e) {
            e.preventDefault()
            const val = e.target.value

            if (!val || isNaN(val)) {
              return false
            }

            this.animateSpeed = parseInt(val)
          },

          totalStepsChanged (e) {
            e.preventDefault()
            const val = e.target.value

            if (!val || isNaN(val)) {
              return false
            }

            this.totalSteps = parseInt(val)
          },
          nextStep () {
            this.completedSteps += 1
          },
          prevStep () {
            this.completedSteps -= 1
          }
        }
      })
    </script>
  </body>
</html>