LottieFiles
ecommerce stepper
0:000:00

Animation gratuite ecommerce stepper

The designer built a step-by-step visual tracker (a "stepper") that shows users where their order is in the delivery process (e.g., Order Placed, Shipped, Out for Delivery, Delivered). The initial design and creation of the visuals were done in Figma (a collaborative interface design tool). The output was saved as an SVG (Scalable Vector Graphics) file, which is a web-friendly, resolution-independent format perfect for animations. The SVG was then transformed into a Lottie animation. Lottie is a JSON-based animation file format that allows designers to ship animations to any platform (web, iOS, Android, React Native, etc.) without having to recreate them in code. This ensures the animation is small, fast, and high-quality. The final duration of the animation was set to 4 seconds. This is the total time it takes for the animation to complete its full cycle, likely transitioning between the different delivery steps.

The designer built a step-by-step visual tracker (a "stepper") that shows users where their order is in the delivery process (e.g., Order Placed, Shipped, Out for Delivery, Delivered). The initial design and creation of the visuals were done in Figma (a collaborative interface design tool). The output was saved as an SVG (Scalable Vector Graphics) file, which is a web-friendly, resolution-independent format perfect for animations. The SVG was then transformed into a Lottie animation. Lottie is a JSON-based animation file format that allows designers to ship animations to any platform (web, iOS, Android, React Native, etc.) without having to recreate them in code. This ensures the animation is small, fast, and high-quality. The final duration of the animation was set to 4 seconds. This is the total time it takes for the animation to complete its full cycle, likely transitioning between the different delivery steps.

  • dotLottie optimiséRecommandé
    30.4 KB

    Taille de fichier la plus petite avec prise en charge des thèmes, des machines à états et de l'interactivité.

    87 % plus petit que Lottie JSON
  • dotLottie
    48.3 KB

    Animation Lottie compressée qui prend en charge les thèmes et les machines à états.

  • Lottie JSON optimisé
    147.2 KB

    Format JSON optimisé pour un chargement plus rapide avec une prise en charge Lottie standard.

    39 % plus petit que Lottie JSON
  • Lottie JSON
    242.5 KB

    Format d'animation Lottie standard avec une large compatibilité entre les outils et les plateformes.

Other export formats

Interactions et plugins

Voir tout
figma
after-effects
framer
canva
webflow
wix

Gratuit à utiliser sous la licence Lottie Simple