[CSS] Loading bar - 에이블런 프론트엔드부트캠프 5일차

1. Loading bar 1

지금까지 배운 것을 활용해 원형 로딩바를 만들었다. 위치는 position을 활용해 설정했고, 로딩바가 돌아가는 것은 transform과 transition을 활용해 개발했다.

.box1 {
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

.box1 .loading {
    width: 80px;
    height: 80px;
    border-radius: 50px;
    border: 3px solid black;
    margin: 110px auto;
    position: relative;
    transition: transform 100s linear 0s;
    box-sizing: border-box;
}

.box1 .loading::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 3px solid black;
    background-color: black;

    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box1:hover .loading {
    transform: rotate(-9999deg);
}

 

 

2. Loading bar 2

가로형 로딩바는 before와 after를 활용해 가상으로 사각형을 만든 후 마우스를 올리면 width 값이 점점 올라가게 개발하여 로딩바를 만들었다. 

.box2 {
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.box2 .loading2 {
    width: 150px;height: 20px;background-color: rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    margin-top: calc((300px - 20px) / 2);
    position: relative;
}
.box2 .loading2::before {
    content: "";
    display: block;
    width: 0%;
    height: 100%;
    background-color: black;
    transition: all 1s;
}
.box2:hover .loading2::before {
    content: "";

    display: block;
    width: 100%;
    height: 100%;
    background-color: black;
    transition: all 1s;
}

.box2:hover .loading2::after {
    content: "LOADING . . .";
    color: white;
    font: 12px/20px arial;
    width: 100%;
    height: 20px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    transition: all 1s;
}