ux_ui_designer

1
/* Preloader.scss */
2
.preloader {
3
  display: flex;
4
  justify-content: center;
5
  align-items: center;
6
  height: 100vh;
7
  background-color: black;
8
  position: relative;
9
}
10

11
.preloader-circle {
12
  width: 170px;
13
  height: 170px;
14

15
  border-top: 1px solid transparent;
16
  border-radius: 50%;
17
}
18

19
.preloader-line {
20
  position: absolute;
21
  width: 1px;
22
  height: 100%;
23
  background-color: white;
24
  transform-origin: 0% 50%;
25
}
26

27
.preloader-line-top {
28
  top: 0;
29
  left: 50%;
30
  animation: lineMoveTop 2s ease-in-out forwards;
31
}
32

33
.preloader-line-bottom {
34
  bottom: 0;
35
  left: 50%;
36
  animation: lineMoveBottom 2s ease-in-out forwards;
37
}
38

39
.preloader-percentage {
40
  position: absolute;
41
  top: 50%;
42
  left: 50%;
43
  transform: translate(-50%, -50%);
44
  font-size: 24px;
45
  color: #eda424;
46
}
47

48
@keyframes lineMoveTop {
49
  0% {
50
    height: 0;
51
  }
52

53
  100% {
54
    height: 39%;
55
  }
56
}
57

58
@keyframes lineMoveBottom {
59
  0% {
60
    height: 0;
61
  }
62
  100% {
63
    height: 39%;
64
  }
65
}
66