Skip to content

Instantly share code, notes, and snippets.

@shramee

shramee/pure-css-loader.scss

Last active June 23, 2017 06:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shramee/349091b6cb2dce9f9065611f951bd2da to your computer and use it in GitHub Desktop.
Save shramee/349091b6cb2dce9f9065611f951bd2da to your computer and use it in GitHub Desktop.
Download ZIP
Pure css animated spinning loader
Raw
pure-css-loader.scss
/* SCSS */
@keyframes loader-anim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
width: 100px;
height: 100px;
position: relative;
animation: loader-anim 1s linear infinite;
border-radius: 999px;
border: 25px solid #0ad;
border-bottom-color: transparent;
margin: 25px auto;
& + h2, & + h3 {
margin: 25px;
text-align: center;
color: #0ad;
}
}
/* CSS */
@keyframes loader-anim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
width: 100px;
height: 100px;
position: relative;
animation: loader-anim 1s linear infinite;
border-radius: 999px;
border: 25px solid #0ad;
border-bottom-color: transparent;
margin: 25px auto;
}
.loader + h2,
.loader + h3 {
margin: 25px;
text-align: center;
color: #0ad;
}
@shramee
Copy link
Author

shramee commented Jun 23, 2017

HTML usage

<div class='loader'></div>
<h2>Loading</h2>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment