Ways to modify the text color in a CSS animation without using any external libraries?

Question

Ways to modify the text color in a CSS animation without using any external libraries?

When using this pure CSS loading animation, the fore color is set to white which may not be visible on a white background. How can the fore-color be changed?

.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>

css

Answer 1

Answer №1

To achieve the desired effect, simply assign a background-color to :before.

Take a look at this 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>

Answer 2

To achieve the desired effect, simply assign a background-color to :before.

Take a look at this 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>

Answer 3

Answer №2

This unique animation showcases the use of borders to create an intriguing shape. By adjusting the values in the code, you can easily change the color scheme:

border: 32px solid #f00;
border-color: #f00 transparent #f00 transparent;

To modify the color of the text "loading.." simply include this line color: #fff within your styling for lds-hourglass.

.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 4

This unique animation showcases the use of borders to create an intriguing shape. By adjusting the values in the code, you can easily change the color scheme:

border: 32px solid #f00;
border-color: #f00 transparent #f00 transparent;

To modify the color of the text "loading.." simply include this line color: #fff within your styling for lds-hourglass.

.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 5

Answer №3

Consider substituting

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 6

Consider substituting

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>

Ways to modify the text color in a CSS animation without using any external libraries?

Answer №1

Answer №2

Answer №3

Similar questions

I prefer children to have their own unique style, instead of inheriting their parent's CSS

Changing the class of a div in JavaScript from one class to another

Is there a way to increase the size of the icon without altering the dimensions of the button?

Utilizing CSS to set a map as the background or projecting an equirectangular map in the backdrop

<Select> Placeholder customization

What is the most effective way to utilize bootstrap classes and their associated functions exclusively for mobile devices by using media queries?

Adjust the properties within the component's styles using Angular 2

Utilizing Multiple Select Options and CSS Float Styling in Mozilla Firefox

Issue with Angular 6: Animation with LESS is failing to work post deployment

Troubleshooting CSS Carousel Navigation Problems

Ways to enlarge the parent container and reveal a concealed child element upon hovering without impacting neighboring containers

Steps for positioning a RadioButtonList at the center of a table cell

Include the circle.css file in the Angular 4 project by loading it in the head section of the

What is the best way to horizontally align a div within a parent div?

CSS - Apply a captivating background to specific columns within a grid layout

Changing the position of the icon in the bootstrap validator

Getting rid of a particular jQuery animation

What is the best way to apply styling to an image that is contained within the document.write function?

Sorry, but we are experiencing difficulties processing your request at the moment. HTTP ERROR 500: We are unable to locate the

Strategies for Connecting CSS, JavaScript, and Image Files in Django