skeleton-loder-v2/skeleton.css at main · junaidmugloo/skeleton-loder-v2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.loader.skeleton .hide-circle {
  background: #e2e2e2;
  color: transparent;
  position: relative;
  overflow: hidden;
  border-radius: 100%;
}
.loader.skeleton .hide-circle::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  height: 100%;
  width: 50px;
  background: linear-gradient(to right, #e2e2e2 25%, #d5d5d5 50%, #e2e2e2 100%);
  animation-name: gradient-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  filter: blur(5px);
}


.loader.skeleton .hide-details {
    background: #e2e2e2;
    color: transparent;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  .loader.skeleton .hide-details::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0;
    height: 100%;
    width: 50px;
    background: linear-gradient(to right, #e2e2e2 25%, #d5d5d5 50%, #e2e2e2 100%);
    animation-name: gradient-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    filter: blur(5px);
  }
  .box{
    width: 200px;
    height: 200px;
    background-color: rgb(0, 0, 0);
  }
  .circle{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: rgb(0, 0, 0);
  }

  @keyframes gradient-animation {
    from {
      left: 0%;
    }
    to {
      left: 100%;
    }
  }