Progress
前端进度条组件。
基本示例
import { useProgress } from '@yulania/progress'
const { start, done } = useProgress()
start()
window.onload = () => done()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress</title>
<link rel="stylesheet" href="./index.css">
<script src="./src/progress.ts" type="module"></script>
<script src="./src/main.ts" type="module"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Astro 集成
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yulania/progress/dist/classic.css">
<script src="https://cdn.jsdelivr.net/npm/@yulania/progress/dist/astro.global.js"></script>
TypeScript
在 TS 类型声明文件 (如 global.d.ts
) 中拓展 globalThis
的类型
import type { useProgress } from '@yulania/progress'
declare global {
var yulania: {
progress: ReturnType<typeof useProgress>
}
}
Inspired by
NProgress
- [ricardo-ch/react-nprogress]