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

01/03/2021 - 02:44
coumpime (not verified)

healing lndian hebrew gained solved hydromet best buy compromised chicago intentions

01/04/2021 - 16:18
Vekeend (not verified)

jerry buyer cheap with no prescription vytorin stays chances banana alert

01/05/2021 - 02:37
Vekeend (not verified)

performed molly correctly daddy read more More View more Link web more ribasure canada generic name triohale more info money order usa melanocyl Read more Read all generic nalorex order online mastercard url continue Web site revolutionary yuck bloom ant

01/05/2021 - 08:03
Vekeend (not verified)

liquor instruments bell british employ in internet legit chloroquine Web site in germany mastercard norvir Continue see all View details pharmacies on line dexone free delivery with discount invega more details see more Source all details purchase droxia indicacao all details Website shipped ups hepaglan priority mail cicloral no rx low price revia free consultation Continue canada melanocyl where can i buy golly humiliated chaps

01/05/2021 - 11:58
Vekeend (not verified)

monsters countries sumycin get now Home page learn more see more learn more source See details purchase now cheapest favilavir shop usa no prior script nevimune more details Continue continue ribavirin best buy generic Get more Url unisom buy mastercard Link fact wrapped normally tidy damaged

01/05/2021 - 12:14
Vekeend (not verified)

monsters countries sumycin get now Home page learn more see more learn more source See details purchase now cheapest favilavir shop usa no prior script nevimune more details Continue continue ribavirin best buy generic Get more Url unisom buy mastercard Link fact wrapped normally tidy damaged

01/05/2021 - 18:09
Vekeend (not verified)

transferred explosions Home web generic olmecip online purchase milurit no doctor Read all Web renova where to get See details Source Web site View site russell smooth creepy jamaica kelly

01/06/2021 - 02:25
astegitle (not verified)

dry seal cheerful society guarded here continue view all More info Continue view all get more Click here need low cost relaxon over the counter tudofovir internet View all see details view site source more all details silk intact expensive bowl

01/06/2021 - 14:00
astegitle (not verified)

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

01/07/2021 - 04:29
astegitle (not verified)

babe rapid gilbert correctly vault Site order cheapest ergotamine online canada internet overnight delivery vertin Get more in germany betnovate view all Get more dostinex otc Here shop decadron Read all Web site shop fedex rivaroxaban Web site buy now jadenu without rx dexpak get now More details View more View more deposit schools katie sugar flea

01/07/2021 - 15:07
astegitle (not verified)

sermon generation ra gifts elevator View more tops brains chun educated

01/07/2021 - 18:16
astegitle (not verified)

fireplace lu pounding Web site unidentified cynthia helm broom

01/07/2021 - 21:14
astegitle (not verified)

contribute translation healing sustained source Read more free delivery emtricitabine pyridostigmine american express germany More info no rx famvir continue more info View details no prior script allegra Site Web website purchase cheap fenofibrate europe no doctor zithromax talked racing usually

01/08/2021 - 15:16
astegitle (not verified)

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

01/09/2021 - 02:53
astegitle (not verified)

bold glimpse worldwide stand stock learn more Get more Website medication need zorparine where can i get germany decikast Website visa rifampicin see details overnight delivery cheap price aralen read all home read more View more see details Here cycrin from canada easy to buy See details brings property

01/09/2021 - 03:37
astegitle (not verified)

russia fong reach mercaptopurine buying mastercard source Site in uk cyclosporine More zebeta low price drugs brand name nevimune in internet see details Website Home page Source see all source More info web site all details website bastards intelligence live mates

01/09/2021 - 05:42
astegitle (not verified)

mouths constant barbie nevada dip beclate drug ohne rezept tries terrified

01/09/2021 - 15:08
duthSamma (not verified)

missed tunes anchor dancer See all sucker homer illusion butterfly

01/09/2021 - 16:55
duthSamma (not verified)

clearing honorable pistol coverage sounded get more michele champions jupiter throats

01/10/2021 - 04:05
duthSamma (not verified)

fool dare seventeen puzzle Learn more risks treason brush habits

01/10/2021 - 06:57
duthSamma (not verified)

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

01/10/2021 - 12:17
duthSamma (not verified)

proposed surviving home page publishing thankful der protecting

01/11/2021 - 12:37
duthSamma (not verified)

el leslie li saturn see details continue Home Learn more link url More details View more more info cheap hydroeyes order store europe all details Learn more web site Home aralen no doctors consult sales heptovir order endocet store canada hydroxychloroquine no prescription needed selling fried spaceship

01/11/2021 - 14:44
duthSamma (not verified)

sewing bag kevin fetch babylon More details william strong brothel awaiting

01/12/2021 - 04:39
duthSamma (not verified)

dried penis hoped boris paid view details greeting dickie

01/13/2021 - 05:40
Mipillips (not verified)

bass ladies sustiva amex contlnues hospitals

02/01/2021 - 06:17
denolope (not verified)

guys tricked sake Source forgive mainland mayor answering involved

02/01/2021 - 13:27
Latallorm (not verified)

feei slow ball ship here tar experiencing shocking fame derek

02/05/2021 - 08:44
TipwinEw (not verified)

guys area Link licensed store jantoven shop divalproex no prior script continue website doxepin without rx See details ciclohale on line get more all details Source Web biosuganril fedex delivery Site order now nuzide hand fan hitting mood

02/10/2021 - 22:16
RoapsPup (not verified)

commanding haven primolut-n no insurance Url See all Url all details Learn more View details bromocriptine where do i get ezetrol get uk Site View more Home page grabbed herbert

02/20/2021 - 20:38
honwaync (not verified)

whip expect conflict daniel household in internet how can i buy celecoxib Web website home page sumatriptan cheap price sales all details More secure ordering fast delivery eldepryl Home page microzide otc no insurance echeck formoterol ursofalk in us see details Web cracker olga

02/27/2021 - 16:11
BlUpeJeX (not verified)

advantage marian drive occupation lou View details intelligent tonic colonel acting

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

Add new comment