E7BC :tada: loader:slackを追加 · BcRikko/css-collection@de01e47 · GitHub
Skip to content

Commit de01e47

Browse files
BcRikkoBcRikko
committed
🎉 loader:slackを追加
1 parent c44edc2 commit de01e47

4 files changed

Lines changed: 143 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@ <h1 class="title">CSS Animation Collection</h1>
5656
{
5757
title: 'Circle',
5858
link: './loader/circle/index.html'
59+
},
60+
{
61+
title: 'Slack',
62+
link: './loader/slack/index.html'
5963
}
6064
],
6165
Progress: [

‎loader/slack/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Slack - CSS Animation Collection</title>
9+
<link href="./style.css" rel="stylesheet">
10+
</head>
11+
12+
<body>
13+
<div class="loading-mask">
14+
<div class="slack">
15+
<div class="ball one"></div>
16+
<div class="ball two"></div>
17+
<div class="ball three"></div>
18+
<div class="ball four"></div>
19+
</div>
20+
</div>
21+
</body>
22+
23+
</html>

‎loader/slack/style.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
:root {
2+
--base-size: 100px;
3+
--animation-time: 1.5s;
4+
}
5+
.ball {
6+
--ball-size: 20px;
7+
--ball-width: 100px;
8+
--ball-height: 20px;
9+
}
10+
11+
body {
12+
padding: 0;
13+
margin: 0;
14+
}
15+
16+
.loading-mask {
17+
width: 100vw;
18+
height: 100vh;
19+
background-color: #f0f0f0;
20+
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
26+
.slack {
27+
position: relative;
28+
width: var(--base-size);
29+
height: var(--base-size);
30+
31+
animation: rotate var(--animation-time) linear infinite;
32+
transform-origin: center;
33+
}
34+
35+
.ball {
36+
position: absolute;
37+
width: var(--ball-width);
38+
height: var(--ball-height);
39+
transform-origin: top left;
40+
}
41+
.ball.one {
42+
top: var(--ball-height);
43+
left: 0px;
44+
transform: rotate(0deg);
45+
}
46+
.ball.two {
47+
top: 0;
48+
right: calc((var(--ball-width) - var(--ball-height)) * -1);
49+
transform: rotate(90deg);
50+
}
51+
.ball.three {
52+
bottom: 0;
53+
right: calc(var(--ball-width) * -1);
54+
transform: rotate(180deg);
55+
}
56+
.ball.four {
57+
bottom: calc(var(--ball-height) * -1);
58+
left: var(--ball-size);
59+
transform: rotate(270deg);
60+
}
61+
62+
.ball::after {
63+
content: "";
64+
position: absolute;
65+
top: 0;
66+
right: 0;
67+
width: var(--ball-size);
68+
height: var(--ball-size);
69+
border-radius: calc(var(--ball-size) / 2);
70+
71+
animation: stretch var(--animation-time) linear infinite;
72+
}
73+
74+
.ball.one::after {
75+
background-color: #e60064;
76+
}
77+
.ball.two::after {
78+
background-color: #38bc95;
79+
}
80+
.ball.three::after {
81+
background-color: #6fcdd9;
82+
}
83+
.ball.four::after {
84+
background-color: #e7a43d;
85+
}
86+
87+
@keyframes rotate {
88+
0%,
89+
20% {
90+
transform: rotate(20deg);
91+
}
92+
40% {
93+
transform: rotate(190deg);
94+
}
95+
60% {
96+
transform: rotate(210deg);
97+
}
98+
80%,
99+
100% {
100+
transform: rotate(380deg);
101+
}
102+
}
103+
104+
@keyframes stretch {
105+
0%,
106+
10%,
107+
90%,
108+
100% {
109+
width: var(--ball-width);
110+
}
111+
20%,
112+
80% {
113+
width: var(--ball-size);
114+
}
115+
}

‎style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ a:hover {
7171
transform-origin: 0 0;
7272
/* original / iframe */
7373
transform: scale(0.666);
74+
border: none;
7475
}
7576

7677
/* footer */

0 commit comments

Comments
 (0)