How to change the fore color of pure css animation?

Question

In the following pure CSS loading, the fore color is white so it doesn't show anything on the white screen. How to change the fore-color?

.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
  background-color: black;
}

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

<div class="lds-hourglass">Loading....</div>

Answer 1

Try replacing border-color: #fff transparent #fff transparent; with border-color: #fff black #fff black;

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;
    background-color: white;
}

    .lds-hourglass:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 8px;
        box-sizing: border-box;
        border: 32px solid #fff;
        border-color: #fff black #fff black;
        animation: lds-hourglass 1.2s infinite;
    }

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

<div class="lds-hourglass">Loading....</div>

Answer 2

This animation uses borders to generate this shape, change these values to change color :

1. border: 32px solid #f00;

2. border-color: #f00 transparent #f00 transparent;

and to change the text loading.. color, just add this line color: #fff to your lds-hourglass style.

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;
    background-color: #fff;
    color: #f00;
}

    .lds-hourglass:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 8px;
        box-sizing: border-box;
        border: 32px solid #f00;
        border-color: #f00 transparent #f00 transparent;
        animation: lds-hourglass 1.2s infinite;
    }

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

<div class="lds-hourglass">Loading....</div>

Answer 3

Just need to set background-color to :before.

see Snippet:

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;

}

    .lds-hourglass:after {
        content: " ";
        background-color:black;
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 8px;
        box-sizing: border-box;
        border: 32px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-hourglass 1.2s infinite;
    }

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

<div class="lds-hourglass">
Loading....
</div>