css pulse loader
All collections tagged with "css pulse loader"
16 CSS Pulse Animations
16 hand-coded CSS pulse animation templates built as real-world use cases — landing-page CTA button pulse, mobile FAB ripple, video play overlay halo, e-commerce Add-to-Cart hover-triggered double pulse, notification bell badge, live status dot, ECG heartbeat waveform, DevOps server status ring, recording indicator, map pin drop, skeleton loader shimmer, form submitting state, load-more staggered dots, wishlist heart cardiac rhythm, voice search mic listening pulse, and security scan overlay. Every pulse animates <strong>only <code>transform</code>, <code>opacity</code>, and <code>box-shadow</code></strong> — the three GPU-compositor-safe properties that keep 60fps on real mobile hardware without triggering layout reflow. Animating raw <code>width</code>, <code>height</code>, <code>margin</code>, or <code>padding</code> would tank INP scores; every demo here avoids that trap. 13 pure CSS + 3 with vanilla JS (form submit state, load-more trigger, voice listening). All respect <code>prefers-reduced-motion</code> — medical/status indicators keep a static readable state, decorative pulses disable entirely. Scoped under <code>.pl-NN</code>, MIT-licensed.
22 CSS Skeleton Loaders
22 hand-coded CSS skeleton loaders — React Suspense fallback, Next.js loading UI, prefers-reduced-motion fallback, dark-mode color-mix, SVG blur-up image, clamp sizing, cross-fade, ARIA live-region, timing recipe, CLS-preserving min-height, plus avatar, article, table, stats, comments, media list, chip cluster.
25 CSS Spinners
25 hand-coded CSS spinners covering every production loading-spinner pattern developers reach for — neon arc with glowing leading-edge dot, dual counter-rotate ring spinner, dot chase orbit (Material Design indeterminate pattern), gradient conic sweep, heartbeat pulse, audio equalizer wave bars, stacked ring helix, morphing square-to-circle, comet trail with fading tail, DNA double helix, folding cube 3D grid (SpinKit's signature pattern), ripple pulse ring (concentric circles), clock tick sweep, infinity loop stroke, bouncing elastic dots, spiral galaxy, glassmorphism loader (backdrop-filter pattern), cyberpunk segmented ring (gamer/Web3 aesthetic), breathing circle, particle scatter burst, retro TV static noise loader, liquid blob morphing, progress arc fill (determinate variant), matrix rain column (cyberpunk vertical), and aurora orb. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-spinners, no react-loading-skeleton, no SpinKit copy, no loading.io snippet). Every spinner uses CSS <code>@keyframes</code> animating <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role="status"</code> + <code>aria-live="polite"</code> markup so screen readers announce loading state correctly, respects <code>prefers-reduced-motion</code>, uses scoped <code>.sp-NN__*</code> class names so multiple spinners coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.