CodePen Embed - Animated Gradient SVG Loader

Live

This Pen is owned by Paul Thomas on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.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\":4,\"theme\":\"twilight\",\"id\":\"RGQPJY\",\"auto_save\":true},\"hashid\":\"RGQPJY\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"svg\",\"loader\",\"gsap\",\"gradient\"],\"id\":10138217,\"user_id\":209164,\"html\":\"<svg class=\\\"loader-graphic\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"170.83px\\\" height=\\\"165.419px\\\" x=\\\"0px\\\" y=\\\"0px\\\" viewBox=\\\"0 0 170.83 165.419\\\" enable-background=\\\"new 0 0 170.83 165.419\\\">\\n\\t\\n\\t\\n\\t<linearGradient id=\\\"loader_gradient\\\" gradientUnits=\\\"userSpaceOnUse\\\" x1=\\\"0\\\" y1=\\\"0\\\" x2=\\\"100%\\\" y2=\\\"100%\\\">\\n\\t\\t<stop offset=\\\"0\\\" style=\\\"stop-color:#fff\\\" stop-opacity=\\\"0\\\"></stop>\\n\\t\\t<stop offset=\\\"0.5\\\" style=\\\"stop-color:#fff\\\"></stop>\\n\\t\\t<stop offset=\\\"1\\\" style=\\\"stop-color:#fff\\\" stop-opacity=\\\"0\\\"></stop>\\n\\t</linearGradient>\\n\\t\\n\\t\\n\\t<g fill=\\\"url(#loader_gradient)\\\">\\n\\t\\t<path d=\\\"M115.548 29.083l-.857.12c.726 1.42 2.45 2.175 2.45 2.175l-.832.28c1.344 1.46 3.984 1.597 3.984 1.597l-.516.462c1.317.444 2.48.214 3.342-.146-.288-.243-.572-.51-.837-.835l-.42-.516.784-.258c-1.104-.763-2.896-2.3-3.1-4.343l-.08-.777.81.353c-.182-.61-.38-1.453-.484-2.383-.257-.03-.516-.04-.773-.01l.598.596s-2.73-.8-3.825-.132l.558.318s-1.723.514-2.867-.528c-.043-.038-.085-.077-.123-.118.495 3.213 2.19 4.143 2.19 4.143z\\\" class=\\\"path\\\"/>\\n\\t\\t<path d=\\\"M133.087 28.05l.236-1.08c.01-.04.764-3.59-.412-6.213l-1.064 1.575-.172-1.163c-.003-.03-.383-2.506-1.84-4.213l-.855 1.975-.317-1.338c-.006-.026-.668-2.534-4.432-4.576.575 2.233-.715 4.346-.777 4.445l-.567.91-.286-1.125c-.722 1.492-.857 4.135-.84 5.198l.03 1.788-1.05-1.845c-.458 2.532.712 5.433.726 5.466l.428 1.043-1.24-.54c.757 1.98 3.25 3.313 3.278 3.328l.957.503-1.436.47c1.393 1.327 3.112 1.52 4.243 1.468.828-2.234.675-7.362.675-7.362.894 3.93.648 6.146.354 7.24-.01.032-.02.06-.027.09-.16.556-.327.795-.327.795l-.004.004-.045.1-.03.06c-2.77 5.837-10.392 9.915-26.026 9.147-14.242-.698-17.834 12.04-17.834 12.04-.66 1.588-.84 2.833-1.608 4.378-.685 1.376-1.59 2.125-2.474 3.352-.76 1.03-1.022 1.398-1.606 2.555-1.278 2.53-1.5 5.84.312 8.186.206.267.438.522.68.756 1 .956 2.16 1.528 3.5 1.753.193.037.404.055.593.085h.827c.277-.048.562-.073.832-.132 1.36-.282 2.527-.935 3.49-1.98.913-.995 1.478-2.177 1.7-3.54.18-1.1.05-2.168-.295-3.21-.706-2.038-1.986-3.79-3.146-5.585-.983-1.522-1.392-2.762-1.096-4.7 1.404-9.156 11.837-7.92 22.568-8.096 8.376 2.39 11.618 13.017 11.618 17.4 0 16.79-15.834 26.908-34.21 26.908-19.515 0-34.904-11.484-34.904-31.718 0-13.706 6.867-20.74 16.914-24.112 2.096 1.004 6.23 3.227 9.535 3.227 2.163 0 3.624-1.004 3.624-2.797 0-2.223-2.1-3.374-5.213-3.374-1.59 0-5.087.287-8.073.864-5.217-5.457-6.614-11.27-6.614-16.722 0-11.34 6.23-17.512 15.07-17.512 1.1 0 2.236.114 3.322.305 1.643.29 3.104.924 4.512 1.852.552.364.99.867 1.444 1.39 1.767 2.038-.11 4.21.457 6.268.353 1.285 1.527 2.582 2.91 2.666 3.014.18 3.046-3.8 3.046-3.8-.173-2.213-1.283-4.495-3.423-6.454C85.995 1.938 81.795 0 75.184 0 60.688 0 53.187 8.826 53.187 18.37c0 7.25 4.386 14.713 13.097 18.947-6.616 1.936-24.034 10.045-24.034 31.36 0 22.606 19.646 36.6 42.154 36.6 25.112 0 39.737-17.367 39.737-35.164 0-7.647-2.125-15.532-7.103-20.737 9.92-2.06 12.658-10.457 13.41-14.936.062-.36.11-.695.147-1l.027-.01c.4-.258 3.486-2.375 3.68-6.163l-1.213.782zM87.213 66.283c.515.846 1.344 1.854 1.323 2.892-.004.29-.302.537-.55.614-.634.196-1.022-.286-1.08-.878-.043-.462-.105-.93-.187-1.398-.22-1.29-.57-2.564-1.058-3.78.334.9 1.056 1.73 1.55 2.55zM0 69.704h5.495v-27.23H0v-3.195h14.632c5.45 0 13.537 1.228 13.537 8.31 0 3.932-2.234 6.12-6.166 7.237 5.026 1.23 7.952 4.11 7.952 8.87 0 8.733-9.248 9.202-15.146 9.202H0v-3.196zm15.593-16.06c3.62 0 7.73-1.386 7.73-5.317 0-5.272-4.067-5.81-10.79-5.854h-1.788v11.17h4.848zm-2.19 16.06c7.46-.044 11.304-.678 11.304-6.188 0-4.76-4.58-6.903-9.114-6.903h-4.848v13.09h2.658zM167.233 48.66c0 1.698-1.386 3.687-3.843 3.687-2.233 0-3.753-1.81-3.753-3.507 0-2.3 1.877-3.574 2.837-3.574h.09c-2.056-2.846-5.607-3.552-7.84-3.552-7.396 0-11.796 6.284-11.796 14.162 0 7.127 4.67 13.627 11.304 13.627 4.803 0 8.377-3.91 8.377-6.567v-3.128h-6.323v-3.373h14.543v3.373h-3.642v13.09h-2.703l-1.095-4.713c-2.1 4.155-6.88 5.317-10.588 5.317-10.61 0-15.727-9.114-15.727-17.58 0-9.026 6.41-17.336 17.223-17.336 7.597 0 12.935 4.578 12.935 10.075z\\\" class=\\\"path\\\"/>\\n\\t\\t<path d=\\\"M43.68 162.386h-7.438v-18.1h2.73v15.384h4.71v2.716zM53.234 144.054c1.204 0 2.227.424 3.07 1.27.842.85 1.264 1.87 1.264 3.063v9.88c0 1.205-.424 2.228-1.27 3.07-.85.844-1.87 1.265-3.063 1.265-1.204 0-2.225-.424-3.062-1.27-.838-.848-1.257-1.87-1.257-3.063v-9.882c0-1.204.424-2.227 1.27-3.07.847-.842 1.863-1.264 3.048-1.264zm1.488 4.276c0-.434-.15-.802-.455-1.105-.303-.303-.67-.455-1.105-.455s-.804.15-1.112.455c-.308.304-.462.672-.462 1.105v9.91c0 .434.154.802.462 1.105.308.304.68.455 1.112.455s.802-.15 1.105-.455c.304-.303.455-.67.455-1.105v-9.91zM66.308 158.225l-.664 4.16H62.8l3.078-18.1h3.756l3.033 18.1h-2.87l-.64-4.16h-2.85zm1.434-9.794l-1.01 7.137h2.02l-1.01-7.136zM86.9 158.052c0 1.194-.418 2.215-1.256 3.063-.838.847-1.85 1.27-3.034 1.27h-4.29v-18.114h4.29c1.195 0 2.21.425 3.042 1.272s1.25 1.863 1.25 3.048v9.462zm-5.85 1.633h1.647c.434 0 .8-.157 1.098-.47.298-.313.448-.68.448-1.105v-9.477c0-.434-.152-.804-.455-1.112s-.667-.46-1.09-.46H81.05v12.625zM95.385 162.386h-2.73v-18.1h2.73v18.1zM104.248 144.27l3.623 12.176V144.27h2.73v18.116h-2.932l-3.756-11.6v11.6h-2.73V144.27h3.066zM120.69 162.617c-1.205 0-2.23-.423-3.07-1.27-.844-.848-1.265-1.865-1.265-3.05v-9.88c0-1.204.424-2.227 1.27-3.07.848-.842 1.87-1.264 3.063-1.264 1.204 0 2.225.424 3.062 1.27.838.85 1.257 1.87 1.257 3.063v2.066h-2.832v-2.124c0-.434-.154-.804-.462-1.112s-.68-.462-1.112-.462-.8.154-1.104.462-.455.68-.455 1.112v9.91c0 .434.153.802.456 1.105.303.303.67.455 1.105.455s.805-.15 1.113-.454c.308-.302.462-.67.462-1.102v-3.558h-1.517v-2.745h4.35v6.326c0 1.204-.425 2.225-1.272 3.062-.847.84-1.862 1.26-3.047 1.26zM130.242 159.67h2.73v2.73h-2.73v-2.73zM138.206 159.67h2.73v2.73h-2.73v-2.73zM146.17 159.67h2.73v2.73h-2.73v-2.73z\\\"/>\\n\\t</g>\\n</svg>\",\"css\":\"html, body{ height: 100%; }\\nbody {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tjustify-content: center;\\n\\tbackground: #6bb790;\\n}\",\"js\":\"// Animate gradient\\nTweenMax.fromTo('#loader_gradient', 2.5,\\n\\t{\\n\\t\\tattr:{ x1: '-100%', x2: '0%', y1: '-100%', y2: '0%' },\\n\\t},\\n\\t{\\n\\t\\tattr:{ x1: '100%', x2: '200%', y1: '100%', y2: '200%' },\\n\\t\\trepeat: -1,\\n\\t\\tease: SlowMo.ease.config(0.25, 0.5, false),\\n\\t}\\n);\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"reset\",\"js_library\":null,\"created_at\":\"2016-10-06T16:34:05.000Z\",\"updated_at\":\"2016-10-06T16:42:31.000Z\",\"title\":\"Animated Gradient SVG Loader\",\"description\":\"Using GSAP to animate the coordinates of an svg gradient to create a shimmer effect. Recently used on the Bramley & Gage website\",\"slug_hash\":\"RGQPJY\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":102,\"pick\":false,\"popularity\":1160,\"views_count\":6496,\"pick_visible_at\":null,\"cpid\":\"01579ad8-3c48-744f-ad49-449a29eb0203\",\"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"}