css实现进度条

预期样式

方法一

js 复制代码
<script setup>
import { ref } from "vue";
// import ScreenLeft from "./ScreenLeft/index.vue";
const width = ref("76.5%");
</script>

<template>
  Screen
  <div class="progress-contain">
    <div class="process-bg">
      <div class="process-color"></div>
    </div>
  </div>
  <!-- <ScreenLeft></ScreenLeft> -->
</template>

<style scoped lang="scss">
// src\assets\processBg.png
.progress-contain {
  width: 558px;
  height: 14px;
  .process-bg {
    width: 558px;
    height: 14px;
    background-image: url("@/assets/processBg.png");
  }
  .process-color {
    width: v-bind(width);
    height: 14px;
    background-image: url("@/assets/processBgColor.png");
  }
}
</style>

方法二

js 复制代码
<div class="process-box">
    <div class="process-bar">
      <div class="process-mask" :style="{ left: process + '%' }"></div>
    </div>
    <div class="process-dot" :style="{ left: process - 1 + '%' }"></div>
  </div>



.process-box {
  position: relative;
  width: 558px;
  .process-bar {
    position: relative;
    width: 558px;
    height: 14px;
    margin-top: 10px;
    overflow: hidden;

    // background: #253959;
    background-image: url("@/assets/processBgColor.png");
    background-repeat: no-repeat;

    // background-size: 100% 14px;

    // background: linear-gradient(270deg, #44b5ff 0%, #44b2fc 100%);
    border: 1px solid #415677;
    border-radius: 8px;
    .process-mask {
      position: absolute;
      width: 558px;
      height: 14px;

      //   background: #253959;
      background-image: url("@/assets/processBg.png");
    }
  }
  .process-dot {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    width: 15px;
    height: 15px;
    background: #ffffff;
    border: 2px solid #44b1fb;
    border-radius: 50%;
    box-shadow: -2px 0 4px 0 rgb(5 29 59 / 50%);
  }
}
相关推荐
陈皮话梅糖@2 小时前
使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例
开发语言·javascript·flutter
Yolo@~6 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克6 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道6 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维6 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久6 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain6 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏7 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing7 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ7 小时前
React(九)React Hooks
前端·react.js