Tags:
26 | 0 | 0
.ajax-loader { position: absolute; top: 25%; left: 50%; transform-origin: 50% 50%; transform: rotate(90deg) translate(-50%, 0%); font-size: 50px; width: 1em; height: 3em; color: #d31145; } .ajax-loader .paw { width: 1em; height: 1em; -webkit-animation: 2050ms pawAnimation ease-in-out infinite; animation: 2050ms pawAnimation ease-in-out infinite; opacity: 0; } .ajax-loader .paw svg { width: 100%; height: 100%; } .ajax-loader .paw .icon { fill: currentColor; } .ajax-loader .paw:nth-child(odd) { transform: rotate(-10deg); } .ajax-loader .paw:nth-child(even) { transform: rotate(10deg) translate(125%, 0); } .ajax-loader .paw:nth-child(1) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } .ajax-loader .paw:nth-child(2) { -webkit-animation-delay: 1s; animation-delay: 1s; } .ajax-loader .paw:nth-child(3) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } .ajax-loader .paw:nth-child(4) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .ajax-loader .paw:nth-child(5) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .ajax-loader .paw:nth-child(6) { -webkit-animation-delay: 0s; animation-delay: 0s; } .no-cssanimations .ajax-loader .paw { opacity: 1; } @-webkit-keyframes pawAnimation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @keyframes pawAnimation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
Latest Comments section by users