What You'll Be Creating Moving on from the previous tutorial , let's add some flourish to our build. Loading Icon We are going to delve into CSS3 Animations and create a simple spinning animation for our loading icon. We already have the markup we need on the page, so let's get straight into the CSS. div.loading { color: darken($grey, 20%); position: absolute; width: 100px; bottom: 15px; left: 50%; margin-left: -50px; img { vertical-align: middle; &.rotate { -webkit-animation-name: rotate; -ms-animation-name: rotate; animation-name: rotate; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -ms-animation-timing-function: linear; animation-timing-function: linear; } } } Place this code right after the portfolio-item block in our Sass file. To start with, here we are just setting up some styles for the loading div itself. We are absolutely positioning it and making sure it is centred by using a margin-left of -50px, which is half of the element's width. This is to make up for the fact CSS positions elements from the top left corner.
↧