In the introduction, I explain the idea of the project.
Loading Animations is a series of twelve minimalist loading animations, using circles as the primary graphic element. For each month of the year, an animation is created with a number of circles corresponding to the month's order, i.e. the January animation has one circle, February has two circles, and so on.
The following principles guide the design and behavior of these animations:
Design guidelines
- Size: Circles must have a diameter of 16 pixels.
- Color: Circles are black on a white background.
- Opacity: Always 100%.
- Quantity: The number of circles must remain the same from start to finish.
- Distortion: Circles may deform slightly to express effects like speed or impact.
- Overlap: Circles should never overlap at any point.
- Motion: Circles must remain in constant motion to convey dynamism.
- Motion Speed: Speeds can be fixed or vary throughout the animation.
- Trajectory: Circles may follow linear, curved, or complex trajectories (e.g., spirals).
- Cycle Time: Animations should have a continuous loop or a clearly defined start and end.
Behavior patterns
- Collide: Circles can interact by colliding and altering their movements.
- Bounce: A circle rebounds after hitting a surface.
- Loop: A circle repeatedly follows a circular or elliptical path.
- Jump: A circle projects upward, mimicking a jump.
- Fall: A circle descends in a straight path under the influence of gravity.
- Push: A circle applies force to move or displace another circle.
- Swing: A circle moves back and forth in an arc, as if suspended.
- Slide: A circle moves smoothly and steadily, with little resistance.
- Ricochet: A circle rebounds off multiple surfaces in quick succession.
- Orbit: A circle continuously moves around another circle in a circular or elliptical path.
- Stick: A circle temporarily adheres to a surface before detaching.
- Compress: A circle temporarily deforms under pressure and returns to its original shape.
- Dodge: A circle avoids collisions by changing direction at the last moment.
- Float: A circle remains suspended in place with small, subtle movements.
These guidelines help maintain a cohesive aesthetic across all animations.