<span class="fln__pr-text">Hello</span><a>World</a>
<div class="fln__circle-load"></div>
<div class="fln__circle-load blue"></div>
<style>
.fln__circle-load { // gold load with transparent background
border-color: #eac603 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.fln__circle-load.blue { // thicker + wider blue load with grey background
border-width: 0.36rem;
width: 4rem;
border-color: #2e96ff #ccc #ccc;
}
</style>
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%; /* https://stackoverflow.com/questions/59920538 */
}
body {
font-size: 1.8rem;
line-height: 1.369;
}
body * {
box-sizing: border-box;
}
.fln__circle-load {
width: 30px;
aspect-ratio: 1/1;
border-width: 0.27rem;
border-style: solid;
border-radius: 100%;
animation: fln__circle-load__spin 0.8s infinite linear;
}
.fln__pr-text {
padding-right: 0.45rem;
}
.fln__clear {
clear: both;
}
.fln__relative {
position: relative;
}
.fln__strong {
font-weight: 600;
}
@keyframes fln__circle-load__spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes fln__fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fln__fade-in-from-above {
0% {
opacity: 0;
transform: translateY(-9rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fln__fade-out-and-slide-up {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-9rem);
}
}
@keyframes fln__subtle-fade-in-from-above {
0% {
opacity: 0;
transform: translateY(-0.9rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fln__subtle-fade-out-and-slide-up {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-0.9rem);
}
}