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

Source: https://github.com/dimsemenov/PhotoSwipe

Tags: 
css
×

Hey! Don't miss a new cool stuff!

Comments

03/02/2017 - 12:12
Hugo (not verified)

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

03/06/2017 - 10:53
admin

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

04/19/2020 - 22:21
enetibliole (not verified)

online casino bonus free casino games online online casino gambling

04/19/2020 - 22:26
enetibliole (not verified)

online casino bonus free casino games online online casino gambling

04/19/2020 - 22:30
enetibliole (not verified)

online casino bonus free casino games online online casino gambling

04/19/2020 - 22:32
enetibliole (not verified)

online casino bonus free casino games online online casino gambling

04/19/2020 - 22:38
enetibliole (not verified)

online casino bonus free casino games online online casino gambling

04/22/2020 - 14:40
enetibliole (not verified)

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

04/24/2020 - 02:51
enetibliole (not verified)

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

04/24/2020 - 02:52
enetibliole (not verified)

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

04/24/2020 - 09:06
enetibliole (not verified)

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

04/24/2020 - 09:08
enetibliole (not verified)

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

04/24/2020 - 15:53
enetibliole (not verified)

free slots casino online play casino casino bonus codes

04/24/2020 - 23:07
enetibliole (not verified)

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

04/25/2020 - 00:17
inticleni (not verified)

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

04/25/2020 - 00:19
inticleni (not verified)

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

04/25/2020 - 05:29
enetibliole (not verified)

casino game play online casino online casino real money

04/25/2020 - 06:31
inticleni (not verified)

casino game free casino slots games

04/25/2020 - 06:44
inticleni (not verified)

casino game free casino slots games

04/25/2020 - 06:48
inticleni (not verified)

casino game free casino slots games

04/25/2020 - 13:06
enetibliole (not verified)

vegas casino slots casino slots no deposit casino

04/25/2020 - 13:54
inticleni (not verified)

casino blackjack best online casino real casino slots

04/25/2020 - 19:51
enetibliole (not verified)

no deposit casino online casino free slots

04/25/2020 - 20:18
inticleni (not verified)

http://onlinecasinosw.com/ cashman casino slots http://onlinecasinosw.com/ - slots free online casinos

04/25/2020 - 20:30
Qvcbya x (not verified)

Poncmo iftvka cost of generic viagra

04/26/2020 - 02:27
enetibliole (not verified)

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

04/26/2020 - 02:32
enetibliole (not verified)

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

04/26/2020 - 02:41
inticleni (not verified)

casino blackjack big fish casino online slot games

04/26/2020 - 02:47
enetibliole (not verified)

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

04/26/2020 - 02:49
enetibliole (not verified)

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

04/26/2020 - 09:29
enetibliole (not verified)

free casino games online online casino slots casino play

04/26/2020 - 09:31
inticleni (not verified)

http://onlinecasinosw.com/ online casinos best online casino free slots casino bonus codes

04/26/2020 - 09:34
inticleni (not verified)

http://onlinecasinosw.com/ online casinos best online casino free slots casino bonus codes

04/26/2020 - 09:36
enetibliole (not verified)

free casino games online online casino slots casino play

04/26/2020 - 09:41
enetibliole (not verified)

free casino games online online casino slots casino play

04/26/2020 - 09:49
enetibliole (not verified)

free casino games online online casino slots casino play

04/26/2020 - 16:38
inticleni (not verified)

casino game http://onlinecasinosw.com/ - play slots online online slot games free slots

04/26/2020 - 16:40
inticleni (not verified)

casino game http://onlinecasinosw.com/ - play slots online online slot games free slots

04/26/2020 - 16:50
enetibliole (not verified)

cashman casino slots http://onlinecasinogamespcx.com/ online casino real money casino play slot games

04/26/2020 - 17:00
enetibliole (not verified)

cashman casino slots http://onlinecasinogamespcx.com/ online casino real money casino play slot games

04/26/2020 - 17:03
enetibliole (not verified)

cashman casino slots http://onlinecasinogamespcx.com/ online casino real money casino play slot games

04/26/2020 - 17:07
enetibliole (not verified)

cashman casino slots http://onlinecasinogamespcx.com/ online casino real money casino play slot games

04/26/2020 - 17:11
enetibliole (not verified)

cashman casino slots http://onlinecasinogamespcx.com/ online casino real money casino play slot games

04/26/2020 - 23:40
inticleni (not verified)

online gambling online slots online casino slots free

04/26/2020 - 23:43
inticleni (not verified)

online gambling online slots online casino slots free

04/27/2020 - 07:37
inticleni (not verified)

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

04/27/2020 - 08:22
enetibliole (not verified)

casino real money vegas slots online free online slots

04/27/2020 - 08:26
enetibliole (not verified)

casino real money vegas slots online free online slots

04/27/2020 - 08:32
enetibliole (not verified)

casino real money vegas slots online free online slots

04/27/2020 - 08:35
enetibliole (not verified)

casino real money vegas slots online free online slots