CSS 및 HTML을 사용하여 간단한 로더 작성

24579 단어 tutorial html webdev css

당신의 사이트가 완전히 불러오지 않았을 때, 애니메이션을 조금 재생하는 것이 가장 좋습니다.
그것은 사용자에게 "우리는 노력하고 있다."라고 알려준다.
우리는 만약 2초를 초과하면 너는 영원히 떠날 것이라는 것을 안다.
"폐하, 저희는 영광스럽게도 당신에게 세 개의 반짝이는 점을 제공합니다."
애니메이션은 주문과 같다.모닥불을 응시하는 것 같다.그것은 당신의 뇌에서 댕그랑 소리가 나는 열쇠를 쳐서 아기를 때렸다.몇몇 원시적인 물건들이 안에서 열렸고, 우리는 시간 밖의 한 곳으로 전송되었다.우리가 거기에 있을 때, 아무도 부하를 알아채지 못했다.

지도의

이 블로그에서, 나는 인터넷에서 본 각종 로드 프로그램을 다시 만들려고 시도했다.이렇게 하는 과정에서, 나는 그것들을 가능한 한 간단하게 하려고 했다. 이렇게 하면 그것들이 당신의 프로젝트에 쉽게 도입될 수 있고, 또는 이러한 생각으로 자신의 프로젝트를 만들 수 있다.

The code on Github

초보 쓰레기

HTML 파일 index.html 과 CSS 파일 index.css 이라는 파일 구조를 설정했습니다.HTML은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>loaders</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div id="example-1" class="loader"></div>

    <div id="example-2" class="loader">
        <div id="bar-1" class="bar"></div>
        <div id="bar-2" class="bar"></div>
        <div id="bar-3" class="bar"></div>
    </div>

    <div id="example-3" class="loader"></div>

    <div id="example-4" class="loader">
        <div id="ball-container-1" class="ball-container">
            <div id="ball-1" class="ball"></div>
        </div>
        <div id="ball-container-2" class="ball-container">
            <div id="ball-2" class="ball"></div>
        </div>
        <div id="ball-container-3" class="ball-container">
            <div id="ball-3" class="ball"></div>
        </div>
    </div>
  </body>
</html>

관련될 때, 나는 모든 예를 더욱 상세하게 설명할 것이다.
전체 레이아웃에 대해 Coolors.co, flexbox 및 margin 색상의 CSS 변수를 설정했습니다.

:root {
    --main-bg-color: #1A535C;
    --loader-bg-color: #FF6B6B;
    --loader-acc-color: #4ECDC4;
}

body{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--main-bg-color);
}

.loader{
    margin-top: 5em;
}

예제 1

예 1에는 다음과 같이 설정된 div HTML이 있습니다.

    <div id="example-1" class="loader"></div>

디자인: 같은 사이즈width와height 그리고border-radius: 50%;를 드리겠습니다.추가border를 통해 원이 생성된 것을 볼 수 있습니다.
나는 나의 중음 색깔border-top-color으로 디자인한다var(--loader-acc-color).그러면 경계 상자의 맨 위에 있는 초기 색상만 덮어씁니다border.
애니메이션: 이 애니메이션이 있는 요소가 0에서 360도로 회전하도록 설정했습니다@keyframes example-one.
나는 #example-1 원소에 animation 속성을 하나 주었다.속기법을 사용하여 저는 지속 시간2s, 교체 계수infinite, 명칭example-one로 설정합니다.

/* EXAMPLE 1 */
#example-1{
    width: 3em;
    height: 3em;

    border-radius: 50%;
    border: 0.75em solid var(--loader-bg-color);
    border-top-color: var(--loader-acc-color); /* overrides top color to stand out */

    animation: 2s infinite example-one;
}

@keyframes example-one{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}

예제 2

예를 들어 HTML은 다른 세 개의 div 컨테이너입니다.하나하나가 모두 술집이다.

    <div id="example-2" class="loader">
        <div id="bar-1" class="bar"></div>
        <div id="bar-2" class="bar"></div>
        <div id="bar-3" class="bar"></div>
    </div>

설계: #example-2 일부 width, height, flexbox 속성을 제시하여 철근을 그 중에서 가운데에 두었다.
각 항목에는 margin, width, 시작 height 이 있습니다.나는 그들에게 background-color 와 약간의 화려한 border 발음을 주었다.
애니메이션: example-two 애니메이션은 0%, 25%, 50%, 100%로 나뉜 네 가지 부분이 있다.
0%에서 height 는 2.5em 로 설정되어 각 철근의 초기 높이와 같다.0%에서 25%height로 증가했다.25%에서 50%로 축소하여 애니메이션이 다시 시작될 때까지 100%를 유지합니다.
나는 모든 조에 지속 시간5em, 교체 계수2.5em의 animation 속성을 부여하고 이름1.5s을 통해 infinite에 연결한다.
마지막으로 나는 시합을 틀리게 하기 위해 그들의 아이디 개별 술집을 잡았다.@keyframes의 지연은 example-two, bar-1의 지연은 0.25s이다.

/* EXAMPLE 2 */
#example-2{
    width: 5em;
    height: 5em;

    display: flex;
    justify-content: center;
    align-items: center;
}

.bar{
    margin: 0.2em;
    width: 0.75em;
    height: 2.5em;

    border: 0.1em solid var(--loader-bg-color);
    border-left: 0.1em solid var(--loader-acc-color);
    background-color: var(--loader-bg-color);

    animation: 1.5s infinite example-two;
}

#bar-2{animation-delay: 0.25s}
#bar-3{animation-delay: 0.5s}

@keyframes example-two{
    0% {height: 2.5em}
    25% {height: 5em}
    50% {height: 2.5em}
    100% {height: 2.5em}
}

예3

예시 3은 div입니다.

    <div id="example-3" class="loader"></div>

디자인: 나는 bar-2 하나0.5s와 #example-3 하나를 긴 사각형으로 만들었다.나는 그것width: 5em;과 약간의 화려한 것을 발음으로 주었다.
애니메이션: 나는 height: 1em; 속성을 다시 사용하지만, 이번에는 background-color 을 사용하여 div를 y축을 따라 0에서 180도로 뒤집습니다.그리고 나서 나는 그것을 360도로 돌려서 그것의 시작 위치로 돌아갔다.

/* EXAMPLE 3 */
#example-3{
    width: 5em;
    height: 1em;

    border: 0.3em solid var(--loader-bg-color);
    border-right: 0.3em solid var(--loader-acc-color);    
    background-color: var(--loader-bg-color);

    animation: 3s infinite example-three;
}

@keyframes example-three{
    from { transform: rotateY(0deg);}
    50% { transform: rotateY(180deg);}
    to { transform: rotateY(360deg);}
}

예 4

예시 4는 가장 복잡한 캐리어입니다. 컨테이너 div의 HTML이 있는데 그 중 세 개의 하위 div가 있습니다.모든 하위 대상도 하나의 div 용기 div입니다. 이 div의 형상은 공과 유사합니다.

    <div id="example-4" class="loader">
        <div id="ball-container-1" class="ball-container">
            <div id="ball-1" class="ball"></div>
        </div>
        <div id="ball-container-2" class="ball-container">
            <div id="ball-2" class="ball"></div>
        </div>
        <div id="ball-container-3" class="ball-container">
            <div id="ball-3" class="ball"></div>
        </div>
    </div>

디자인: 가장 바깥쪽 용기border는 transform 속성을 포함하고 마운트를 설치하는 데 사용됩니다.
각각rotateY()은 #example-4과 동일flexbox으로 정사각형으로 만들고 둘 사이에 공간을 둔다.
그런 다음 .ball-container 속성을 가져와 공을 중앙에 배치합니다.공이 커졌을 때, 나는 그것이 중심에 있기를 바란다.
각 width 은 0의 초기 값height 및 margin-right 을 가져옵니다.50%의 A.ball-container가 원형으로 변하고 Aflexbox가 이를 볼 수 있다.
애니메이션: 애니메이션은 .ball와 같은 논리를 따른다. 내가 모든 공을 조종하는 width과height를 제외한다.
0%에서 20%로, 그것들은 border-radiusxbackground-color에서 example-2xheight로 증가했다.나는 그것들의 사이즈를 20퍼센트에서 40퍼센트 사이로 유지했다.40%에서 90%로 축소widthx0, 90%에서 100%로 유지됩니다.
나는 모든 공을 지속 시간0, 교체 계수1.5em와 이름1.5em을 가진 애니메이션 속성으로 설정한다.
마지막으로, 나는 각 공의 ID에 따라 각 공을 잡아서 0 과 0 사이에 하나 1.2s 를 추가하도록 했다.이것은 애니메이션을 엇갈리게 할 것이다.

/* EXAMPLE 4 */
#example-4{
    display: flex;
    align-items: center;
    justify-content:center;
}

.ball-container{
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.8em;

    display: flex;
    align-items: center;
    justify-content:center;
}

.ball {
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--loader-bg-color);

    animation: 1.2s infinite example-four;
}

#ball-2{animation-delay: 0.1s;}
#ball-3{animation-delay: 0.2s;}

@keyframes example-four{
    0%  {
        width: 0;
        height: 0;
    }
    20% {
        width: 1.5em;
        height: 1.5em;
    }
    40%{
        width: 1.5em;
        height: 1.5em;
    }
    90%{ 
        width: 0;
        height: 0;
    }
    100%{ 
        width: 0;
        height: 0;
    }
}

결론

이 블로그를 읽어 주셔서 감사합니다.나는 네가 그중의 일부 유용함을 발견하기를 바란다.
적어도, 나는 나의 적재자가 너를 그 영원한 곳으로 데려갈 수 있기를 바란다. 그곳에서, 단 한 순간, 너는 우주의 균형을 느꼈고, 열반의 한 조각, 마음의 평온을 맛보았다.최고야, 제이슨.

Reference

이 문제에 관하여(CSS 및 HTML을 사용하여 간단한 로더 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cooljasonmelton/build-a-simple-loader-with-css-and-html-2ndn

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML5 캔버스 크기 조정 및 엘프 크기 조정

Daily Two Cents - 미묘한

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다