Skip to content

Commit 61d7ef3

Browse files
palakag29palakag29
authored
Added Placeholder shimmer effect (pranjay-poddar#2843)
1 parent 293afc6 commit 61d7ef3

File tree

2 files changed

+89
-0
lines changed

2 files changed

+89
-0
lines changed

‎Preloaders/Placeholder-Shimmer-effect/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./style.css">
7+
<title>Loader with Shimmer effect</title>
8+
</head>
9+
<body>
10+
<div class="loader">
11+
<div class="container">
12+
<div class="circle shimmer"></div>
13+
<div class="line"><input type="text" placeholder="Loading..." disabled class="shimmer"></div>
14+
</div>
15+
</div>
16+
</body>
17+
</html>

‎Preloaders/Placeholder-Shimmer-effect/style.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
body {
2+
background-color: black;
3+
align-items: center;
4+
margin-top: 15%;
5+
margin-left:40%;
6+
}
7+
8+
.loader {
9+
position: relative;
10+
width: 240px;
11+
height: 46px;
12+
border-radius: 10px;
13+
border: 1px solid #d3d3d3;
14+
padding: 15px;
15+
background-color: #e3e3e3;
16+
overflow: hidden;
17+
}
18+
19+
.loader input {
20+
position: relative;
21+
width: 140px;
22+
height: 14px;
23+
border-radius: 10px;
24+
border: 1px solid #d3d3d3;
25+
padding: 15px;
26+
background-color: #e3e3e3;
27+
overflow: hidden;
28+
}
29+
30+
.loader .container > div {
31+
background-color: #aacaca;
32+
}
33+
34+
.loader .circle {
35+
width: 50px;
36+
height: 50px;
37+
border-radius: 50%;
38+
}
39+
40+
.loader .line {
41+
position: absolute;
42+
top: 18px;
43+
left: 78px;
44+
height: 45px;
45+
width: 170px;
46+
border-radius: 8px;
47+
}
48+
49+
50+
.shimmer {
51+
background-image: linear-gradient(
52+
105deg,
53+
#eeeeee 0%,
54+
#eeeeee 40%,
55+
#dddddd 50%,
56+
#dddddd 55%,
57+
#eeeeee 65%,
58+
#eeeeee 100%
59+
);
60+
background-size: 400%;
61+
animation: shimmer 2s infinite;
62+
}
63+
64+
@keyframes shimmer {
65+
0% {
66+
background-position: 100% 100%;
67+
}
68+
69+
100% {
70+
background-position: 0 0;
71+
}
72+
}

0 commit comments

Comments
 (0)