Note.ms

<div class="loading">
  <div class="box">
    <h2>Loading</h2>
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
</div>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css"
/>
<script>
function initSakanaWidget() {
  /* 1. 注册自定义角色 mizuno */
  const mizuno = SakanaWidget.getCharacter('takina');
  mizuno.image = 'https://images.cnblogs.com/cnblogs_com/blogs/838258/galleries/2467247/o_250719115512_Venti%20(1).png';
  SakanaWidget.registerCharacter('mizuno', mizuno);

/* 2. 创建挂载容器（左下角自适应） */
  const sakana = document.createElement('div');
  sakana.id = 'sakana-widget';
  sakana.style.position = 'fixed';
  sakana.style.left = '20px';
  sakana.style.bottom = '20px';
  sakana.style.width = '15vw';
  sakana.style.minWidth = '120px';
  sakana.style.maxWidth = '300px';
  sakana.style.zIndex = '99';
  document.body.appendChild(sakana);

/* 3. 初始化并调慢速度（i 设成 0.02，越小越慢） */
  new SakanaWidget({
    character: 'mizuno',
    autoFit: true,
    controls: true, // 保留控制按钮
    size: 300, // 设置大小为 250px
    draggable: true, // 如果需要可拖动，保留此选项
    rod: false // 如果需要显示杆，保留此选项
  }).setState({ i: 0.02 }).mount('#sakana-widget');
}
</script>
<script
  async
  onload="initSakanaWidget()"
  src="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.js"
></script>

Note.ms/asdf