/* Load up Google's Roboto web font. This isn't really necessary for anything. */ @import url(https://fonts.googleapis.com/css?family=Roboto); body { /* Flexbox! Flexbox is a way to organize content on a page without resorting to something like Bootstrap and its grid system. Using "display: flex;" makes the whole body a flexbox. Usually you do this with a div, but here I did it with the body. */ display: flex; /* By default flexbox aligns things horizontally, but by using "flex-direction: column;" you can align things vertically. Go ahead and remove the flex direction and see what it does. */ flex-direction: column; /* When no flex direction is set, "justify-content" aligns things horizontally. With "flex- direction" set to "column", it aligns them vertically. The opposite is true for "align-items". */ justify-content: center; align-items: center; /* Since I want all these things center justified and aligned, it needs to be center justified and align inside an element that is the full view height of the document, therefore I set the height to "100vh", which stands for 100% of the view height. */ height: 100vh; /* This is that off-white grey background color Google likes to use. */ background: #f2f2f2; } p { /* Setting a max-width instead of a width allows the paragraph element to be smaller, but not larger, than the specified size */ max-width: 500px; /* Margins so that when seen on a small screen or resized window there is a bit of margin around the text. When you specify for values for a margin, they go clockwise from the top. In this case, the top margin is 5em and the bottom margin is 0em, with the left and right margins being 1em. */ margin: 5em 1em 0em 1em; /* Common Google font stack. Since "Roboto" was imported earlier, it shouldn't need the fallbacks, but its good to have anyway. */ font-family: "Roboto", "Helvetica", "Arial", sans-serif; } .material-spinner { /* The height and width can be whatever you want, so long as you adjust the border radius to compensate. I added a "max-height" because for some reason the spinner was "squishing" when I resized the screen vertically. "max-height" fixed this. */ height: 50px; min-height: 50px; width: 50px; /* "border-radius" defines how much "curve" there is on the edge of a square element. If you give it enough curve, it makes the element appear to be circular. */ border-radius: 100px; /* So there's a five pixel transparent solid border around a 50px square box, which has edges curved so much that it looks circular... */ border: 5px transparent solid; /* ... with one side, the top border, given a color. This creates the quarter-circle curve. */ border-top: 5px #3F51B5 solid; /* "animation" specifies an animation to use on the element, including how long the animation should take, how many times it should play, and even whether or not it should ease into the different steps of the animation. By default the animation eases, which is what we want for our Google-esque spinner, so we don't need to set that. The "material-spinner" part is the name of the animation that we want to use. We could've called it "funky-bunny" or anything else so long as we use the same name when specifying the keyframes. */ animation: material-spinner 4s infinite; } @keyframes material-spinner { /* "material-spinner" is the name of the animation. Each percentage represents an individual step in the animation. The transform rotation needs to increase from 0 throughout. If you did "rotate(0deg)" then "rotate(180deg)" and then "rotate(0deg)" back again, instead of continously spinning right, it would spin right, then left, then right.*/ 0% { transform: rotate(0deg); border-top: 5px #3F51B5 solid; } 25% { transform: rotate(360deg); border-top: 5px #F44336 solid; } 50% { transform: rotate(720deg); border-top: 5px #FFC107 solid; } 75% { transform: rotate(1080deg); border-top: 5px #4CAF50 solid; } 100% { transform: rotate(1440deg); border-top: 5px #3F51B5 solid; } }

!