CSS로 로딩의 빙글빙글 큰 녀석을 만들어 보았다
html
<div id="loading"></div>
css3
#loading{
width: 200px;
height: 200px;
/* 色の設定 */
background-color: #fff;
/* 円にする*/
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
box-shadow: 150px 0px 0px -90px #0ee, 105px 105px 0px -90px #0ee, 0px 150px 0px -85px #0ee, -105px 105px 0px -85px #0ee, -150px 0px 0px -80px #0ee, -105px -105px 0px -80px #0ee, 0px -150px 0px -75px #0ee, 105px -105px 0px -75px #0ee;
position: absolute;
top: 37%;
left: 45%;
animation: spin 3s linear infinite;
}
@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
Reference
이 문제에 관하여(CSS로 로딩의 빙글빙글 큰 녀석을 만들어 보았다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/marzo/items/aa6acf3cdfa0d573f950텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)