Tweaked to be a throbber for showing current location on a map.
Forked from: Styled after Series of Concentric Circles Emanating from Glowing Red Dot in The Onion.
-
-
Save thomasdunn/1a2cade1d5b7242a0109 to your computer and use it in GitHub Desktop.
Throbber
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .ring { | |
| fill: none; | |
| stroke: #BE2525; | |
| stroke-width: 8; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500); | |
| function addThrobber(x, y) { | |
| var translate = "translate(" + x + ", " + y + ")"; | |
| return setInterval(function() { | |
| svg.append("circle") | |
| .attr("class", "ring") | |
| .attr("transform", translate) | |
| .attr("r", 6) | |
| .transition() | |
| .ease("linear") | |
| .duration(3000) | |
| .style("stroke-opacity", 1e-6) | |
| .style("stroke-width", 1) | |
| .style("stroke", "brown") | |
| .attr("r", 50) | |
| .remove(); | |
| }, 850); | |
| } | |
| addThrobber(100, 100); | |
| addThrobber(200, 100); | |
| addThrobber(150, 150); | |
| addThrobber(100, 200); | |
| addThrobber(200, 200); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment