/* Notes for /r/justtoreplythis<snip> This CSS has been written in SCSS for ease of use, click "View Compiled" above ^ */ $red: #C3141F; /*Just some colours to go with the template, CSS does not include this!*/ $white: #F7F7F7; $black: #080808; body { background-color:#323133; /*Ignore*/ .loader { position: absolute; /*Setting position of element according to the next parent element with position anything other then default*/ top:50%; /*50% down on the parent element*/ left:50%; /*50% right on the parent element*/ transform:translate(-50%,-50%); /*50% of element width (50px) left, 50% of element height (50px) up*/ width:100px; /*Element is 100px wide*/ height:100px; /*Element is 100px tall*/ animation: spin .6s linear infinite reverse; /* Animation is using the spin keyframes Animation is 0.8 seconds long Aniamtion tweening/easing is linear (no acceleration) The animation loops forever The animation goes the opposite way than defines */ .ball { position: absolute; /*Same deal with centering the element like with .loader, but the parent of .ball is .loader*/ top:50%; left:50%; transform:translate(-50%,-50%); height:100%; /*Height is 100% of the parent not 100% of the screen height (that's 100vh)*/ animation: spin 1s infinite ease-in-out; /* Animation is using the spin keyframes (in the way it is defines) Animation is 1 second long Animation loops forever Animation tweening/easing is ease-in-out, which has symetrical acceleration at the start as at the end */ &:after { /*Pseudo-class, there is also :before*/ position: absolute; /*Pseudoclasses for use as shapes need to be position absolute*/ content: ''; /*And content defined (Add some text into it)*/ background-color:$white; /*SCSS variable using the white from line 8*/ width:5px; /*Width 5 pixels*/ height:5px; /*Height 5 pixels*/ border-radius:100%; /*Corners will be rounded into an oval*/ top:0px; /*Put this element at the top of the parent*/ } /*Here I am using the selector `:nth-child(n)` to select certain elements*/ &:nth-child(1) { /*The first .ball in the parent*/ animation-delay:-0s; } &:nth-child(2) { animation-delay:-0.1s; /*Start the animation 0.1s before*/ } &:nth-child(3) { animation-delay:-0.2s; /*Start the animation 0.2s before*/ } &:nth-child(4) { animation-delay:-0.3s; } &:nth-child(5) { animation-delay:-0.4s; } &:nth-child(6) { animation-delay:-0.5s; } &:nth-child(7) { animation-delay:-0.6s; } &:nth-child(8) { animation-delay:-0.7s; } &:nth-child(9) { animation-delay:-0.8s; } &:nth-child(10) { animation-delay:-0.9s; /*I am a fan of negative delays*/ } } } } @keyframes spin { /*The keyframes for the animation `spin`*/ 0% { /*At 0% of the animation whatever elements have these keyframes set as an animation will have these properties*/ transform:translate(-50%,-50%) rotate(0deg); } /*The balls do not change colour because the animation is set to their parent and not themselves*/ 100% { transform:translate(-50%,-50%) rotate(360deg); } }

!