Skip to main content
SimilarExport ZIP
100%

Rainbow spinner

✓ Published0🌍 Public
FFrissAnalytics
Last edited Sep 25, 2018
Created on Sep 25, 2018

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.

AI-generated description

An Android-style loading spinner with a touch of rainbow.

Canvas would probably be a better idea.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/5bc85fa785c151be8fe54970bba70ca6'>Rainbow spinner</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Rainbow spinner #2

This example displays a continuously rotating rainbow ring on a canvas, with a white gap that stretches and shrinks as the animation cycles. The code uses d3.arc with a canvas 2D context to draw 181 colored segments, each filled and stroked with d3.interpolateRainbow. A d3.timer drives the rotation by updating an angle offset, while d3.select transition with a custom tween on "angle" alternately stretches the start or end edge of the gap, creating a rhythmic pulsing effect.

FFrissAnalytics
87% 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
80% match
Loading thumbnail…

Rainbow Circle

A rainbow ring is constructed from 500 individual SVG path segments, each an arc slice that together form a circular band. The color of each slice encodes its angular position via the HSL color space, creating a smooth spectral gradient around the circle. The example uses D3 v3’s `d3.svg.arc` to generate the path geometries and `d3.hsl` to compute fill colors, with segment angles derived from a range over 2π radians. The rendering is entirely SVG, placed within a 960 by 960 pixel viewport.

Mmbostock
76% match
Loading thumbnail…

Rainbow Pack

A colorful swarm of circles arranges itself into a dense, rainbow-hued cluster. Each circle originates from a point along the outer edge of the canvas, then animates inward to its final position, with the color of each circle determined by its angle from the center. This creates a vibrant, radially organized pattern where hues progress around the circle. Built with d3.v4, the example uses `d3.packSiblings` for circle packing and `d3.scaleRainbow` for coloring, animating positions via a transition with `d3.easeCubicOut` and staggered delays based on distance.

Mmbostock
75% 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
75% 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
74% match
Loading thumbnail…

Spinner with d3-component

This example demonstrates how to display a spinner while data is loading and replace it with a bar chart after a simulated fetch. It uses d3-component’s conditional rendering to switch between components, with a local timer driving the spinner’s rotation based on elapsed time. The visualization is rendered as SVG, using D3 transitions with a bounce ease to animate bar heights.

CCurran Kelleher
73% match
Loading thumbnail…

Rainbow Circles I

A set of 99 concentric circles radiates from the center of an SVG canvas, each ring rendered in a randomly generated RGB color. The circles grow in 10-pixel increments, creating a vivid, rainbow-like target pattern. Built with React, the visualization uses functional components and props to map over a predefined array of radii, while the SVG `circle` element draws each stroke with a fixed width and no fill. The random color assignment per circle produces a unique, non-repeating palette across the full 960 by 500 pixel viewport.

NNita
73% match