๐์ ๋๋ฉ์ด์ ๋ก๋ฉ ์คํผ๋ | HTML ๋ฐ CSS๐ฏ
HTML ๋ฐ CSS๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์ ๋ก๋ฉ ์คํผ๋ ์์ต์๋ฅผ ๋น๋ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ญ์์ค!
์์ค ์ฝ๋:
๋ด์ฉ ๋ฐ ๊ตฌ์กฐ:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animated Loading Spinner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="spinner">
Loading...
<div class="spinner-sector spinner-sector-red"></div>
<div class="spinner-sector spinner-sector-blue"></div>
<div class="spinner-sector spinner-sector-green"></div>
<div class="spinner-sector spinner-sector-orange"></div>
</div>
</body>
</html>
๋ ์ด์์ ๋ฐ ๋์์ธ
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
display: grid;
place-items: center;
min-height: 100vh;
overflow: hidden;
}
.spinner{
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
overflow: hidden;
position: relative;
animation: text-fading 2s ease-in-out infinite alternate;
}
@keyframes text-fading {
0%{
color: rgba(0,0,0,1);
}
50%{
color: rgba(0,0,0,0.5);
}
100%{
color: rgba(0,0,0,0.1);
}
}
.spinner-sector{
position: absolute;
width: 100%;
height: 100%;
/*background: red;*/
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 15px solid transparent;
mix-blend-mode: overlay;
animation: rotate var(--duration) var(--timing) infinite;
}
@keyframes rotate {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
.spinner-sector-red{
border-top-color: #cf2c20;
--duration: 1.5s;
--timing: ease-in-out;
}
.spinner-sector-blue{
border-left-color: #2454df;
--duration: 2s;
--timing: ease-in;
}
.spinner-sector-green{
border-right-color: #258342;
--duration: 2.5s;
--timing: ease-out;
}
.spinner-sector-orange{
border-bottom-color: #f0a204;
--duration: 3s;
--timing: ease-in-out;
}
๐ด๋ค์๊ณผ ๊ฐ์ ๋ ๋ง์ ์ฝํ ์ธ ๋ฅผ ๋ณด๋ ค๋ฉด ํ๋ก์ฐํ์ธ์.
https://bit.ly/WDevMadeEasy
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐์ ๋๋ฉ์ด์ ๋ก๋ฉ ์คํผ๋ | HTML ๋ฐ CSS๐ฏ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/robsonmuniz16/animated-loading-spinner-html-css-20jgํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค