漂亮的 ChatGPT 聊天 loading 效果

前言

最近在优化自己做的 chatgpt-web，我打算在 gpt 返回数据的时候加一个 loading，但是这个 loading 放在哪里？是个什么样的？晚上的时候，我想好了，这个 loading 很简单，就是放一个 OpenAI 的 logo 在我的提交按钮上，并且这个 logo（svg图片）能够旋转放大然后旋转缩小这样一直循环，那脑海中既然有了这个画面，那我们就开始动手。

动手环节

其实之前也写了不少 SVG 的动画，但大多都是直接 Copy 的，当然这次也不例外，拿起键盘就开始在网上找，要的就是一个如果有现成的绝不自己动手，势必将自己的惰性发挥到极致，找了一圈发现无果，难道是我的姿势不对？那我换个姿势继续，发现还是没有😓，那这次逃不掉了，那这次只能自己做一个这样的动画了。

第一步：学习动画

由于我们用的是 tailwindcss，发现 tailwindcss 有类似的动画效果例如下面这样：地址：www.tailwindcss.cn/docs/animat...

旋转效果

放大缩小效果

但是我们要的是这两个的效果的组合，就是一边旋转一边放大缩小😂

那怎么办呢，只能学习动画相关的知识了，这个网上就很多了，随手都能找到

了解到 keyframes 是关键，例如下面这个代码，其中 %0、50%、100% 是什么意思？

css 复制代码

@keyframes chat-loading {  
    0% {  
        transform: scale(1);  
    }  
    50% {  
        transform: scale(1.3);  
    }  
    100% {  
        transform: scale(1);  
    }  
}

.chat-loading {  
    animation: chat-loading 1s linear infinite;  
}

keyframes 叫关键帧，那是不是就可以猜了？对了，%0、50%、100% 不就是一个进度条嘛，我们可以使用关键帧（Keyframes）来定义动画的不同阶段，剩下的 animation 也很重要，它主要用来控制动画的播放方式，1s linear infinite 1s表示动画的持续时间为1秒，linear表示动画的过渡方式为线性过渡，也就是说动画的变化是匀速的，infinite表示动画会无限循环播放。当我们将 1s linear infinite 应用到一个元素的动画属性中时，该元素会以线性的方式在1秒内完成一次完整的动画过程，并且这个动画会无限循环播放，直到我们停止动画或移除动画属性。

好，进入小试牛刀环节。

第二步：小试牛刀

最终代码样式如下

css 复制代码

@keyframes chat-loading {  
    0% {  
        transform: scale(1) rotate(0deg);  
    }  
    50% {  
        transform: scale(1.3);  
    }  
    100% {  
        transform: scale(1) rotate(360deg);  
    }  
}  
  
.chat-loading {  
    animation: chat-loading 1s linear infinite;  
}

使用动画效果

html 复制代码

<span className='chat-loading flex items-center justify-center'>  
    <IconChatGPT className='h-7 w-7' />  
</span>

好了，那这样就完成了我们想要的效果，再来看下我们实现的效果

感谢老铁的三连🤞