Motion Prompt #160|加载按钮 · Loading button(中文译文)
点击后在按钮内显示加载中到完成;中文译文,效果未实测。
来源:import:liubai_versions_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0402/translation-zh.md · 授权:MIT License Copyright (c) 2026 Shohei Ohtaki Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
使用示例提示词正文
请使用“Loading button”(ローディングボタン),它是“Landing page & web effects, part 2”中的一个名称。 Motion Prompt #160 定义:按钮内部先显示加载,再显示完成。 示例展示:点击提交按钮后,它缩成内含转圈的圆;完成时展开为带勾的绿色“完成”按钮。 规格: - 视口511×168,橙色胶囊按钮220×36,标签“送信する”(发送),0.8 s点击。单次4.7 s,在9.4 s包循环内播放两次。 - 0.85–1.15 s内以三次ease-in-out在0.3 s中将宽度220缩至36 px成为圆;标签在收缩前1/3阶段淡出。 - 1.1–2.3 s内,圆中白色转圈旋转,半径10、线宽3、弧长0.7π,每0.7 s转一圈。 - 2.25–2.45 s颜色从橙变绿#1E9E5A,白勾在2.25–2.5 s绘出;2.45–2.8 s以三次ease-in-out将宽度36→150 px,勾向左移动26 px,同时“完了”(完成)出现。 - 3.9–4.1 s淡出,原始发送按钮在4.1–4.4 s以三次ease-out向上移动6 px返回。 何时使用:用于提交、购买或保存等需要短暂等待结果的按钮。 参考实现(Canvas 2D,画面仅由时间决定的函数):https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/160.txt 共享辅助代码:https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp2.js 请保持参考实现的形状、时间安排和缓动数值不变,只调整文字、颜色和素材,以适配我正在制作的项目。
使用示例
示例输入
请实现“加载按钮 · Loading button”:点击后在按钮内显示加载中到完成;中文译文,效果未实测。
示意结果
下方是来源作者提供的静态画面和可播放动效参考,并非本站对该提示词调用模型生成的结果。
提示词仅供参考,请结合实际场景调整,并核实 AI 生成结果。