velements載入動畫：讓等待感覺更快的轉圈與進度條
更新於 2026年9月18日閱讀時間約 1 分鐘
怎樣才算是好的載入動畫？
好的載入動畫會即時開始、無縫循環，並給人正在進展而不是在耗時的感覺。每個循環的動態保持在一秒半以內，只用一種強調色，並匯出透明背景 WebM，就能放在任何應用程式畫面或影片上。
載入動畫是動態設計中最細小、卻觸及最多人的部分。這些預設範本有旋轉弧線、彈跳圓點、填充膠囊條、脈動圓環和閃爍骨架屏，需要多久都能無縫循環。
更新於 2026年9月18日閱讀時間約 1 分鐘
好的載入動畫會即時開始、無縫循環，並給人正在進展而不是在耗時的感覺。每個循環的動態保持在一秒半以內，只用一種強調色，並匯出透明背景 WebM，就能放在任何應用程式畫面或影片上。
載入動畫是動態設計中最細小、卻觸及最多人的部分。這些預設範本有旋轉弧線、彈跳圓點、填充膠囊條、脈動圓環和閃爍骨架屏，需要多久都能無縫循環。
所有場合都用透明背景 WebM：無論是疊在產品示範上，還是用在網頁上。在網頁的 video 標籤中，帶 Alpha 通道的 WebM 檔案大小只是同一循環 GIF 的一小部分。
循環預設範本的最後一格與第一格吻合，所以重複播放時完全看不出來。
透明背景 WebM 可在 video 標籤中疊在任何背景上播放，檔案比同等效果的 GIF 小得多。
UI 動畫
使用介面預設範本：按鈕按下、開關切換、游標點擊、卡片翻轉或通知提示。輸入你自己的標籤，設定產品顏色，然後匯出透明背景 WebM。即使真正的應用程式還在設計階段，互動效果也一樣清晰。
閱讀教學指南徽章與貼紙
選擇一個標籤預設範本，輸入優惠內容，設定顏色，然後匯出透明背景的 WebM。把它放在產品畫面的一角，剪成兩三秒即可。凡是與價格相關的內容，彈出或重擊式的進場都比淡入更有力。
閱讀教學指南