CodePen Embed - SVG ∞ loader (no JS, cross-browser, minimal code)

Live

This Pen is owned by Ana Tudor on CodePen.

External CSS

https://codepen.io/thebabydino/pen/evPbxv.css

External JavaScript

https://codepen.io/thebabydino/pen/evPbxv.js

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"tabs\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"yjoPMJ\",\"auto_save\":true},\"hashid\":\"yjoPMJ\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://codepen.io/thebabydino/pen/evPbxv.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/thebabydino/pen/evPbxv.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"svg\",\"jade\",\"animation\"],\"id\":24239332,\"user_id\":2017,\"html\":\"- var r = 500;\\n- var w = 8*r, h = .5*w, x = -.5*w, y = -.5*h;\\n- var c = Math.round(r/Math.SQRT2);\\n- var l = Math.ceil((3*Math.PI + 4)*r);\\n- var d = ~~(Math.PI*r);\\n\\nsvg(viewBox=[x, y, w, h].join(' '))\\n\\tpath#inf(d=`M${c}${-c}A${r} ${r} 0 1 1 ${c} ${c}L${-c}${-c}A${r} ${r} 0 1 0${-c} ${c}z`)\\n\\tuse(xlink:href='#inf' stroke-dasharray=`${d} ${l - d}` stroke-dashoffset=`${l}px`)\",\"css\":\"html { background: #333 }\\nbody { text-align: center }\\n\\nsvg {\\n\\tmax-width: 25em;\\n\\tborder-radius: 3px;\\n\\tbox-shadow: 2px 2px 5px #000;\\n\\tbackground: #111;\\n\\tfill: none;\\n\\tstroke: #222;\\n\\tstroke-linecap: round;\\n\\tstroke-width: 8%\\n}\\n\\nuse {\\n\\tstroke: #fff;\\n\\tanimation: a 2s linear infinite\\n}\\n\\n@keyframes a { to { stroke-dashoffset: 0px } }\",\"js\":\"\",\"html_pre_processor\":\"pug\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2018-05-04T09:33:20.000Z\",\"updated_at\":\"2021-09-02T20:51:57.000Z\",\"title\":\"SVG ∞ loader (no JS, cross-browser, minimal code)\",\"description\":\"[Watch me code this](https://youtu.be/fO9QMtSSROY) in 8 minutes, 20 lines of CSS and 4 lines of generated SVG.\\n\\nIf the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:\\n\\n* being a cool cat 😼🎩 and becoming a patron on Patreon\\n\\n[![become a patron button](https://assets.codepen.io/2017/btn_patreon.png)](https://www.patreon.com/anatudor)\\n\\n* making a one time donation via Ko-fi\\n\\n[![ko-fi](https://assets.codepen.io/2017/btn_kofi.svg)](https://ko-fi.com/anatudor)\\n\\n* getting me something off my Amazon WishList \\n\\n[🎁 🇺🇸](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/) / [🎁 🇬🇧](https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/)\\n\\n* or at least sharing this to show the rest of the world what can be done with CSS these days\\n\\nThank you!\\n\\n---\\n\\n[Original idea](https://dribbble.com/shots/4250395-):\\n\\n![original gif showing infinity loader](https://cdn.dribbble.com/users/108183/screenshots/4250395/infinity_loader_by_volorf.gif)\",\"slug_hash\":\"yjoPMJ\",\"head\":\"<script>const ID='fO9QMtSSROY'</script>\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"prefixfree\",\"template\":false,\"parent_id\":0,\"comments_count\":1,\"custom_screenshot_filename\":null,\"loves_count\":243,\"pick\":false,\"popularity\":3610,\"views_count\":23848,\"pick_visible_at\":null,\"cpid\":\"01632a7f-ab00-749c-b32d-1b4f7fc085d9\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}