Home
Get Started
Toggle Menu
.Circle_circles__w0RSn{z-index:0;height:50vmin;width:50vmin;position:fixed;margin:0 auto;top:50%;left:50%;transform:translate3D(-50%,-50%,0);transition:all .05s ease;animation:Circle_fade-in__MY_Ot 3s ease}@media(max-width:700px){.Circle_circles__w0RSn{display:none}}.Circle_circle__Gh6bN{box-sizing:border-box;position:absolute;width:100%;height:100%;border:2vmin solid transparent;border-radius:115% 140% 145% 110%/125% 140% 110% 125%;mix-blend-mode:screen}.Circle_circle__Gh6bN:first-child{border-color:rgba(219,68,55,.9);transform-origin:50% 50%;animation:Circle_spin1__nVSAI 5.5s linear infinite;box-shadow:0 0 7px rgba(219,68,55,.9)}.Circle_circle__Gh6bN:nth-child(2){border-color:rgba(244,180,0,.9);transform-origin:50% 50%;animation:Circle_spin2__39bPH 5.5s linear infinite;box-shadow:0 0 7px rgba(244,180,0,.9)}.Circle_circle__Gh6bN:nth-child(3){border-color:rgba(66,133,244,.9);transform-origin:50% 50%;animation:Circle_spin3__FKH8J 5.5s linear infinite;box-shadow:0 0 7px rgba(66,133,244,. | A shadcn/ui and v0 generation - v0
&:first-child { border-color: rgba(219,68,55,0.9); animation: ${spin1} 5.5s linear infinite; } &:nth-child(2) { border-color: rgba(244,180,0,0.9); animation: ${spin2} 5.5s linear infinite; } &:nth-child(3) { border-color: rgba(66,133,244,0.9); animation: ${spin3} 5.5s linear infinite; } &:nth-child(4) { border-color: rgba(15,157,88,0.9); animation: ${spin4} 5.5s linear infinite; } `; const Circles = styled.div` z-index: 0; position: fixed; width: 50vmin; height: 50vmin; top: 50%; left: 50%; transform: translate(-50%, -50%); `; const CircleAnimation = () => ( <Circles> <Circle /> <Circle /> <Circle /> <Circle /> </Circles> );
Add
component
to project
Learn more
npx v0 add
a1B2c3d4
component.jsx
(read-only)
Log In to Copy Code
To enable copying code, saving to favorites, forking, and other features, please sign up or log in.
Authenticate
Copy Code
Copy CLI command
&:first-child { border-color: rgba(219,68,55,0.9); animation: ${spin1} 5.5s linear infinite; } &:nth-child(2) { border-color: rgba(244,180,0,0.9); animation: ${spin2} 5.5s linear infinite; } &:nth-child(3) { border-color: rgba(66,133,244,0.9); animation: ${spin3} 5.5s linear infinite; } &:nth-child(4) { border-color: rgba(15,157,88,0.9); animation: ${spin4} 5.5s linear infinite; } `; const Circles = styled.div` z-index: 0; position: fixed; width: 50vmin; height: 50vmin; top: 50%; left: 50%; transform: translate(-50%, -50%); `; const CircleAnimation = () => ( <Circles> <Circle /> <Circle /> <Circle /> <Circle /> </Circles> );
History
Toggle
v0
v1
v2
Link to youngminkk's v0.app Profile
Link to youngminkk's v0.app Profile
Desktop
Tablet
Mobile
Full Screen
History
Code