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