├── .gitignore ├── md-preloader.html ├── README.md ├── bower.json ├── md-preloader.min.css ├── md-preloader.less └── md-preloader.scss /.gitignore: -------------------------------------------------------------------------------- 1 | compile 2 | -------------------------------------------------------------------------------- /md-preloader.html: -------------------------------------------------------------------------------- 1 | 5 |
6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Design Preloader 2 | A CSS animated SVG implementation of the Google Material Design preloader 3 | 4 | ![Bower](https://img.shields.io/bower/v/material-design-preloader.svg?style=flat-square) 5 | 6 | ### Install ### 7 | ``` 8 | bower install material-design-preloader 9 | ``` 10 | 11 | ### Examples ### 12 | 13 | ![Demo1](http://i.imgur.com/VDdIDOR.gif) 14 | ![Demo2](http://i.imgur.com/LDuHZef.gif) 15 | ![Demo3](http://i.imgur.com/HC3a6u3.gif) 16 | ![Demo4](http://i.imgur.com/DSHznsG.gif) 17 | ![Demo5](http://i.imgur.com/QL4ub85.gif) 18 | ![Demo6](http://i.imgur.com/cxsT7rS.gif) 19 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-design-preloader", 3 | "version": "1.1.1", 4 | "license": "MIT", 5 | "homepage": "https://github.com/rtheunissen/material-design-preloader", 6 | "authors": [ 7 | "Rudi Theunissen " 8 | ], 9 | "description": "CSS animated SVG implementation of the Google Material Design preloader", 10 | "main": ["md-preloader.html", "md-preloader.less"], 11 | "keywords": [ 12 | "svg", 13 | "material", 14 | "design", 15 | "preloader", 16 | "spinner" 17 | ], 18 | "ignore": [ 19 | "*.md", 20 | "*.json" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /md-preloader.min.css: -------------------------------------------------------------------------------- 1 | .md-preloader{font-size:0;display:inline-block;-webkit-animation:outer 6600ms linear infinite;animation:outer 6600ms linear infinite}.md-preloader svg{-webkit-animation:inner 1320ms linear infinite;animation:inner 1320ms linear infinite}.md-preloader svg circle{fill:none;stroke:#448aff;stroke-linecap:square;-webkit-animation:arc 1320ms cubic-bezier(.8, 0, .4, .8) infinite;animation:arc 1320ms cubic-bezier(.8, 0, .4, .8) infinite}@-webkit-keyframes outer{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes outer{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes inner{0%{-webkit-transform:rotate(-100.8deg);transform:rotate(-100.8deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes inner{0%{-webkit-transform:rotate(-100.8deg);transform:rotate(-100.8deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@-webkit-keyframes arc{0%{stroke-dasharray:1 210.48670779px;stroke-dashoffset:0}40%{stroke-dasharray:151.55042961px,210.48670779px;stroke-dashoffset:0}100%{stroke-dasharray:1 210.48670779px;stroke-dashoffset:-151.55042961px}}@keyframes arc{0%{stroke-dasharray:1 210.48670779px;stroke-dashoffset:0}40%{stroke-dasharray:151.55042961px,210.48670779px;stroke-dashoffset:0}100%{stroke-dasharray:1 210.48670779px;stroke-dashoffset:-151.55042961px}} 2 | -------------------------------------------------------------------------------- /md-preloader.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Google Material Design Preloader 3 | * 4 | * CSS animated SVG implementation of the Google Material Design preloader 5 | * 6 | * Reference: http://goo.gl/ZfulRH 7 | * License: MIT 8 | * Author: Rudi Theunissen (rudolf.theunissen@gmail.com) 9 | * Version: 1.1.1 10 | */ 11 | .md-preloader { 12 | @easing: cubic-bezier(.8,.0,.4,.8); 13 | 14 | @speed: 1320ms; // animation time for each loop 15 | @color: #448AFF; // Blue A200 in the Material Design color palette 16 | @linecap: square; // could be 'round', but the official one is square 17 | @loops: 5; // number of points where the arc meets 18 | @arc: 0.72; // fraction of the circumference that the arc grows to 19 | @perimeter: 67px * pi(); // circumference of the raw svg inner cricle 20 | 21 | // measure to prevent inline block spacing from affecting the outer rotation 22 | font-size: 0; 23 | 24 | display: inline-block; 25 | animation: outer @speed * @loops linear infinite; 26 | 27 | svg { 28 | animation: inner @speed linear infinite; 29 | 30 | circle { 31 | fill: none; 32 | stroke: @color; 33 | stroke-linecap: @linecap; 34 | animation: arc @speed @easing infinite; 35 | } 36 | } 37 | 38 | @keyframes outer { 39 | 0% { 40 | transform: rotate(0); 41 | } 42 | 100% { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | 47 | @keyframes inner { 48 | 0% { 49 | transform: rotate(-360deg * (1 - @arc)); 50 | } 51 | 100% { 52 | transform: rotate(0); 53 | } 54 | } 55 | 56 | @keyframes arc { 57 | 0% { 58 | stroke-dasharray: 1 @perimeter; 59 | stroke-dashoffset: 0; 60 | } 61 | 40% { 62 | stroke-dasharray: @arc * @perimeter, @perimeter; 63 | stroke-dashoffset: 0; 64 | } 65 | 100% { 66 | stroke-dasharray: 1 @perimeter; 67 | stroke-dashoffset: -@arc * @perimeter; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /md-preloader.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Google Material Design Preloader 3 | * 4 | * CSS animated SVG implementation of the Google Material Design preloader 5 | * 6 | * Reference: http://goo.gl/ZfulRH 7 | * License: MIT 8 | * Author: Rudi Theunissen (rudolf.theunissen$gmail.com) 9 | * Version: 1.1.1 10 | */ 11 | .md-preloader { 12 | $easing: cubic-bezier(.8,.0,.4,.8); 13 | 14 | $speed: 1320ms; // animation time for each loop 15 | $color: #448AFF; // Blue A200 in the Material Design color palette 16 | $linecap: square; // could be 'round', but the official one is square 17 | $loops: 5; // number of points where the arc meets 18 | $arc: 0.72; // fraction of the circumference that the arc grows to 19 | $perimeter: 67px * pi(); // circumference of the raw svg inner cricle 20 | 21 | // measure to prevent inline block spacing from affecting the outer rotation 22 | font-size: 0; 23 | 24 | display: inline-block; 25 | animation: outer $speed * $loops linear infinite; 26 | 27 | svg { 28 | animation: inner $speed linear infinite; 29 | 30 | circle { 31 | fill: none; 32 | stroke: $color; 33 | stroke-linecap: $linecap; 34 | animation: arc $speed $easing infinite; 35 | } 36 | } 37 | 38 | @keyframes outer { 39 | 0% { 40 | transform: rotate(0); 41 | } 42 | 100% { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | 47 | @keyframes inner { 48 | 0% { 49 | transform: rotate(-360deg * (1 - $arc)); 50 | } 51 | 100% { 52 | transform: rotate(0); 53 | } 54 | } 55 | 56 | @keyframes arc { 57 | 0% { 58 | stroke-dasharray: 1 $perimeter; 59 | stroke-dashoffset: 0; 60 | } 61 | 40% { 62 | stroke-dasharray: $arc * $perimeter, $perimeter; 63 | stroke-dashoffset: 0; 64 | } 65 | 100% { 66 | stroke-dasharray: 1 $perimeter; 67 | stroke-dashoffset: -$arc * $perimeter; 68 | } 69 | } 70 | } 71 | --------------------------------------------------------------------------------