前端如何实现进度条

将进度条的宽度动态控制,通过css的transition动画来控制
在这里插入图片描述

<template>
  <div class="container">
    <div class="base-progress">
     <div class="inner" :style="{ width: w + '%' }">
      <div class="text">
        <span>{{ w }}</span>
        <span>%</span>
      </div>
    </div>
  </div>
  </div>
  </template>
  
  <script>
  import floatBtn from '@/components/floatBtn.vue'
  export default {
    components:{
      floatBtn
    },
    name: 'houselist-page',
    data () {
      return {
        w:20,
        img: require("@/assets/nav1.png")
      }
    },
    methods: {
    
    }
  }
  </script>
  <style>
  .container{
    width:100%;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .base-progress {
  height: 26px;
  width: 260px;
  border-radius: 15px;
  background-color: #e6e4e4;
  border: 2px solid #999;
  box-sizing: border-box;
}
.inner {
  width: 20px;
  height: 100%;
  border-radius: 12px;
  text-align: right;
  position: relative;
  background-color: #409eff;
  background-size: 20px 20px;
  box-sizing: border-box;
  transition: all 1s;
}
.inner .text{
  position: absolute;
  right: -10px;
  bottom: 0px;
}
  </style>
  
  
### Java 后端与前端技术实现进度条功能 #### 使用 Spring Boot 和 jQuery 实现下载进度条 为了实现在Java后端和HTML前端之间的实时交互的下载进度功能,在后端需要创建一个服务来提供文件流并计算进度,而在前端则需构建一个能够轮询该进度并触发相应UI变化的机制。 在服务器端采用Spring Boot框架的情况下: ```java // 定义控制器处理请求 @RestController @RequestMapping("/download") public class DownloadController { private static final Logger logger = LoggerFactory.getLogger(DownloadController.class); /** * 开始下载操作,并返回任务ID以便查询状态. */ @PostMapping("/start") public ResponseEntity<String> startDownload(@RequestBody String params){ // 创建唯一标识符用于跟踪此特定下载过程 UUID taskId = UUID.randomUUID(); // 将参数保存到数据库或者缓存中关联taskId // 返回给客户端的任务Id return new ResponseEntity<>(taskId.toString(), HttpStatus.OK); } /** * 查询指定下载任务的状态. */ @GetMapping("/{id}/status") public Map<String, Object> getProgress(@PathVariable("id") String id){ // 通过传入的任务Id获取当前下载百分比或其他形式表示的进展程度 Integer progressPercentage = ... ; // 获取实际进度逻辑 HashMap<String,Object> resultMap=new HashMap<>(); resultMap.put("progress",progressPercentage); return resultMap; } } ``` 对于上述代码片段中的`getProgress()`方法,可以通过Redis或者其他存储方式记录每个下载任务的具体进展情况[^1]。当有新的HTTP GET请求到达时,则读取对应的进度数值作为响应数据发送回浏览器。 接下来是在客户端部分利用JavaScript库比如jQuery来进行周期性的AJAX调用来检查最新的下载情况: ```javascript let interval; function initProgress(taskId) { $.ajax({ url: '/download/' + taskId + '/status', method: 'GET' }).done(function(response) { $('#progressbar').css('width', response.progress+'%'); if (response.progress < 100) { clearInterval(interval); // 如果完成就停止定时器 } }); interval=setInterval(() => {initProgress(taskId)}, 2000); // 每两秒刷新一次进度 } $('#start-download-btn').click(function(){ var formData={}; $.post('/download/start', JSON.stringify(formData), function(data,status){ let taskId=data; initProgress(taskId); }); }); ``` 这段脚本会在点击按钮发起POST请求启动后台作业之后立即开启一个每秒钟两次向服务器询问最新进度的过程直到达到百分之百为止。 另外一种更高效的方式是使用WebSocket协议替代传统的基于轮询的方法。这允许建立持久连接从而减少延迟并且提高性能。下面给出的是关于如何设置WebSockets的相关配置以及简单的消息推送例子[^4]: ```java @ServerEndpoint("/ws/progress/{userId}") @Component public class ProgressWebSocketHandler { @OnOpen public void onOpen(Session session,@PathParam("userId")String userId){ // 存储session对象至静态集合或map结构里方便后续查找 } @OnMessage public void handleMessage(String message, Session session){ // 处理来自客户端的消息 } @OnError public void onError(Throwable error){ // 错误日志记录 } @OnClose public void onClose(){ // 清除资源释放工作 } public static void sendProgressUpdateToUser(String userId,int percentComplete){ try{ Set<Session> sessions=...;// 根据userId找到对应的所有活动会话 for (Session s :sessions ) { synchronized(s){ if (!s.isOpen()) continue; s.getBasicRemote().sendText("{\"percent\":"+percentComplete+"}"); } } }catch(Exception e){ log.error(e.getMessage()); } } } ``` 每当有任何重要的事件发生(例如某个大文件的一部分被成功传输),就可以调用`sendProgressUpdateToUser()`函数通知所有订阅了相同主题的用户界面组件更新其视图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值