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>
  </div>
</div>

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

.pswp__preloader__icn {
  opacity:0.75;
  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 https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
.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;
  margin:0;
   -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) }
}
Tags: 
×

Hey! Don't miss a new cool stuff!

Comments

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.

https://github.com/dimsemenov/PhotoSwipe

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

admin

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?

admin

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

asd (not verified)

Great article with excellent idea!Thank you for such a valuable article. karamba I really appreciate for this great information..

aftab ali (not verified)

Keep in mind that you will need the club layout you pick to look proficient and all around outlined. hopa

asd (not verified)

This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. Thank you. iq option

emily seo (not verified)

that they would not ordinarily have the capacity to acquire. storspelare bonus

aftabak (not verified)

To wind up a football lay wagering champ isn't as troublesome as you may think at first look. 1xbet

aftabak (not verified)

Because of the quick paced nature of virtual games, individuals can bet on various matches in a single sitting. nightrush

Anonymous (not verified)

The creation of the images and their uploading is considered for the comfort of the people. The account of the brick and write my assignment australia in order to promote all the instruments for the future times. The electronic way is mentioned for the man.

Add new comment