5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T6a8,

The Shrinking-Circle Dynamic Loader

Make a striking first impression with the Shrinking-Circle Transition Loader, a sophisticated, modern loading component designed for page transitions, splash screens, and immersive web applications. This loader combines smooth spatial animation with dynamic typography to transform a standard loading sequence into a polished branding moment.

The Expanding-to-Minimizing Core: The animation begins or centers around a large, prominent background circle that dominates the viewport canvas. As background assets load or the application state resolves, this circle smoothly shrinks and collapses inward toward the exact center of the screen, creating a powerful sense of focus and transition.
Integrated Animated Text: Centered directly within or layered over the shrinking circle is a fluid animated text element. Whether displaying a dynamic status message (e.g., "Loading Experience", "Preparing Assets") or a fading brand name, the text features smooth entry/exit keyframes, gentle pulses, or typewriter effects that hold user interest during the collapse.
End-to-End Customization: Built for design flexibility, every single part of the component is fully customizable. You can effortlessly configure the initial diameter and color palette of the large circle, adjust the easing curve and duration of the minimization transition, and tailor the font family, weight, tracking, and color of the animated text to match any custom design system.

5a:[["$","$L5d",null,{"post":{"id":"01a0cc86-c59f-7381-a732-571d4f1d13c8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"dd31c0e8-94c4-4870-bf97-534b2c7041ef","name":"Krav Studios","slug":"krav-studios","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dd31c0e8-94c4-4870-bf97-534b2c7041ef/sq7p1q00","followed":false,"followsYou":false},"media":[],"resources":[{"id":"QTqP4uqfL6t0F4PubNfe","resolved":true,"title":"Circle Load","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"The Shrinking-Circle Dynamic Loader","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Make a striking first impression with the "},{"type":"text","text":"Shrinking-Circle Transition Loader","marks":[{"type":"bold"}]},{"type":"text","text":", a sophisticated, modern loading component designed for page transitions, splash screens, and immersive web applications. This loader combines smooth spatial animation with dynamic typography to transform a standard loading sequence into a polished branding moment."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The Expanding-to-Minimizing Core","marks":[{"type":"bold"}]},{"type":"text","text":": The animation begins or centers around a "},{"type":"text","text":"large, prominent background circle","marks":[{"type":"bold"}]},{"type":"text","text":" that dominates the viewport canvas. As background assets load or the application state resolves, this circle smoothly shrinks and collapses inward toward the exact center of the screen, creating a powerful sense of focus and transition."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Integrated Animated Text","marks":[{"type":"bold"}]},{"type":"text","text":": Centered directly within or layered over the shrinking circle is a "},{"type":"text","text":"fluid animated text element","marks":[{"type":"bold"}]},{"type":"text","text":". Whether displaying a dynamic status message (e.g., \"Loading Experience\", \"Preparing Assets\") or a fading brand name, the text features smooth entry/exit keyframes, gentle pulses, or typewriter effects that hold user interest during the collapse."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"End-to-End Customization","marks":[{"type":"bold"}]},{"type":"text","text":": Built for design flexibility, "},{"type":"text","text":"every single part of the component is fully customizable","marks":[{"type":"bold"}]},{"type":"text","text":". You can effortlessly configure the initial diameter and color palette of the large circle, adjust the easing curve and duration of the minimization transition, and tailor the font family, weight, tracking, and color of the animated text to match any custom design system."}]}]}]}]},"introduction":"Unique framer loader","slug":"circle-load","author":{"framerUserId":"dd31c0e8-94c4-4870-bf97-534b2c7041ef","name":"Krav Studios","slug":"krav-studios","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dd31c0e8-94c4-4870-bf97-534b2c7041ef/sq7p1q00","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dd31c0e8-94c4-4870-bf97-534b2c7041ef/01a0cc84-3a40-72dc-b180-7b04de44f82f.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3000,"height":2200}}],"post":null,"createdAt":"2026-09-23T04:29:38.999Z","updatedAt":"2026-09-23T04:29:38.999Z","publishedAt":"2026-09-23T04:29:38.997Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/bush-nENeJx.js@MdIzQhhwpIgnRYKxtDOk","previewUrl":"https://relaxed-footprint-169570.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"MdIzQhhwpIgnRYKxtDOk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-23T04:29:39.616Z","updatedAt":"2026-09-23T04:29:39.616Z","reported":false}}],"$L5f"]

Suggested for you