| <!DOCTYPE html> |
| <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <title>Material spinner demo</title> |
| <style type="text/css"> |
| @keyframes background-anim { |
| from { |
| background-color: rgb(30,100, 30); |
| } |
| to { |
| background-color: rgb(30, 30, 100); |
| } |
| } |
| |
| html, body { |
| height: 100%; |
| } |
| |
| html { |
| background-color: #242424; |
| } |
| |
| #background { |
| margin: 0; |
| height: 100vh; |
| width: 100vw; |
| background-color: #282828; |
| transform:scale(3); |
| animation: background-anim 5s alternate-reverse infinite ease-in-out; |
| } |
| |
| .absolute-center { |
| margin: auto; |
| position: absolute !important; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| .material-spinner { |
| display: inline-block; |
| position: relative; |
| width: 4.25rem; |
| height: 4.25rem; |
| animation: container-rotate 1568.23529ms linear infinite; } |
| .material-spinner .spinner-layer { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } |
| .material-spinner .circle-clipper { |
| display: inline-block; |
| position: relative; |
| width: 50%; |
| height: 100%; |
| overflow: hidden; } |
| .material-spinner .half-circle { |
| position: absolute; |
| width: 4.25rem; |
| height: 4.25rem; } |
| .material-spinner .half-circle > div > div { |
| width: 50%; |
| height: 100%; |
| overflow: hidden; } |
| .material-spinner .half-circle > div > div > div { |
| width: 3.75rem; |
| height: 3.75rem; |
| border: 0.25rem solid #eee; |
| border-radius: 50%; } |
| .material-spinner .left .half-circle { |
| transform: rotate(129deg); |
| animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } |
| .material-spinner .left .half-circle > div { |
| transform: rotate(45deg); } |
| .material-spinner .right .half-circle { |
| left: -100%; |
| transform: rotate(-129deg); |
| animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } |
| .material-spinner .right .half-circle > div { |
| transform: rotate(135deg); } |
| @keyframes container-rotate { |
| to { |
| transform: rotate(360deg); } } |
| @keyframes fill-unfill-rotate { |
| 12.5% { |
| transform: rotate(135deg); } |
| 25% { |
| transform: rotate(270deg); } |
| 37.5% { |
| transform: rotate(405deg); } |
| 50% { |
| transform: rotate(540deg); } |
| 62.5% { |
| transform: rotate(675deg); } |
| 75% { |
| transform: rotate(810deg); } |
| 87.5% { |
| transform: rotate(945deg); } |
| to { |
| transform: rotate(1080deg); } } |
| @keyframes left-spin { |
| from { |
| transform: rotate(130deg); } |
| 50% { |
| transform: rotate(-5deg); } |
| to { |
| transform: rotate(130deg); } } |
| @keyframes right-spin { |
| from { |
| transform: rotate(-130deg); } |
| 50% { |
| transform: rotate(5deg); } |
| to { |
| transform: rotate(-130deg); } } |
| </style> |
| </head><body> |
| <div id="background"> |
| <div class="absolute-center material-spinner"> |
| <div class="spinner-layer"> |
| <div class="circle-clipper left"> |
| <div class="half-circle"><div><div><div></div></div></div></div> |
| </div><div class="circle-clipper right"> |
| <div class="half-circle"><div><div><div></div></div></div></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body></html> |