Free Square Loader CSS

free-square-loader-css

HTML Snippet

<div class=”loader”>
<div class=”rect red”>
</div>
<div class=”rect blue”>
</div>
<div class=”rect orange”>
</div>
<div class=”rect green”>
</div>
</div>

CSS Snippet

.loader {
position: relative;
width: 40px;
height: 40px;
animation: loadrotate 4s linear infinite
}

.rect {
width: 20px;
height: 20px;
float: left;
animation: rotation 3s infinite
}

.red {
background: red
}

.blue {
background: blue
}

.orange {
background: orange
}

.green {
background: green
}

@keyframes loadrotate {
100% {
transform: rotate(360deg)
}
}

@keyframes rotation {
100% {
transform: rotate(360deg)
}
}

Preview CSS Square Loader

See the Pen Square Loader CSS – DesignersLib.com by DesignersLib (@designerslib) on CodePen.

Share on Facebook0Share on Google+0Tweet about this on Twitter0Pin on Pinterest0
More in HTML CSS, HTML CSS Snippets
css-responsive-timeline
10 CSS JS Timelines

CSS Timeline HTML, CSS Demo / Download   Pure CSS Simple Timeline HTML, CSS Demo / Download   CSS Simple...

Close