6

Simple CSS Loading Spinner

 1 year ago
source link: https://cwestblog.com/2022/06/27/simple-css-loading-spinner/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Simple CSS Loading Spinner

Published by Chris West on June 27, 2022

I recently wanted to create my own simple loading spinner with just HTML and CSS. Here is the code that I came up with:

<div class="wrapper" style="font-size: 1em;">
<div>Loading…</div>
<div class="loading-spinner md" style="background-color: #FFF;"></div>
</div>
.loading-spinner.xs {
font-size: 1em;
}
.loading-spinner.sm {
font-size: 2em;
}
.loading-spinner.md {
font-size: 4em;
}
.loading-spinner.lg {
font-size: 8em;
}
.loading-spinner.xl {
font-size: 16em;
}
.loading-spinner {
--color1: red;
--color2: green;
--color3: blue;
box-shadow: inset -0.25em -0.25em 0.5em -0.25em var(--color3), 0 0 0.03em 0.015em white, 0 0 0.075em 0.0375em black;
margin: 0.1em;
filter: contrast(5);
}
.loading-spinner,
.loading-spinner:after,
.loading-spinner:before{
--duration: 3s;
width: 1em;
height: 1em;
border-radius: 0.5em;
position: relative;
animation: loading-spinner var(--duration) infinite linear;
transform: translateZ(0);
display: inline-block;
overflow: hidden;
}
.loading-spinner:after,
.loading-spinner:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.loading-spinner:before {
animation-duration: var(--duration);
box-shadow: inset -0.25em -0.25em 0.5em -0.25em var(--color1);
}
.loading-spinner:after {
animation-duration: calc(2 * var(--duration));
box-shadow: inset -0.25em -0.25em 0.5em -0.25em var(--color2);
}
@keyframes loading-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

See It In Action

Below is what it looks like in action. I added a few inputs so that you can play around with the CSS yourself:

Loading…

Font Size:


Spinner Size:


Spinner Speed:


Spinner Color #1:


Spinner Color #2:


Spinner Color #3:

Final Thoughts

I feel like there are a lot of ways to improve on the look but the simplicity of the CSS code pretty nice. Now that we don’t have to worry about supporting IE we can keep moving onward into the future. Feel free to use this in your projects and as always, happy coding!!! 😎

Categories: Blog

Leave a Reply Cancel reply

placeholder.jpg
Name *
Email *
Website

Save my name, email, and website in this browser for the next time I comment.

 ×  8  = 

What's on your mind?

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK