2 years ago (2015-09-20 14:47:06)

XBox Clean Loading Style Canvas with Pure CSS3

5 0

Hello you, I just came up with codepen creator and done with this amazing loading style of XBox. Really good snippet but has a downfall, some browser dosn't support it, but mozilla and IE CSS properties do. You can simply check these codes by making a HTML file and using this in style tags.

Heres the Snippet:


.loader-xbox {

position: absolute;
left: calc(32.2%);

.loader-xbox, .loader-xbox:before, .loader-xbox:after {
position: absolute;
border: 1px solid transparent;
border-top: 3px solid hsl(202, 62%, 43%);
border-radius: 100%;
animation: rotate linear infinite;
content: '';

.loader-xbox {
height: 100px;
width: 100px;
animation-duration: 1.05s;

.loader-xbox:before {
height: 75px;
width: 75px;
top: 10px;
left: 10px;
animation-duration: 10s;

.loader-xbox:after {
height: 50px;
width: 50px;
top: 22px;
left: 22px;
animation-duration: 4s;

@keyframes rotate {
from {
transform: rotateZ(360deg);
to {
transform: rotateZ(0deg);


Using with HTML:

<div class="loader-xbox"></div>

Sign up or Sign in for free.
And start a new thread.
No Threads
More notes by Ghazi Khan