HTML

<div class="pswp__preloader__icn">

  <div class="pswp__preloader__cut">

    <div class="pswp__preloader__donut"></div>

  </div>

</div>

CSS

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

}