.site_file { margin: 0.5em 0; } .sf_regular { padding: 1em; background-color: #F0F0F0; display: inline-block; } .sf_failed { color: orangered; opacity: 0.5; } .sf_failed:hover { opacity: 1; } .loading_bubble { width: 20px; height: 20px; display: block; float: left; position: relative; } .loading_bubble > span { width: 0.25em; height: 0.25em; position: absolute; background-color: royalblue; animation: p1 1s infinite; animation-timing-function: linear; /* Safari and Chrome */ -webkit-animation: p1 1s infinite; -webkit-animation-timing-function:linear; } .loading_bubble > span:nth-child(1) { top: 2.5px; left: 2.5px; } .loading_bubble > span:nth-child(2) { top: 2.5px; left: 12.5px; animation-delay: 250ms; -webkit-animation-delay: 250ms; } .loading_bubble > span:nth-child(4) { top: 12.5px; left: 12.5px; animation-delay: 500ms; -webkit-animation-delay: 500ms; } .loading_bubble > span:nth-child(3) { top: 12.5px; left: 2.5px; animation-delay: 750ms; -webkit-animation-delay: 750ms; } @keyframes p1 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes p1 /* Safari and Chrome */ { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }