Polymer element of "Material Design Spinner"

circular-indicator.html

<polymer-element name="circular-indicator" attributes="duration colors size">

    <template>

        <style>

            @-webkit-keyframes rotator {
                0% { -webkit-transform: rotate(0deg); }
                100% { -webkit-transform: rotate(360deg); }
            }

            @-webkit-keyframes colors {
                0% { stroke: #4285F4; }
                20% { stroke: #4285F4; }
                25% { stroke: #DE3E35; }
                45% { stroke: #DE3E35; }
                50% { stroke: #F7C223; }
                70% { stroke: #F7C223; }
                75% { stroke: #1B9A59; }
                95% { stroke: #1B9A59; }
                100% { stroke: #4285F4; }
            }

            @-webkit-keyframes dash {
                0% {
                    stroke-dashoffset: {{offset}};
                }
                
                12.5% {
                    stroke-dashoffset: {{offset/4}};
                    -webkit-transform:rotate(0deg);
                }
                
                25% {
                    stroke-dashoffset: {{offset}};
                    -webkit-transform: rotate(270deg);
                }

                37.5% {
                    stroke-dashoffset: {{offset/4}};
                    -webkit-transform: rotate(270deg);
                }
                
                50% {
                    stroke-dashoffset: {{offset}};
                    -webkit-transform:rotate(540deg);
                }

                62.5% {
                    stroke-dashoffset: {{offset/4}};
                    -webkit-transform:rotate(540deg);
                }
                
                75% {
                    stroke-dashoffset: {{offset}};
                    -webkit-transform:rotate(810deg);
                }

                87.5% {
                    stroke-dashoffset: {{offset/4}};
                    -webkit-transform:rotate(810deg);
                }
                
                100% {
                    stroke-dashoffset: {{offset}};
                    -webkit-transform:rotate(1080deg);
                }
            }

            @keyframes rotator {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            @keyframes colors {
                0% { stroke: #4285F4; }
                20% { stroke: #4285F4; }
                25% { stroke: #DE3E35; }
                45% { stroke: #DE3E35; }
                50% { stroke: #F7C223; }
                70% { stroke: #F7C223; }
                75% { stroke: #1B9A59; }
                95% { stroke: #1B9A59; }
                100% { stroke: #4285F4; }
            }

            @keyframes dash {
                0% { stroke-dashoffset: {{offset}}; }

                12.5% {
                    stroke-dashoffset: {{offset/4}};
                    transform:rotate(0deg);
                }

                25% {
                    stroke-dashoffset: {{offset}};
                    transform:rotate(270deg);
                }

                37.5% {
                    stroke-dashoffset: {{offset/4}};
                    transform:rotate(270deg);
                }

                50% {
                    stroke-dashoffset: {{offset}};
                    transform:rotate(540deg);
                }

                62.5% {
                    stroke-dashoffset: {{offset/4}};
                    transform:rotate(540deg);
                }

                75% {
                    stroke-dashoffset: {{offset}};
                    transform:rotate(810deg);
                }

                87.5% {
                    stroke-dashoffset: {{offset/4}};
                    transform:rotate(810deg);
                }

                100% {
                    stroke-dashoffset: {{offset}};
                    transform:rotate(1080deg);
                }
            }

            :host {
                display: inline-block;
                position: relative;
                border: 0;
                background: transparent;
                text-align: center;
                outline: none;
                -webkit-user-select: none;
                user-select: none;
            }

            #section {
                position: relative;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
            }

            .spinner {
                -webkit-animation: rotator {{duration}}s linear infinite;
                animation: rotator {{duration}}s linear infinite;
            }

            .path {
                stroke-dasharray: {{offset}};
                stroke-dashoffset: 0;
                transform-origin: center;
                -webkit-animation: dash {{duration*2}}s ease-in-out infinite;
                animation: dash {{duration*2}}s ease-in-out infinite;
                stroke: #4285F4;
            }

            .path[colors] {
                -webkit-animation: dash {{duration*2}}s ease-in-out infinite, colors {{duration*2}}s ease-in infinite;
                animation: dash {{duration*2}}s ease-in-out infinite, colors {{duration*2}}s ease-in infinite;
            }
        </style>

        <section id="section" center center-justified horizontal layout>
            <svg class="spinner" width="{{size}}" height="{{size}}" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" colors?="{{colors}}" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="20"></circle>
            </svg>
        </section>
    </template>

    <script>

    Polymer('circular-indicator', {
        offset: 125,
        size: 66,
        duration: 3
    });

    </script>

</polymer-element>

Material-Design-Spinner.markdown

Material Design Spinner

CSS and SVG recreation of the new Google material design loading spinner.

Forked from Fran Pérez's Pen Material Design Spinner.

A Pen by Casper Pascal on CodePen.

License.