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

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 :)

StevVise (not verified)

isotretinoin order internet no physician approval http://cheapcialisir.com - Cialis Thyroxine 175 Mcg No Prescription Cialis Priligy Generico Prezzo

MatBole (not verified)

Acheter Viagra MontrСЂВ al http://abcialisnews.com - Cialis Compra Cialis Andorra Cialis Viagra 25mg Filmtabletten 4 Stuck

MatBole (not verified)

Acheter Viagra MontrСЂВ al http://abcialisnews.com - Cialis Compra Cialis Andorra Cialis Viagra 25mg Filmtabletten 4 Stuck

Stephex (not verified)

Keflex And Acne Buy Cialis Vigara From India Buy Cialis Viagra From Canada Legitimate

Stephex (not verified)

Cialis Sottobanco online cialis Comparativa Precio Viagra Generico cialis 40 mg Acheter Baclofene Belgique

Stephex (not verified)

Propecia Low Price 1 Mg Buy Cialis Levitra Bei Erkaltung Buy Cialis Propecia De 5mg

JanGediava (not verified)

Priligy Sans Ordonance Cialis Sinus Pain Amoxicillin buy cialis online without a prescription Viagra Pour Femme Avis

JanGediava (not verified)

Viagra Kaufen Shop Cialis Can You Get High On Keflex Cialis Buy Generic Cialis Online Canada

Add new comment