操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

首先，什么是進度條，跟大家舉個例子js在容器里面加進度條，我們在瀏覽一個網頁時，網頁在加載的時候會有一個進度的提示，這樣能夠準確的告訴我們什么時候資源可以完全加載出來js在容器里面加進度條，最常見的就是一個進度條不斷的變化，數字在不斷的增加。

進度條經常運用于網頁，即使我們意識到不是所有的東西都將瞬間被加載完成，這些進度條用于提醒使用者關于網頁上具體的任務進程，譬如上傳，下載，加載應用程序等。

首先展示一下效果

動態的加載進度

看代碼

html

"home">
    <template id="xcprogress">
      <div class="xcprogress">
        <div class="xcprogress-bar" :style="{ width: `${value}%` }">
          <span class="xcprogress-bar-value">{{ value }}%span>
        div>
      div>
    template>
  
復制代碼

js

data() {
    return {
      value: 0,
    };
  },
  watch: {
    value(newVal) {
      if (newVal > 100) {
        this.value = 100;
      } else if (newVal < 0) {
        this.value = 0;
      }
    },
  },

  components: {},
  mounted() {
    setTimeout(() => {
      setInterval(() => {
        this.value += 20;
      }, 800);
    }, 1000);
  },
復制代碼

css

#home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.xcprogress {
  width: 300px;
  height: 20px;
  background: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}
.xcprogress-bar {
  width: 0;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  background: cornflowerblue;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  transition: width 0.6s ease;
  border-radius: 4px;
  animation: xcprogress-bar-anim 2s linear infinite;
}
.xcprogress-bar-value {
  font-size: 13px;
  font-weight: bold;
  color: white;
  margin-right: 5px;
}
@keyframes xcprogress-bar-anim {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
復制代碼

整體代碼

<script>
// @ is an alias to /src
export default {
  name: "HomeView",
  data() {
    return {
      value: 0,
    };
  },
  watch: {
    value(newVal) {
      if (newVal > 100) {
        this.value = 100;
      } else if (newVal < 0) {
        this.value = 0;
      }
    },
  },
  components: {},

  mounted() {
    setTimeout(() => {
      setInterval(() => {
        this.value += 20;
      }, 800);
    }, 1000);
  },
};
script>
<style lang="less" scoped>
#home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.xcprogress {
  width: 300px;
  height: 20px;
  background: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}
.xcprogress-bar {
  width: 0;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: cornflowerblue;

  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  transition: width 0.6s ease;
  border-radius: 4px;
  animation: xcprogress-bar-anim 2s linear infinite;
}
.xcprogress-bar-value {
  font-size: 13px;
  font-weight: bold;
  color: white;
  margin-right: 5px;
}
@keyframes xcprogress-bar-anim {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
style>
復制代碼