JSFiddle - React, Tailwind, and code Playground
by Craig Haywood
HTML
<div class='div_container'>
<div class='div_containing_arrow'>
<button class='div_button'> > </button>
<div>
<div>
CSS
.div_container{
width: 100%;
height: 100%;
}
.div_containing_arrow {
display:flex;
justify-content:center;
align-items:center;
}
.div_button {
font-size:1.5rem;
}
.div_containing_arrow::after {
content: '';
position: absolute;
width: 150px;
height: 150px;
border-radius:100%;
border: 5px solid white !important;
border-bottom: 5px solid blue !important;
animation: animateLoading 1.5s linear infinite;
}
@keyframes animateLoading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}