StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is my pure CSS3 implementation with no Javascript in which I combined <a href="http://cssload.net/" rel="nofollow noreferrer">CSSload</a> and <a href="http://codepen.io/janrubio/pen/DusIE" rel="nofollow noreferrer">Jan Rubio's codepen</a> techniques for minimal markup and no id selectors:</p> <p><strong><em>HTML:</em></strong></p> <pre><code><div class="loader"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </code></pre> <p><strong><em>CSS:</em></strong></p> <pre><code>.loader { position: relative; width: 64px; height: 64px; } .loader .circle { position: absolute; width: 61px; height: 61px; opacity: 0; -moz-transform: rotate(225deg); -moz-animation: orbit 7.15s infinite; -webkit-transform: rotate(225deg); -webkit-animation: orbit 7.15s infinite; -ms-transform: rotate(225deg); -ms-animation: orbit 7.15s infinite; -o-transform: rotate(225deg); -o-animation: orbit 7.15s infinite; transform: rotate(225deg); animation: orbit 7.15s infinite; } .loader .circle:after { content:''; position: absolute; width: 8px; height: 8px; background: #04C5DE; left: 0px; top: 0px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .loader .circle:nth-child(1) { -moz-animation-delay: 1.56s; -webkit-animation-delay: 1.56s; -ms-animation-delay: 1.56s; -o-animation-delay: 1.56s; animation-delay: 1.56s; } .loader .circle:nth-child(2) { -moz-animation-delay: 0.31s; -webkit-animation-delay: 0.31s; -ms-animation-delay: 0.31s; -o-animation-delay: 0.31s; animation-delay: 0.31s; } .loader .circle:nth-child(3) { -moz-animation-delay: 0.62s; -webkit-animation-delay: 0.62s; -ms-animation-delay: 0.62s; -o-animation-delay: 0.62s; animation-delay: 0.62s; } .loader .circle:nth-child(4) { -moz-animation-delay: 0.94s; -webkit-animation-delay: 0.94s; -ms-animation-delay: 0.94s; -o-animation-delay: 0.94s; animation-delay: 0.94s; } .loader .circle:nth-child(5) { -moz-animation-delay: 1.25s; -webkit-animation-delay: 1.25s; -ms-animation-delay: 1.25s; -o-animation-delay: 1.25s; animation-delay: 1.25s; } @-moz-keyframes orbit { 0% { opacity: 1; z-index: 99; -moz-transform: rotate(180deg); -moz-animation-timing-function: ease-out; } 7% { opacity: 1; -moz-transform: rotate(300deg); -moz-animation-timing-function: linear; -moz-origin: 0%; } 30% { opacity: 1; -moz-transform: rotate(410deg); -moz-animation-timing-function: ease-in-out; -moz-origin: 7%; } 39% { opacity: 1; -moz-transform: rotate(645deg); -moz-animation-timing-function: linear; -moz-origin: 30%; } 70% { opacity: 1; -moz-transform: rotate(770deg); -moz-animation-timing-function: ease-out; -moz-origin: 39%; } 75% { opacity: 1; -moz-transform: rotate(900deg); -moz-animation-timing-function: ease-out; -moz-origin: 70%; } 76% { opacity: 0; -moz-transform: rotate(900deg); } 100% { opacity: 0; -moz-transform: rotate(900deg); } } @-webkit-keyframes orbit { 0% { opacity: 1; z-index: 99; -webkit-transform: rotate(180deg); -webkit-animation-timing-function: ease-out; } 7% { opacity: 1; -webkit-transform: rotate(300deg); -webkit-animation-timing-function: linear; -webkit-origin: 0%; } 30% { opacity: 1; -webkit-transform: rotate(410deg); -webkit-animation-timing-function: ease-in-out; -webkit-origin: 7%; } 39% { opacity: 1; -webkit-transform: rotate(645deg); -webkit-animation-timing-function: linear; -webkit-origin: 30%; } 70% { opacity: 1; -webkit-transform: rotate(770deg); -webkit-animation-timing-function: ease-out; -webkit-origin: 39%; } 75% { opacity: 1; -webkit-transform: rotate(900deg); -webkit-animation-timing-function: ease-out; -webkit-origin: 70%; } 76% { opacity: 0; -webkit-transform: rotate(900deg); } 100% { opacity: 0; -webkit-transform: rotate(900deg); } } @-ms-keyframes orbit { 0% { opacity: 1; z-index: 99; -ms-transform: rotate(180deg); -ms-animation-timing-function: ease-out; } 7% { opacity: 1; -ms-transform: rotate(300deg); -ms-animation-timing-function: linear; -ms-origin: 0%; } 30% { opacity: 1; -ms-transform: rotate(410deg); -ms-animation-timing-function: ease-in-out; -ms-origin: 7%; } 39% { opacity: 1; -ms-transform: rotate(645deg); -ms-animation-timing-function: linear; -ms-origin: 30%; } 70% { opacity: 1; -ms-transform: rotate(770deg); -ms-animation-timing-function: ease-out; -ms-origin: 39%; } 75% { opacity: 1; -ms-transform: rotate(900deg); -ms-animation-timing-function: ease-out; -ms-origin: 70%; } 76% { opacity: 0; -ms-transform: rotate(900deg); } 100% { opacity: 0; -ms-transform: rotate(900deg); } } @-o-keyframes orbit { 0% { opacity: 1; z-index: 99; -o-transform: rotate(180deg); -o-animation-timing-function: ease-out; } 7% { opacity: 1; -o-transform: rotate(300deg); -o-animation-timing-function: linear; -o-origin: 0%; } 30% { opacity: 1; -o-transform: rotate(410deg); -o-animation-timing-function: ease-in-out; -o-origin: 7%; } 39% { opacity: 1; -o-transform: rotate(645deg); -o-animation-timing-function: linear; -o-origin: 30%; } 70% { opacity: 1; -o-transform: rotate(770deg); -o-animation-timing-function: ease-out; -o-origin: 39%; } 75% { opacity: 1; -o-transform: rotate(900deg); -o-animation-timing-function: ease-out; -o-origin: 70%; } 76% { opacity: 0; -o-transform: rotate(900deg); } 100% { opacity: 0; -o-transform: rotate(900deg); } } @keyframes orbit { 0% { opacity: 1; z-index: 99; transform: rotate(180deg); animation-timing-function: ease-out; } 7% { opacity: 1; transform: rotate(300deg); animation-timing-function: linear; origin: 0%; } 30% { opacity: 1; transform: rotate(410deg); animation-timing-function: ease-in-out; origin: 7%; } 39% { opacity: 1; transform: rotate(645deg); animation-timing-function: linear; origin: 30%; } 70% { opacity: 1; transform: rotate(770deg); animation-timing-function: ease-out; origin: 39%; } 75% { opacity: 1; transform: rotate(900deg); animation-timing-function: ease-out; origin: 70%; } 76% { opacity: 0; transform: rotate(900deg); } 100% { opacity: 0; transform: rotate(900deg); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload