Skip to content

Instantly share code, notes, and snippets.

@dankerizer
Created February 27, 2019 19:50
Show Gist options
  • Save dankerizer/a50e60f790769c7bb51448b322c42773 to your computer and use it in GitHub Desktop.
Save dankerizer/a50e60f790769c7bb51448b322c42773 to your computer and use it in GitHub Desktop.
loader.svg
Display the source blob
Display the rendered blob
Raw
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-blank"><circle cx="50" cy="50" fill="none" ng-attr-r="{{config.r3}}" ng-attr-stroke="{{config.c3}}" ng-attr-stroke-width="{{config.width}}" r="46" stroke="#ec1c24" stroke-width="5"><animate attributeName="stroke-dasharray" calcMode="linear" values="0 0 0 144.51326206513048 0 144.51326206513048;0 0 144.51326206513048 0 0 144.51326206513048;0 0 144.51326206513048 0 0 144.51326206513048;0 144.51326206513048 0 144.51326206513048 0 144.51326206513048;0 144.51326206513048 0 144.51326206513048 0 144.51326206513048" keyTimes="0;0.2;0.4;0.6;1" dur="1" begin="-1s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="50" fill="none" ng-attr-r="{{config.r2}}" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-width="{{config.width}}" r="40" stroke="#fdbd10" stroke-width="5"><animate attributeName="stroke-dasharray" calcMode="linear" values="0 0 0 125.66370614359172 0 125.66370614359172;0 0 125.66370614359172 0 0 125.66370614359172;0 0 125.66370614359172 0 0 125.66370614359172;0 125.66370614359172 0 125.66370614359172 0 125.66370614359172;0 125.66370614359172 0 125.66370614359172 0 125.66370614359172" keyTimes="0;0.2;0.4;0.6;1" dur="1" begin="-0.92s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="50" fill="none" ng-attr-r="{{config.r1}}" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-width="{{config.width}}" r="34" stroke="#0066b2" stroke-width="5"><animate attributeName="stroke-dasharray" calcMode="linear" values="0 0 0 106.81415022205297 0 106.81415022205297;0 0 106.81415022205297 0 0 106.81415022205297;0 0 106.81415022205297 0 0 106.81415022205297;0 106.81415022205297 0 106.81415022205297 0 106.81415022205297;0 106.81415022205297 0 106.81415022205297 0 106.81415022205297" keyTimes="0;0.2;0.4;0.6;1" dur="1" begin="-0.84s" repeatCount="indefinite"></animate></circle><g transform="rotate(180 50 50)"><circle cx="50" cy="50" fill="none" ng-attr-r="{{config.r3}}" ng-attr-stroke="{{config.c3}}" ng-attr-stroke-width="{{config.width}}" r="46" stroke="#ec1c24" stroke-width="5"><animate attributeName="stroke-dasharray" calcMode="linear" values="0 0 0 144.51326206513048 0 144.51326206513048;0 0 144.51326206513048 0 0 144.51326206513048;0 0 144.51326206513048 0 0 144.51326206513048;0 144.51326206513048 0 144.51326206513048 0 144.51326206513048;0 144.51326206513048 0 144.51326206513048 0 144.51326206513048" keyTimes="0;0.2;0.4;0.6;1" dur="1" begin="-0.43999999999999995s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="50" fill="none" ng-attr-r="{{config.r2}}" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-width="{{config.width}}" r="40" stroke="#fdbd10" stroke-width="5"><animate attributeName="stroke-dasharray" calcMode="linear" values="0 0 0 125.66370614359172 0 125.66370614359172;0 0 125.66370614359172 0 0 125.66370614359172;0 0 125.66370614359172 0 0 125.66370614359172;0 125.66370614359172 0 125.66370614359172 0 125.66370614359172;0 125.66370614359172 0 125.66370614359172 0 125.66370614359172" keyTimes="0;0.2;0.4;0.6;1" dur="1" begin="-0.52s" repeatCount="indefinite"></animate></circle><circle cx="50" cy="50" fill="none" ng-attr-r="{{config.r1}}" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-width="{{config.width}}" r="34" stroke="#0066b2" stroke-width="5"><animate attributeName="stroke-dasharray" calcMode="linear" values="0 0 0 106.81415022205297 0 106.81415022205297;0 0 106.81415022205297 0 0 106.81415022205297;0 0 106.81415022205297 0 0 106.81415022205297;0 106.81415022205297 0 106.81415022205297 0 106.81415022205297;0 106.81415022205297 0 106.81415022205297 0 106.81415022205297" keyTimes="0;0.2;0.4;0.6;1" dur="1" begin="-0.64s" repeatCount="indefinite"></animate></circle></g></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment