Loader with dots

100%

Loader with dots

✓ Published1🌍 Public

Last edited Sep 27, 2022

Created on Sep 27, 2022

This example shows three circular dots arranged horizontally as a loading indicator, animating in a staggered scale sequence. The loader uses pure CSS transitions and keyframe animations (`@keyframes preloader`) to create the pulsing effect, with each dot’s animation delayed for a rhythmic loop. The markup consists of a `.loader` container with three `.loader__element` spans, styled via CSS custom properties (e.g., `--main-color`, `--point-color`) and rendered on an SVG page. No JavaScript libraries are used; D3 is loaded but unused in this static behavior.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

simple loading indicator with css

This example demonstrates a simple loading indicator, a purely visual element that signals an ongoing process through a spinning animation. It shows a circular progress icon that rotates continuously to convey activity. The visualization is achieved using a single HTML `div` element with a CSS class, styled through the provided stylesheet. The core logic relies on the CSS `animation` property with a `@keyframes` rule named `spin`, which rotates the element from 0 to 360 degrees over a two-second linear infinite cycle. The loader’s design uses a bordered circle with a transparent center and a contrasting top border to create the spinning effect, while the container is positioned absolutely with a high z-index and partial opacity.

AAbhay-Joshi-Git

76% match

Loading thumbnail…

Fork of D3 spinner - 2

A circular loading spinner animation comprises ten evenly spaced blue dots arranged around a light blue SVG canvas. The dots rotate positions and vary their radius and opacity based on a rotating array of angles, creating a wave-like pulse effect. The code uses D3.js selection methods, including `data` joins with enter and update handling, alongside `d3.interval` to trigger periodic rotation of the dataset. All rendering is done via SVG, with parametric circle equations computing each dot’s coordinates.

SSubhendu Karmakar

71% match

Loading thumbnail…

D3 spinner

This example shows a minimalist loading spinner rendered as a single animated arc that rotates continuously around a circular track on a pale green background. The animation uses D3 transitions with a 20-second duration, where `transition.attrTween` interpolates the arc’s `endAngle` from 0 to 2π, and an `on("end")` callback restarts the spin indefinitely. The code builds the shape with `d3.arc()`, setting outer and inner radii relative to the container size, and positions it via an SVG `<g>` transform.

SSubhendu Karmakar

70% match

Loading thumbnail…

Fork of Fork of Loading Data with React & D3

This example displays a loading screen followed by a vertical stack of colored horizontal bars, one for each CSS named color. The page initially shows a large “Loading...” message, then renders the dataset by mapping each color’s RGB hex value to a thin div’s background. The code uses React’s `useState` and `useEffect` to asynchronously fetch the CSS named colors CSV via D3’s `csv` utility, then maps the resulting array to styled divs with a fixed width of 960 pixels and height of 4 pixels each.

KKonJoDot

69% match

Loading thumbnail…

Rainbow spinner

Animated SVG loading spinner renders 181 rainbow-colored arc segments using D3's `d3.arc` and `d3.interpolateRainbow`. The 960×500 canvas orbits the spinner around its center via `d3.timer`, while a clip path continuously stretches a plain arc's angle using `transition.attrTween`, alternating between expanding and contracting to mimic an Android-style loader.

FFrissAnalytics

69% match

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

68% match

Loading thumbnail…

Page ROller

This example shows a looping CSS animation of four rotating lines that form a rolling square shape. The animation uses custom keyframes named `desno`, `desno2`, and `desno3` to rotate each line sequentially around different origins, with staggered opacity changes creating the illusion of a continuous page-turning effect. The code relies on CSS transforms, animation properties, and positioning, with the lines styled as rounded rectangles in a yellow-green palette on a green background. While the HTML includes an SVG element and D3.js, the visual effect is driven entirely by CSS.

AAndrew-Kiwa

68% match

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

67% match