magicianShiro/circle.html

## circle.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #loading {
            width: 100px;
            height: 100px;
            margin: 30px auto;
            position: relative;
        }

        .outer-shadow,
        .inner-shadow,
        #timer {
            z-index: 6;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

        .inner-shadow {
            top: 50%;
            left: 50%;
            width: 80px;
            height: 80px;
            margin-left: -40px;
            margin-top: -40px;
            background-color: #fff;
        }

        #timer {
            z-index: 1;
        }

        .hold {
            position: absolute;
            width: 100%;
            height: 100%;
            clip: rect(0px, 100px, 100px, 50px);
            border-radius: 100%;
            background-color: #fff;
        }

        .pie,
        .dot span {
            background-color: #f50;
        }

        .pie {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            clip: rect(0px, 50px, 100px, 0px);
        }

        #left .pie {
            z-index: 1;
            animation: left 4s linear both;
        }

        @keyframes left {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(180deg);
            }
        }

        #right {
            z-index: 3;
            transform: rotate(180deg);
        }

        #right .pie {
            animation: right 4s linear both;
            animation-delay: 4s;
        }

        @keyframes right {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(180deg);
            }
        }

        .dot {
            z-index: 2;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 50%;
            height: 10px;
            margin-top: -5px;
            animation: dot 8s linear both;
            transform-origin: 0% 50%;
        }

        .dot span {
            position: absolute;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 100%;
        }

        @keyframes dot {
            0% {
                transform: rotate(-90deg);
            }

            50% {
                transform: rotate(90deg);
                z-index: 4;
            }

            100% {
                transform: rotate(270deg);
                z-index: 4;
            }
        }
    </style>
</head>

<body>
    <div id='loading'>
        <!-- <div class='outer-shadow'></div> -->
        <div class='inner-shadow'></div>
        <div class='timer'>
            <div class='dot'>
                <span></span>
            </div>
            <div class='hold' id='left'>
                <div class='pie'></div>
            </div>
            <div class='hold' id='right'>
                <div class='pie'></div>
            </div>
        </div>
    </div>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	#loading {
	width: 100px;
	height: 100px;
	margin: 30px auto;
	position: relative;
	}

	.outer-shadow,
	.inner-shadow,
	#timer {
	z-index: 6;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	}

	.inner-shadow {
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin-left: -40px;
	margin-top: -40px;
	background-color: #fff;
	}

	#timer {
	z-index: 1;
	}

	.hold {
	position: absolute;
	width: 100%;
	height: 100%;
	clip: rect(0px, 100px, 100px, 50px);
	border-radius: 100%;
	background-color: #fff;
	}

	.pie,
	.dot span {
	background-color: #f50;
	}

	.pie {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	clip: rect(0px, 50px, 100px, 0px);
	}

	#left .pie {
	z-index: 1;
	animation: left 4s linear both;
	}

	@keyframes left {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(180deg);
	}
	}

	#right {
	z-index: 3;
	transform: rotate(180deg);
	}

	#right .pie {
	animation: right 4s linear both;
	animation-delay: 4s;
	}

	@keyframes right {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(180deg);
	}
	}

	.dot {
	z-index: 2;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 10px;
	margin-top: -5px;
	animation: dot 8s linear both;
	transform-origin: 0% 50%;
	}

	.dot span {
	position: absolute;
	right: 0;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	}

	@keyframes dot {
	0% {
	transform: rotate(-90deg);
	}

	50% {
	transform: rotate(90deg);
	z-index: 4;
	}

	100% {
	transform: rotate(270deg);
	z-index: 4;
	}
	}
	</style>
	</head>

	<body>
	<div id='loading'>
	<!-- <div class='outer-shadow'></div> -->
	<div class='inner-shadow'></div>
	<div class='timer'>
	<div class='dot'>
	<span></span>
	</div>
	<div class='hold' id='left'>
	<div class='pie'></div>
	</div>
	<div class='hold' id='right'>
	<div class='pie'></div>
	</div>
	</div>
	</div>

	</body>

	</html>