Spinner Loader (旋转加载器)
Progress Bar Loader (进度条加载器)
Percentage Counter (百分比计数器)
0%
Text Animation Loader (文字动画加载器)
Loading...
Header (页头)
Logo Area (标志区)
Demo Site
Primary Navigation (主导航)
Utility Navigation (功能导航)
Mega Menu (超级菜单)
Secondary Navigation (次级导航)
Breadcrumbs (面包屑导航)
Hero Section (英雄区)
Hero Banner (英雄横幅)

Website Component Showcase

A visual guide to common website modules and components

CTA (号召性动作)

Loading & Interaction Effects

Page Preloaders

Skeleton Screen (骨架屏)
Shimmer Effect (微光效果)

Element Loading Animations

Staggered Load (错开加载)
Infinite Scroll (无限滚动)

Data Loading Indicators

Throbber (跳动指示器)

Processing data...

Loading Dots (加载点)

Loading data...

Rotating Element (旋转元素)

Fetching results...

Pulsating Animation (脉动动画)

Syncing data...

Bouncing Loader (弹跳加载器)

Loading content...

Wave Loading (波浪加载)

Processing audio...

Content Transition Effects

Fade Transition (淡入淡出过渡)

Content with Fade Transition

This content fades in and out when the button below is clicked.

Tab Transitions (标签页过渡)
Slide Transition (滑动过渡)

Slide Transition

This content slides in from the right and out to the left.

Scroll-Triggered Effects

Parallax Scrolling (视差滚动)
Parallax Effect
Scroll Progress Indicator (滚动进度指示器)

Scroll Progress

This indicator shows your progress through the page: 0%

Reveal on Scroll (滚动显示)
Scroll Item 1

This item appears as you scroll down the page.

Scroll Item 2

This item appears as you scroll down the page.

Scroll Item 3

This item appears as you scroll down the page.

Scroll Item 4

This item appears as you scroll down the page.

Scroll Item 5

This item appears as you scroll down the page.

Scroll Item 6

This item appears as you scroll down the page.

Sticky Elements (粘性元素)

Sticky Header

This element sticks to the top as you scroll down.

Micro-Interactions

Hover Effects (悬停效果)

Hover over me

Hidden Content

This content appears on hover

Click Animations (点击动画)
Ripple Effect (涟漪效果)
Tooltip Animations (提示框动画)
This is a tooltip
Pulse Animation (脉冲动画)
New
Button State Animations (按钮状态动画)

Form & Submission Effects

Form Field Focus Animation (表单字段焦点动画)
Validation Feedback Effects (验证反馈效果)
Submit Button Loading State (提交按钮加载状态)
Character Counter Animation (字符计数动画)
0/200
Field Highlight Effect (字段高亮效果)

3D & Immersive Effects

3D Card Flip (3D卡片翻转)

Front Side

Click to flip the card

Back Side

Click to flip back

Tilt Effect (倾斜效果)

Hover Tilt Effect

Move your mouse over this card

Perspective Shift (透视移动)

Perspective Effect

Move your mouse around the screen

Floating Elements (浮动元素)
Floating Elements

Elements float gently in the background

Chart & Data Visualization Animations

Counter Animation (计数动画)
0%
Satisfaction
0
Countries
0k
Users
0
Awards
Chart Build-up (图表构建)

Bar Chart Animation

Progress Animation (进度动画)
HTML0%
CSS0%
JavaScript0%

Error & Status Effects

404 Animation (404动画)
Network Status Indicator (网络状态指示器)
You are online.
Loading Error Animation (加载错误动画)

Click the button to simulate a loading error.

Empty State Animation (空状态动画)

No items found

Your search did not match any items.

Footer (页脚)
Cookie Consent Bar (Cookie同意栏)

This website uses cookies to ensure you get the best experience on our website.

Notification Banner (通知横幅)

Success!

Your changes have been saved successfully.