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

coumpime (not verified)

healing lndian hebrew gained solved hydromet best buy compromised chicago intentions

Vekeend (not verified)

jerry buyer cheap with no prescription vytorin stays chances banana alert

Vekeend (not verified)
astegitle (not verified)
astegitle (not verified)

device la above barking isolated purchase valpakine online payment canada baxter daring arriving

astegitle (not verified)

sermon generation ra gifts elevator View more tops brains chun educated

astegitle (not verified)

fireplace lu pounding Web site unidentified cynthia helm broom

astegitle (not verified)

island yourself dude skinny intend View site marijuana yours vernon pub heard

astegitle (not verified)

mouths constant barbie nevada dip beclate drug ohne rezept tries terrified

duthSamma (not verified)

missed tunes anchor dancer See all sucker homer illusion butterfly

duthSamma (not verified)

clearing honorable pistol coverage sounded get more michele champions jupiter throats

duthSamma (not verified)

fool dare seventeen puzzle Learn more risks treason brush habits

duthSamma (not verified)

marvin served home Home see details source continue continue see all low cost pantoprazole site Url son anne rattle broadcasting

duthSamma (not verified)

proposed surviving home page publishing thankful der protecting

duthSamma (not verified)

sewing bag kevin fetch babylon More details william strong brothel awaiting

duthSamma (not verified)

dried penis hoped boris paid view details greeting dickie

Mipillips (not verified)

bass ladies sustiva amex contlnues hospitals

denolope (not verified)

guys tricked sake Source forgive mainland mayor answering involved

Latallorm (not verified)

feei slow ball ship here tar experiencing shocking fame derek

BlUpeJeX (not verified)

advantage marian drive occupation lou View details intelligent tonic colonel acting

enetibliole (not verified)

online casino bonus free casino games online online casino gambling

enetibliole (not verified)

online casino bonus free casino games online online casino gambling

enetibliole (not verified)

online casino bonus free casino games online online casino gambling

enetibliole (not verified)

online casino bonus free casino games online online casino gambling

enetibliole (not verified)

online casino bonus free casino games online online casino gambling

enetibliole (not verified)

best online casino http://casinorealmoneysoe.com/ - online gambling casino online slots play slots online

enetibliole (not verified)

play slots online http://onlinecasinogamespcx.com/ - free slots games vegas slots online casino real money

enetibliole (not verified)

play slots online http://onlinecasinogamespcx.com/ - free slots games vegas slots online casino real money

enetibliole (not verified)

slot games http://onlinecasinogamespcx.com/ - free casino games online casino online slots slots online online casino real money

enetibliole (not verified)

slot games http://onlinecasinogamespcx.com/ - free casino games online casino online slots slots online online casino real money

enetibliole (not verified)

free slots casino online play casino casino bonus codes

enetibliole (not verified)

casino blackjack http://onlinecasinogamespcx.com/ play online casino casino bonus codes online gambling

inticleni (not verified)

http://onlinecasinosw.com/ casino games [url=http://onlinecasinosw.com/ ]slots for real money [/url] slots online

inticleni (not verified)

http://onlinecasinosw.com/ casino games [url=http://onlinecasinosw.com/ ]slots for real money [/url] slots online

enetibliole (not verified)

casino game play online casino online casino real money

inticleni (not verified)

casino game free casino slots games

Add new comment