How to Build an AI Thinking Loader with HTML and CSS

<div class="cr-ai-loader"> <div class="cr-ai-loader__scene" role="status" aria-label="AI is thinking" > <!-- OUTER ENERGY RING --> <div class="cr-ai-loader__ring cr-ai-loader__ring--outer"> <span class="cr-ai-loader__node cr-ai-loader__node--one"></span> <span class="cr-ai-loader__node cr-ai-loader__node--two"></span> </div> <!-- MIDDLE ORBIT --> <div class="cr-ai-loader__ring cr-ai-loader__ring--middle"> <span class="cr-ai-loader__orbit-dot"></span> </div> <!-- INNER ORBIT --> <div class="cr-ai-loader__ring cr-ai-loader__ring--inner"> <span class="cr-ai-loader__orbit-dot"></span> </div> <!-- DATA PARTICLES --> <div class="cr-ai-loader__particles" aria-hidden="true"> <span class="cr-ai-loader__particle cr-ai-loader__particle--1"></span> <span class="cr-ai-loader__particle cr-ai-loader__particle--2"></span> <span class="cr-ai-loader__particle cr-ai-loader__particle--3"></span> <span class="cr-ai-loader__particle cr-ai-loader__particle--4"></span> <span class="cr-ai-loader__particle cr-ai-loader__particle--5"></span> <span class="cr-ai-loader__particle cr-ai-loader__particle--6"></span> </div> <!-- AI CORE --> <div class="cr-ai-loader__core"> <div class="cr-ai-loader__core-glow"></div> <div class="cr-ai-loader__core-shell"> <div class="cr-ai-loader__brain" aria-hidden="true"> <span class="cr-ai-loader__brain-line cr-ai-loader__brain-line--1"></span> <span class="cr-ai-loader__brain-line cr-ai-loader__brain-line--2"></span> <span class="cr-ai-loader__brain-line cr-ai-loader__brain-line--3"></span> <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--1"></span> <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--2"></span> <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--3"></span> <span class="cr-ai-loader__brain-node cr-ai-loader__brain-node--4"></span> </div> </div> <div class="cr-ai-loader__pulse"></div> </div> <!-- SIGNAL LINES --> <div class="cr-ai-loader__signals" aria-hidden="true"> <span class="cr-ai-loader__signal cr-ai-loader__signal--1"></span> <span class="cr-ai-loader__signal cr-ai-loader__signal--2"></span> <span class="cr-ai-loader__signal cr-ai-loader__signal--3"></span> <span class="cr-ai-loader__signal cr-ai-loader__signal--4"></span> </div> </div> <!-- STATUS --> <div class="cr-ai-loader__status"> <div class="cr-ai-loader__status-main"> <span class="cr-ai-loader__status-light"></span> <span class="cr-ai-loader__status-text"> AI is thinking </span> <span class="cr-ai-loader__typing" aria-hidden="true"> <i></i> <i></i> <i></i> </span> </div> <div class="cr-ai-loader__processing" aria-hidden="true"> <span></span> </div> </div> </div> 

.cr-ai-loader { --cr-bg: #060816; --cr-cyan: #22d3ee; --cr-blue: #3b82f6; --cr-purple: #a855f7; --cr-pink: #d946ef; --cr-text: #dbeafe; --cr-muted: #7c8ba1; width: 100%; min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 42px; padding: 50px 20px; background: radial-gradient( circle at 50% 43%, rgba(34, 211, 238, 0.08), transparent 24% ), radial-gradient( circle at 44% 48%, rgba(168, 85, 247, 0.09), transparent 34% ), linear-gradient( 145deg, #070a18 0%, #050713 55%, #090618 100% ); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-sizing: border-box; overflow: hidden; } .cr-ai-loader *, .cr-ai-loader *::before, .cr-ai-loader *::after { box-sizing: border-box; } /* MAIN SCENE */ .cr-ai-loader__scene { position: relative; width: 330px; height: 330px; display: flex; align-items: center; justify-content: center; } .cr-ai-loader__scene::before { content: ""; position: absolute; width: 235px; height: 235px; border-radius: 50%; background: radial-gradient( circle, rgba(34, 211, 238, 0.11) 0%, rgba(168, 85, 247, 0.07) 40%, transparent 72% ); filter: blur(10px); animation: crAiAmbient 3.2s ease-in-out infinite; } .cr-ai-loader__scene::after { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; border: 1px solid rgba(34, 211, 238, 0.05); box-shadow: 0 0 50px rgba(34, 211, 238, 0.08), 0 0 90px rgba(168, 85, 247, 0.05); } @keyframes crAiAmbient { 0%, 100% { opacity: 0.6; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.08); } } /* ORBIT RINGS */ .cr-ai-loader__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform-origin: center; pointer-events: none; } .cr-ai-loader__ring--outer { width: 292px; height: 292px; margin-left: -146px; margin-top: -146px; border: 1px solid rgba(34, 211, 238, 0.13); border-top-color: rgba(34, 211, 238, 0.75); border-right-color: rgba(168, 85, 247, 0.35); box-shadow: inset 0 0 25px rgba(34, 211, 238, 0.025), 0 0 20px rgba(34, 211, 238, 0.035); animation: crAiRotate 8s linear infinite; } .cr-ai-loader__ring--outer::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 1px dashed rgba(148, 163, 184, 0.08); border-left-color: rgba(168, 85, 247, 0.32); } .cr-ai-loader__ring--outer::after { content: ""; position: absolute; width: 5px; height: 5px; left: 32px; top: 38px; border-radius: 50%; background: var(--cr-purple); box-shadow: 0 0 7px var(--cr-purple), 0 0 18px rgba(168, 85, 247, 0.7); } .cr-ai-loader__ring--middle { width: 224px; height: 224px; margin-left: -112px; margin-top: -112px; border: 1px solid rgba(168, 85, 247, 0.12); border-left-color: rgba(168, 85, 247, 0.8); border-bottom-color: rgba(34, 211, 238, 0.36); animation: crAiRotateReverse 5.8s linear infinite; } .cr-ai-loader__ring--middle::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border-top: 1px solid rgba(34, 211, 238, 0.12); border-right: 1px solid transparent; } .cr-ai-loader__ring--inner { width: 162px; height: 162px; margin-left: -81px; margin-top: -81px; border: 1px solid rgba(34, 211, 238, 0.14); border-top-color: rgba(34, 211, 238, 0.75); border-bottom-color: rgba(217, 70, 239, 0.42); animation: crAiRotate 4.2s linear infinite; } @keyframes crAiRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes crAiRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } /* ORBIT NODES */ .cr-ai-loader__node, .cr-ai-loader__orbit-dot { position: absolute; display: block; border-radius: 50%; } .cr-ai-loader__node--one { width: 9px; height: 9px; top: -5px; left: 50%; margin-left: -4px; background: var(--cr-cyan); box-shadow: 0 0 7px var(--cr-cyan), 0 0 18px rgba(34, 211, 238, 0.8), 0 0 30px rgba(34, 211, 238, 0.35); } .cr-ai-loader__node--two { width: 7px; height: 7px; bottom: 21px; right: 34px; background: var(--cr-purple); box-shadow: 0 0 7px var(--cr-purple), 0 0 18px rgba(168, 85, 247, 0.75); } .cr-ai-loader__ring--middle .cr-ai-loader__orbit-dot { width: 8px; height: 8px; top: 31px; right: 18px; background: var(--cr-purple); box-shadow: 0 0 7px var(--cr-purple), 0 0 18px rgba(168, 85, 247, 0.65); } .cr-ai-loader__ring--inner .cr-ai-loader__orbit-dot { width: 7px; height: 7px; left: 14px; bottom: 29px; background: var(--cr-cyan); box-shadow: 0 0 7px var(--cr-cyan), 0 0 16px rgba(34, 211, 238, 0.7); } /* AI CORE */ .cr-ai-loader__core { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin-left: -56px; margin-top: -56px; display: flex; align-items: center; justify-content: center; z-index: 5; } .cr-ai-loader__core-glow { position: absolute; inset: -28px; border-radius: 50%; background: radial-gradient( circle, rgba(34, 211, 238, 0.20) 0%, rgba(168, 85, 247, 0.11) 38%, transparent 70% ); filter: blur(7px); animation: crAiCoreGlow 2.2s ease-in-out infinite; } @keyframes crAiCoreGlow { 0%, 100% { opacity: 0.55; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.12); } } .cr-ai-loader__core-shell { position: relative; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(34, 211, 238, 0.42); background: radial-gradient( circle at 35% 28%, rgba(255, 255, 255, 0.09), transparent 24% ), linear-gradient( 145deg, rgba(18, 32, 57, 0.96), rgba(8, 12, 29, 0.98) ); box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.09), inset 0 0 45px rgba(168, 85, 247, 0.07), 0 0 15px rgba(34, 211, 238, 0.23), 0 0 36px rgba(168, 85, 247, 0.12); animation: crAiCoreFloat 2.8s ease-in-out infinite; } .cr-ai-loader__core-shell::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.035); } .cr-ai-loader__core-shell::after { content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient( circle, rgba(34, 211, 238, 0.12), transparent 68% ); } @keyframes crAiCoreFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.025); } } /* AI BRAIN NETWORK */ .cr-ai-loader__brain { position: relative; width: 48px; height: 48px; z-index: 3; } .cr-ai-loader__brain::before { content: ""; position: absolute; width: 11px; height: 11px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: Source：https://dev.to/getcoderipple/how-to-build-an-ai-thinking-loader-with-html-and-css-2lmk
My favorites