svg 进度条

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      svg {
        border: 1px solid hotpink;
      
        line {
          stroke-dasharray: 150px;
          stroke-dashoffset: 150px;
          animation: line-move 2s ease infinite;
        }
      }
 
      @keyframes line-move {
        to {
          stroke-dashoffset: -150px;
        }
      }
    </style>
  </head>
  <body>
    <svg width="500px" height="300px">
      <line x1="50" y1="50" x2="200" y2="50" stroke="red" stroke-width="10" />
    </svg>
  </body>
</html>

posted @ 2024-05-07 17:14 _clai 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· canvas 捕获视频帧

· requestVideoFrameCallback

· svg画圆形进度条

· html进度条

· 使用SVG实现进度条

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称： _clai
园龄： 4年11个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. uniapp 文件管理器(文件选择)(4)

_clai

svg 进度条

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	* {
	box-sizing: border-box;
	}
	svg {
	border: 1px solid hotpink;

	line {
	stroke-dasharray: 150px;
	stroke-dashoffset: 150px;
	animation: line-move 2s ease infinite;
	}
	}

	@keyframes line-move {
	to {
	stroke-dashoffset: -150px;
	}
	}
	</style>
	</head>
	<body>
	<svg width="500px" height="300px">
	<line x1="50" y1="50" x2="200" y2="50" stroke="red" stroke-width="10" />
	</svg>
	</body>
	</html>