How to create loading image using CSS only

Posted by admin on Tue, 02/28/2017 - 06:04

This is an easy way to create a sexy loading throbber image without image using only CSS!
Wanna get something like this using only CSS?

Well that's easy!
Just add simple HTML with two DIVs

<div class="pswp__preloader__icn">
  <div class="pswp__preloader__cut">
    <div class="pswp__preloader__donut"></div>

Then a crazy sheet of CSS, but its not that complicated as it looks like. ;)

.pswp__preloader__icn {
  width: 24px;
  height: 24px;
  -webkit-animation: clockwise 500ms linear infinite;
  animation: clockwise 500ms linear infinite;
/* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee */
.pswp__preloader__cut {
  position: relative;
  width: 12px;
  height: 24px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
.pswp__preloader__donut {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 2px solid #000;
   border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
   -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
  animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
@-webkit-keyframes clockwise {
  0% { -webkit-transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg) }
@keyframes clockwise {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
@-webkit-keyframes donut-rotate {
  0% { -webkit-transform: rotate(0) }
  50% { -webkit-transform: rotate(-140deg) }
  100% { -webkit-transform: rotate(0) }
@keyframes donut-rotate {
  0% { transform: rotate(0) }
  50% { transform: rotate(-140deg) }
  100% { transform: rotate(0) }

Hey! Don't miss a new cool stuff!


Geordie (not verified)

If you're going to copy and paste code from an open-source project, it's generally polite to link to the original.

Six (not verified)

Agreed!! Literally copy and pasted, nothing wrong with that but.. What at least could of been done is to change those class names to something more more generic, so when a junior dev copy and pastes it in my app it's easier to understand what's happening


Sure, you're right - added the link!

Hugo (not verified)

Hey thanks for the post! Question, what's the .pswp__preloader__donut--fake class for?


Its not necessary at all - was just for testing purposes :)

aftab ali (not verified)

running in thirties or have crossed fifties, you need a buddy who can share your sentiments and can make you more joyful. parimatch

Add new comment