JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<!-- Say the red circle is the final image. The circle progress is a white circle which loads and the final color is transparent -->
<div class="circle_wrapper">
    <div class="circle_red"></div>
    <div class="mask_left"></div>
    <div class="mask_right"></div>
</div>

CSS

body {
    padding-top: 100px;
    text-align: center;
    background-color:white;
}
.circle_wrapper {
    position: relative;
    width:200px;
    height:200px;
}
.circle_red{ 
    background-color:red; 
    border-radius:50%;
    width:200px;
    height:200px;
}

/* Masks */
.circle_wrapper > div[class^='mask'] {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
}
.mask_left {
    left: 0;
    right: 50%;
}
.mask_right {
    left: 50%;
    right: 0;
}

/* Pseudo elements in masks */
.circle_wrapper > div[class^='mask']::before {
    background-color: #fff;
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.mask_left::before {
    animation: leftHalf 2s 0s 1 linear forwards;
    transform-origin: 100% 50%; /* center right */
}
.mask_right::before {
    animation: rightHalf 2s 0s 1 linear forwards;
    transform-origin: 0% 50%; /* center left */
}


@keyframes leftHalf {
    0%  { transform: rotate(0deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}
@keyframes rightHalf {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(180deg); }
}