Loader generator

Built by Viktor Renkema, powered by Framer Motion and Next.js.

Customize your loader, install Motion in your React app, and copy-paste the generated code.

  • Dots
  • Experimental
  • BETA

1. Customize style & transition

#C81C60

2. Install dependency

Your Loader runs on Framer Motion, an open-source production-ready animation library for React. Install the npm package into your React app and bring your Loader into your project.

All it takes is a React environment with Framer Motion 2.5.0 and up, or fork this Codesandbox and try it out right away.


Yarn

$yarn add framer-motion

NPM

$npm i framer-motion

3. Copy/paste your code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 import React from "react"; import { motion } from "framer-motion"; const style = { width: 20, height: 20, opacity: 1, margin: 8, borderRadius: 0, display: "inline-block", background: "#c81c60", } const variants = { start: { scale: 0.2, rotate: 0, }, end: { scale: 1, rotate: 360, }, } export default function Loader(props) { return ( <div> <motion.div style={style} variants={variants} initial={"start"} animate={"end"} transition={{ repeat: "Infinity", repeatType: "reverse", ease: "anticipate", duration: 1, delay: 0 }} /> <motion.div style={style} variants={variants} initial={"start"} animate={"end"} transition={{ repeat: "Infinity", repeatType: "reverse", ease: "anticipate", duration: 1, delay: 0.2 }} /> <motion.div style={style} variants={variants} initial={"start"} animate={"end"} transition={{ repeat: "Infinity", repeatType: "reverse", ease: "anticipate", duration: 1, delay: 0.4 }} /> <motion.div style={style} variants={variants} initial={"start"} animate={"end"} transition={{ repeat: "Infinity", repeatType: "reverse", ease: "anticipate", duration: 1, delay: 0.6 }} /> <motion.div style={style} variants={variants} initial={"start"} animate={"end"} transition={{ repeat: "Infinity", repeatType: "reverse", ease: "anticipate", duration: 1, delay: 0.8 }} /> </div> ) }