개요

자바스크립트를 사용하지 않고 복사하면 됩니다. html+css만 설치하는 로딩 그룹?
있다

투고하고 싶은 계기.

그는 업무적으로 점차적으로 로딩 이미지로 변하고 싶다고 말했다
물론 IE에 대응하기 때문에 Filter와mask-image를 사용할 수 없습니다
HTML+css로만 15분 정도 제출하면 "생각해보면 확실해!!! 그렇게 생각하지만 그럴 생각은 없어요"
전 세계 한 사람에게도 도움이 되고 싶어서 보도를 했습니다.
설치 방법이 정말 간단하기 때문에 코드의 내용보다 생각이 더 중요할 수 있다
코드를 원하는 사람도 있을 것 같아서 코드부터 꺼내.
그 아래에도 해설을 넣다.

로드 구현

loading

<div class="loading"></div>

loading

@keyframes spin {
  from{
    transform: rotateZ(0deg);         /* アニメーション開始状態 */
  }
  to{
    transform: rotateZ(360deg);       /* アニメーション終了状態 */
  }
}

.loading {
  position: absolute;                 /* 良くわからなければ無くてもよい */
  width: 50px;                        /* 横幅 */
  height: 50px;                       /*  高さ */
  border: 10px solid #dddddd;         /* 線(上下左右)の太さ,形,色 */
  border-top-color: #aaaaaa;          /* 線(上)の色 */
  border-radius: 50%;                 /* 円形 */
  animation: 1s spin infinite linear; /* アニメーション指定(1秒1回転で一定の速度で永遠回るように指定) */
}

태그 요소의 표시 속성을 수정합니다.
각 속성에 대해 먼저 댓글을 달았기 때문에 앞으로는 이런 사람을 볼 필요가 없다.
※ 뜻을 아는 사람에게는 당연한 것일 수도 있고, 당연히 IE도 움직인다.

해설

여기서 보는 사람들은 html, CSS에 대해 잘 몰라요. 모르기 때문에 사람을 향한 거예요.
포지션에 대해서 기억해야 할 게 많아요.
특히 absolute에 관해서는 지금까지 사이트에 쓰지 않은 숨겨진 방법에 대한 해설이 많이 있습니다.
지금까지 프론트 데스크 엔지니어 중에 그걸 아는 사람이 없어요.
그것의 설명은 이번에 말한 내용이 아니어서 몰라도 문제없다.
※ 원래 그 숨겨진 방법을 이해할 필요가 없습니다
우선

  width: 50px;
  height: 50px;

요소의 너비와 높이입니다.
이게 다야?

  border: 10px solid #dddddd;

이게 아까 지정한 요소의 상하좌우입니다.
10px 선을 #ddd 색상으로 표시하도록 지정합니다.
따라서 앞의 원소는 가로 70px이다
(10px(상선)+50px(원소 높이)}+10px(하선)
(10px(오른쪽 선)+50px(원소의 가로 너비)}+10px(왼쪽 선).

  border-top-color: #aaaaaa;

이것은 방금 설정한 선의 #aaa 색깔만 덮어씁니다.
border 전에border-top-color를 쓰면 색이 #aaaaa~#dddddd로 덮어씁니다.
여기까지는 아래라고 생각했어요.

다음

  border-radius: 50%;

이 지정은 원형으로 변경합니다.
이 지정은 모든 각도만 지정하고 둥글게 지정합니다.
물론 모든 각은 가늘게 설정할 수 있지만 이번에는 원형이어서 각이 50%씩 둥글다.
35px(전체의 크기/2)를 쓸 수 있지만 50%의 종횡으로 선의 굵기가 바뀌어도 무너지지 않기 때문에 이게 좋다고 생각합니다.
나는 이렇게 하면 아래의 원형이 될 것이라고 생각한다.

그 다음에 그 곳을 돌면 완성됩니다.
회전의 지정은

  animation: 1s spin infinite linear;

태그 요소의 표시 속성을 수정합니다.
이것은 1초 안에 "스핀"으로 설정된 애니메이션이 일정한 속도로 "영원히"진행될 것을 지정합니다.
이번에는 계속 뭐가 끝날지 정하기 때문에 영원으로 지정하지만, 회전 횟수도 지정할 수 있을 것 같습니다.
(잊어버렸어...)
회전 속도도 고정 속도 (linear) 이지만 변경할 수 있습니다.
앞부분이 너무 이르고 늦은 느낌.
스핀으로 지정된 지정은 직접 만들어야 합니다.
애니메이션을 어떻게 만드는지 스스로 만들어야 하기 때문에 그 동작의 이름을 여기에 두었다.
이번에는 즉석에서 한 바퀴 돌기 때문에 스핀이라고 명명되었다.
즉석에서 회전하는 지정은 다음과 같다.

@keyframes spin {
  from{
    transform: rotateZ(0deg);         /* アニメーション開始状態 */
  }
  to{
    transform: rotateZ(360deg);       /* アニメーション終了状態 */
  }
}

@keyframes 애니메이션의 동작을 설정할 수 있습니다.
더 많은 기능이 있지만 특별히 신경 쓰지 않아도 문제없으니 안심하세요!!
@keyframes의 오른쪽은 일련의 애니메이션 이름입니다.
이번에는 스핀이니까 아까 애니메이션 속성에 스핀이라고 썼어요.
애니메이션 시작 시 상태
to 애니메이션이 끝날 때의 상태를 지정합니다.
transform은 원소를 변형시키는 지정이고, rotateZ는 Z축을 축으로 회전 각도를 지정하는 지정입니다.
이번에는 시작할 때 0도(0deg), 끝날 때 360도(360deg)로 설정합니다.
원형의 각도가 360도이기 때문에 시작과 끝의 상태가 같아도 그 사이에 각도가 바뀌기 때문에 즉석에서 회전하는 것처럼 보인다.
이번에는 시계 방향으로 회전하지만 시계 반대 방향으로 회전할 때 to를
transform: rotateZ(-360deg);
그럼
애니메이션 속성으로 영원히 초당 1회 회전!!

마지막

일단 여기까지 읽어줘서 고마워요.
그리고 일본어도 졸렬하거나 잘 표현되지 않은 부분이 있다고 생각합니다. 죄송합니다.
이번에는 간단한 로딩이지만 더 신경 쓰는 것만 표현할 수 있습니다. html+css.
저는 CSS를 배우는 것을 좋아합니다. 특히 html+CSS(html5+css3)로만 애니메이션을 만드는 것을 좋아합니다.
너는 이상한 사람이야. 평범한 프론트 데스크 엔지니어보다 좀 더 상세하다고 생각해.
이제 자바스크립트에서 요소를 바꾸지 않아도 CSS만으로 모든 디자인을 표현할 수 있기 때문에 더 공부하고 싶습니다.
또 이런 보도에 대한 수요가 있거나 투고를 잊어버리고 싶습니다.
다시 한 번 찾아주셔서 감사합니다!!