<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <ul>
            <li>
                <div class="clock">
                    <span class="hour"><span></span></span>
                    <span class="min"><span></span></span>
                    <span class="sec"><span></span></span>
                </div>
            </li>
            <li>
                <div class="Biground">
                    <div class="Miniround"><span></span></div>  
                </div>
            </li>
            <li>
                <div class="loading1">
                    <p>Loading</p>
                    <div class="bar"></div>
                </div>
            </li>
            <li>

                    <div class="loading2">
                            <p>Loading</p>
                            <div class="bar"></div>
                        </div>
            </li>
            <li>
                <div class="loading3">
                    <span class="lo1"></span>
                    <span class="lo2"></span>
                    <span class="lo3"></span>
                </div>
            </li>
            <li>
                    <div class="loading4">
                        <span class="lo1"></span>
                        <span class="lo2"></span>
                        <span class="lo3"></span>
                    </div></li>
            <li>
                <div class="box5">
                    
                    <div class="loading5">
                        <span class="lo1"></span>
                        <span class="lo2"></span>
                        <span class="lo3"></span>
                    </div>
                </div>
            </li>
            <li>
                <div class="box6">
                    <div class="top"></div>
                    <div class="center"></div>
                    <div class="bottom"></div>
                </div>


            </li>
            <li></li>
        </ul>
        
    </div>
    
</body>
</html>
@charset "utf-8";
#wrap ul{overflow: hidden;}
ul, li{list-style: none;}
#wrap ul li{float:left;width: 33.33%; height: 300px; box-sizing: border-box; padding: 50px;}

.clock{width: 100px; height: 100px; border: 1px solid #000; border-radius: 50%; position: relative;}
.clock .hour{width: 1px; height: 100px; position: absolute; top:0; left: 49px; 
    -webkit-animation: clockhour 4320s linear infinite;
    -moz-animation: clockhour 4320s linear infinite;
    -ms-animation: clockhour 4320s linear infinite;
    -o-animation: clockhour 4320s linear infinite;
    animation: clockhour 4320s linear infinite;}
.clock .hour span{position: absolute; top: 10px; width: 1px; height: 40px; border: 1px solid #ccc;;}
.clock .min{width: 1px; height: 100px; position: absolute; top:0; left: 50px; 
    -webkit-animation: clockhour 360s linear infinite;
    -moz-animation: clockhour 360s linear infinite;
    -ms-animation: clockhour 360s linear infinite;
    -o-animation: clockhour 360s linear infinite;
    animation: clockhour 360s linear infinite;}
.clock .min span{position: absolute; top: 3px; height: 47px; border-right:1px solid #ccc;}
.clock .sec {width: 1px; height: 100px; position: absolute; top:0; left: 49px; animation: clockhour 30s steps(100, start) infinite;}
.clock .sec span{width: 1px; position: absolute; top: 0; height: 50px; border-right:1px solid #ccc; 
}
@keyframes clockhour{
    from {
        -webkit-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
      }
      to {
        -webkit-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
      }
}

.Biground{width: 100px; height: 100px; position: relative; border: 3px solid #ccc; border-radius: 50%; }
.Miniround{width: 10px; height: 110px; position: absolute; top: -5px; left: 45px;animation: roundRotate 4s linear infinite; }
.Miniround span{position: absolute; top: 0; left: 0; width:10px; height: 10px; border-radius: 50%; background: #ccc; }
@keyframes roundRotate{
    0%{transform: rotateZ(0)}
    100%{transform: rotateZ(360deg)}
}

.loading1{width: 400px; height: 30px; border: 1px solid #ccc; position: relative; padding: 0;}
.loading1 p{text-align: center; line-height: 30px; padding: 0; margin: 0; }
.loading1 .bar{position: absolute; width: 400px; height: 30px; top:0; left:0; background: #ccc; animation: loading1 3s ease-out infinite;}
@keyframes loading1{
    0%{width: 0}
    100%{width: 400px}
}
.loading2{width: 400px; height: 30px; border: 1px solid #ccc; position: relative; padding: 0;}
.loading2 p{text-align: center; line-height: 30px; padding: 0; margin: 0; }
.loading2 .bar{position: absolute; width: 400px; height: 30px; top:0; left:0; background: #ccc; animation: loading2 5s steps(10, start) infinite;}
@keyframes loading2{
    0%{width: 0}
    100%{width: 400px}
}
.loading3{}
.loading3 span{display:inline-block; position: relative; width: 10px; height: 10px; border-radius: 50%; background: #000; margin: 0 10px;}
.loading3 span.lo1{animation: loading3a 1s linear infinite;}
.loading3 span.lo2{animation: loading3b 1s linear infinite; }
.loading3 span.lo3{animation: loading3c 1s linear infinite; }
@keyframes loading3a{
    0%{top: 0;}
    25%{top: -10px}
    50%{top:0;}
    75%{top:0;}
    100%{top: 0;}
}
@keyframes loading3b{
    0%{top: 0;}
    25%{top:0;}
    50%{top: -10px}
    75%{top: 0;}
    100%{top: 0;}
}
@keyframes loading3c{
    0%{top: 0;}
    25%{top:0;}
    50%{top: 0;}
    75%{top:-10px;}
    100%{top: 0;}
}

.loading4{}
.loading4 span{display:inline-block; position: relative; width: 10px; height: 10px; border-radius: 50%; background: #000; margin: 0 10px;}
.loading4 span.lo1{animation: loading4a 3s linear infinite;}
.loading4 span.lo2{animation: loading4b 3s linear infinite; }
.loading4 span.lo3{animation: loading4c 3s linear infinite; }
@keyframes loading4a{
    0%{background: #000;}
    25%{background: #ff0}
    50%{background: #000;}
    75%{background: #000;}
    100%{background: #000;}
}
@keyframes loading4b{
    0%{background: #000;}
    25%{background: #000;}
    50%{background: #ff0;}
    75%{background: #000;}
    100%{background: #000;}
}
@keyframes loading4c{
    0%{background: #000;}
    25%{background: #000;}
    50%{background: #000;}
    75%{background: #ff0;}
    100%{background: #000;}
}
.box5{width: 100%; height: 300px; position: relative;}
.loading5{position: absolute; top: 100px; left: 50px; width: 100px; animation: loading5 3s infinite; text-align: center;}
.loading5 span{display:inline-block; width: 10px; height: 10px; margin-right: 20px; border-radius: 50%; background: #000; }
.loading5 span.lo3{margin-right: 0;}
@keyframes loading5{
    0%{transform: rotateZ(0)}
    25%{transform: rotateZ(0)}
    50%{transform: rotateZ(90deg)}
    75%{transform: rotateZ(90deg)}
    100%{transform: rotateZ(180deg)}
}

.box6{width: 300px; height: 300px; position: relative; border-radius: 50%; border: 0px solid #ccc;margin: 0; padding: 0; animation: box6 3s linear infinite;}
.top{margin:0; padding:0;width: 150px; height: 150px; position: absolute; top: -32px; left: 75px; border:1px solid #000; border-radius: 100% 0% 0% 0%; transform: rotateZ(45deg)}
.bottom{width: 150px; height: 150px; position: absolute; bottom:-32px; left: 75px; border: 1px solid #000; border-radius: 0 0 100% 0; transform: rotateZ(45deg)}
.center{width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: 145px; left: 145px;}
@keyframes box6{
    0%{}
    100%{transform: rotateZ(360deg)}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.