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.
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.