To show a spinner without an image you can use CSS animation. it is very simple to do. all you have to do is use the following CSS code:

This is the CSS Style Code:

@-webkit-keyframes spinner { 0% {  -webkit-transform:rotate(0deg);  -moz-transform:rotate(0deg);  -ms-transform:rotate(0deg);  -o-transform:rotate(0deg);  transform:rotate(0deg); } 100% {  -webkit-transform:rotate(360deg);  -moz-transform:rotate(360deg);  -ms-transform:rotate(360deg);  -o-transform:rotate(360deg);  transform:rotate(360deg); }}
@-moz-keyframes spinner { 0% {  -webkit-transform:rotate(0deg);  -moz-transform:rotate(0deg);  -ms-transform:rotate(0deg);  -o-transform:rotate(0deg);  transform:rotate(0deg); } 100% {  -webkit-transform:rotate(360deg);  -moz-transform:rotate(360deg);  -ms-transform:rotate(360deg);  -o-transform:rotate(360deg);  transform:rotate(360deg); }}
@-o-keyframes spinner { 0% {  -webkit-transform:rotate(0deg);  -moz-transform:rotate(0deg);  -ms-transform:rotate(0deg);  -o-transform:rotate(0deg);  transform:rotate(0deg); } 100% {  -webkit-transform:rotate(360deg);  -moz-transform:rotate(360deg);  -ms-transform:rotate(360deg);  -o-transform:rotate(360deg);  transform:rotate(360deg); }}
@keyframes spinner { 0% {  -webkit-transform:rotate(0deg);  -moz-transform:rotate(0deg);  -ms-transform:rotate(0deg);  -o-transform:rotate(0deg);  transform:rotate(0deg); } 100% {  -webkit-transform:rotate(360deg);  -moz-transform:rotate(360deg);  -ms-transform:rotate(360deg);  -o-transform:rotate(360deg);  transform:rotate(360deg); }}
.spinner:not(:required) { -webkit-animation:spinner 1500ms infinite linear; -moz-animation:spinner 1500ms infinite linear; -ms-animation:spinner 1500ms infinite linear; -o-animation:spinner 1500ms infinite linear; animation:spinner 1500ms infinite linear; -webkit-border-radius:0.5em; -moz-border-radius:0.5em; -ms-border-radius:0.5em; -o-border-radius:0.5em; border-radius:0.5em; -webkit-box-shadow:rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0; -moz-box-shadow:rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0; box-shadow:rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0; display:inline-block; font-size:10px; width:1em; height:1em; margin:1.5em; overflow:hidden; text-indent:100%;}
.spinner:not(:required) {	-webkit-animation: spinner 1500ms infinite linear;	-moz-animation: spinner 1500ms infinite linear;	-ms-animation: spinner 1500ms infinite linear;	-o-animation: spinner 1500ms infinite linear;	animation: spinner 1500ms infinite linear;	-webkit-border-radius: 0.5em;	-moz-border-radius: 0.5em;	-ms-border-radius: 0.5em;	-o-border-radius: 0.5em;	border-radius: 0.5em;	-webkit-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;	-moz-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;	box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;	display: inline-block;	font-size: 10px;	width: 1em;	height: 1em;	margin: 1.5em;	overflow: hidden;	text-indent: 100%;}

Then you can use the CSS code in HTML:

<div class="spinner" ></div>

Demo:

That is all. Tested on Firefox, Chrome, IE11, Edge