组件 装载 机 新拟态加载器

新拟态加载器

具有互补颜色的 Neumorphism 加载器组件

预览

HTML 代码

<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="relative w-24 h-24">
    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-gray-200 dark:bg-gray-700" style="box-shadow: inset 5px 5px 10px #b3b3b3, inset -5px -5px 10px #ffffff; dark:box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #626262;"></div>
    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600 animate-spin" style="filter: blur(10px);"></div>
    <div class="absolute top-0 left-0 w-full h-full rounded-full border-4 border-transparent border-t-blue-500 border-b-purple-600 animate-spin"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-gray-600 dark:text-gray-300 text-xl font-semibold">Loading</div>
  </div>
</div>

相关组件

灰阶加载旋转器

一个简单的加载旋转器组件,采用灰度色彩,侧重于微互动。

打开

拟物加载器

一个神经形风格的加载器组件,具有响应效果和暗主题支持,使用Tailwind CSS。不需要JavaScript。使用微妙的阴影创建从背景凸出效应。支持CSS的暗模式。

打开

Glassmorphism 加载器组件

一个简单的 glassmorphism 风格的加载器组件,具有互补色,适用于投资组合,具有响应式和深色模式支持。

打开