Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f3e92ed

Browse files
ShasikhanShasikhan
committed
updated readme
1 parent c6ceb38 commit f3e92ed

2 files changed

Lines changed: 114 additions & 115 deletions

File tree

‎ANIMATIONS.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# CSS Animation Showcase - Animations List
2+
3+
1. **Spinner**
4+
5+
- Rotating circular loader with multicolor neon borders
6+
- Smooth rotation animation
7+
- Dynamic glow effects
8+
9+
2. **Dots**
10+
11+
- Three bouncing dots with synchronized movement
12+
- Color transitions and shadow effects
13+
- Scale and opacity animations
14+
15+
3. **Circle Pulse**
16+
17+
- Pulsing circular animation
18+
- Layered rings with different colors
19+
- Smooth scale and fade effects
20+
21+
4. **Wave**
22+
23+
- Expanding circular waves
24+
- Multiple synchronized layers
25+
- Neon border effects
26+
27+
5. **Helix**
28+
29+
- 3D double helix rotation
30+
- Dual-color neon trails
31+
- Perspective transforms
32+
33+
6. **Cube**
34+
35+
- 3D rotating cube
36+
- Transparent faces with neon edges
37+
- Smooth perspective rotation
38+
39+
7. **Matrix**
40+
41+
- Digital rain-inspired animation
42+
- Synchronized vertical scaling
43+
- Neon glow effects
44+
45+
8. **Infinity**
46+
- Smooth infinity symbol animation
47+
- Continuous rotation
48+
- Neon purple trails
49+
50+
9. **Gear**
51+
52+
- Rotating mechanical gear design
53+
- Conic gradient segments
54+
- Dynamic core glow effects
55+
56+
10. **Pendulum**
57+
58+
- Hypnotic swinging motion
59+
- Glowing neon orb weight
60+
- Dynamic shadow trails
61+
62+
11. **Reactor**
63+
64+
- Triple concentric ring system
65+
- Counter-rotating elements
66+
- Pulsing energy core
67+
68+
12. **Digital Equalizer**
69+
70+
- Audio equalizer-inspired design
71+
- Color-shifting vertical bars
72+
- Synchronized pulsing motion
73+
74+
13. **Neon Clock**
75+
76+
- Glowing clock face
77+
- Dual-speed hands
78+
- Pulsing center core
79+
80+
14. **Particle Field**
81+
82+
- Floating 3D particles
83+
- Multi-colored orbs
84+
- Depth-based movement
85+
86+
15. **Neon Ripple**
87+
88+
- Expanding circular waves
89+
- Multi-colored segments
90+
- Fading glow trails
91+
92+
16. **Quantum Spinner**
93+
94+
- 3D orbital rings
95+
- Intersecting planes
96+
- Pulsing core particle
97+
98+
17. **Circuit Board**
99+
100+
- Flowing data paths
101+
- Pulsing connection nodes
102+
- Tech-grid background
103+
104+
18. **Data Stream**
105+
106+
- Digital data flow visualization
107+
- Synchronized data points
108+
- Wave pulse effects
109+
- Interactive animations

‎README.md‎

Lines changed: 5 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -2,121 +2,7 @@
22

33
A modern collection of pure CSS loading animations featuring neon-inspired design effects. This project demonstrates various animation techniques using CSS3, including 3D transforms, keyframe animations, and modern visual effects.
44

5-
[Live Demo](https://shasikhan.github.io/css-loading-animations/)
6-
7-
![Loading Animations Preview](preview.gif)
8-
9-
## Features
10-
11-
### Loading Animations
12-
13-
1. **Spinner**
14-
15-
- Rotating circular loader with multicolor neon borders
16-
- Smooth rotation animation
17-
- Dynamic glow effects
18-
19-
2. **Dots**
20-
21-
- Three bouncing dots with synchronized movement
22-
- Color transitions and shadow effects
23-
- Scale and opacity animations
24-
25-
3. **Circle Pulse**
26-
27-
- Pulsing circular animation
28-
- Layered rings with different colors
29-
- Smooth scale and fade effects
30-
31-
4. **Wave**
32-
33-
- Expanding circular waves
34-
- Multiple synchronized layers
35-
- Neon border effects
36-
37-
5. **Helix**
38-
39-
- 3D double helix rotation
40-
- Dual-color neon trails
41-
- Perspective transforms
42-
43-
6. **Cube**
44-
45-
- 3D rotating cube
46-
- Transparent faces with neon edges
47-
- Smooth perspective rotation
48-
49-
7. **Matrix**
50-
51-
- Digital rain-inspired animation
52-
- Synchronized vertical scaling
53-
- Neon glow effects
54-
55-
8. **Infinity**
56-
- Smooth infinity symbol animation
57-
- Continuous rotation
58-
- Neon purple trails
59-
60-
9. **Gear**
61-
62-
- Rotating mechanical gear design
63-
- Conic gradient segments
64-
- Dynamic core glow effects
65-
66-
10. **Pendulum**
67-
68-
- Hypnotic swinging motion
69-
- Glowing neon orb weight
70-
- Dynamic shadow trails
71-
72-
11. **Reactor**
73-
74-
- Triple concentric ring system
75-
- Counter-rotating elements
76-
- Pulsing energy core
77-
78-
12. **Digital Equalizer**
79-
80-
- Audio equalizer-inspired design
81-
- Color-shifting vertical bars
82-
- Synchronized pulsing motion
83-
84-
13. **Neon Clock**
85-
86-
- Glowing clock face
87-
- Dual-speed hands
88-
- Pulsing center core
89-
90-
14. **Particle Field**
91-
92-
- Floating 3D particles
93-
- Multi-colored orbs
94-
- Depth-based movement
95-
96-
15. **Neon Ripple**
97-
98-
- Expanding circular waves
99-
- Multi-colored segments
100-
- Fading glow trails
101-
102-
16. **Quantum Spinner**
103-
104-
- 3D orbital rings
105-
- Intersecting planes
106-
- Pulsing core particle
107-
108-
17. **Circuit Board**
109-
110-
- Flowing data paths
111-
- Pulsing connection nodes
112-
- Tech-grid background
113-
114-
18. **Data Stream**
115-
116-
- Digital data flow visualization
117-
- Synchronized data points
118-
- Wave pulse effects
119-
- Interactive animations
5+
[Live Demo](https://shasikhan.github.io/css-loading-animations/)
1206

1217
### Design Features
1228

@@ -127,6 +13,10 @@ A modern collection of pure CSS loading animations featuring neon-inspired desig
12713
- Pure CSS implementation
12814
- No external dependencies
12915

16+
## Animations
17+
18+
See the complete list of animations and their features in the [Animations List](ANIMATIONS.md).
19+
13020
## Usage
13121

13222
1. Clone the repository:

0 commit comments

Comments
 (0)