A small example of how to make a loader equal to Google. Original article in http://lea.verou.me/2013/11/flexible-google-style-loader-with-CSS/.
Last active
November 15, 2015 14:06
-
-
Save vinicius-stutz/c29fa81f77facb00160e to your computer and use it in GitHub Desktop.
Flexible Google-style loader with CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Flexible Google-style loader with CSS</title> | |
| </head> | |
| <body> | |
| <div class="small progress">Loading…</div> | |
| <div class="progress">Loading…</div> | |
| <div class="large progress">Loading…</div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes progress { | |
| 50% { border-width: .5em 0; } | |
| to { border-width: .5em 0 0 0; } | |
| } | |
| @keyframes rotate { | |
| to { transform: rotate(-270deg); } | |
| } | |
| .progress { | |
| display: inline-block; | |
| font-size: 50px; /* Size of the progress indicator */ | |
| width: 1em; height: 1em; | |
| border: solid white; | |
| border-top-color: #ddd; | |
| border-width: 0 0 .5em 0; | |
| border-radius: 50%; | |
| box-sizing: border-box; | |
| margin: .1em .2em; | |
| background: linear-gradient(white 50%, #ddd 50%); | |
| background-origin: border-box; | |
| transform: rotate(90deg); | |
| animation: rotate 1s steps(4) infinite, | |
| progress .25s linear infinite alternate; | |
| text-indent: 99em; | |
| overflow: hidden; | |
| } | |
| .progress.small { font-size: 16px } | |
| .progress.large { font-size: 100px } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment