-
Notifications
You must be signed in to change notification settings - Fork 70
/
loader.css
82 lines (72 loc) · 2.1 KB
/
loader.css
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.custom_loader_wrap * {
box-sizing: border-box;
}
.custom_loader_wrap {
overflow: auto; /* location bar hack */
overflow-x: hidden;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
user-select: none;
-webkit-user-select: none;
pointer-events: all;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(var(--cl-background-1), var(--cl-background-2));
/*
** You can modify these custom properties to change how the loader looks on the front end.
** And if the style you're looking for is not listed here,
** or, if you require a completely different custom loader,
** you can always contact us at support@awe.media
*/
/* 1. page background 2 gradient colors */
--cl-background-1: #CECECE;
--cl-background-2: #fff;
/* 2. loader size */
--cl-circle-size: 350px;
/* 3. circle rotate duration */
--cl-circle-rotate-duration: 2s;
/* 4. circle gradient colors */
--cl-circle-gradient-color1: rgba(255,255,255,1);
--cl-circle-gradient-color2: rgb(220, 220, 220);
--cl-circle-gradient-color3: rgb(170, 170, 170);
--cl-circle-gradient-color4: rgb(10, 10, 10);
}
.custom_loader_inner {
width: var(--cl-circle-size);
height: var(--cl-circle-size);
border-radius: 100%;
background: linear-gradient(165deg, var(--cl-circle-gradient-color1) 0%, var(--cl-circle-gradient-color2) 40%, var(--cl-circle-gradient-color3) 98%, var(--cl-circle-gradient-color4) 100%);
position: relative;
}
.custom_loader {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
border-bottom: 0 solid #ffffff05;
box-shadow:
0 -10px 20px 20px #ffffff40 inset,
0 -5px 15px 10px #ffffff50 inset,
0 -2px 5px #ffffff80 inset,
0 -3px 2px #ffffffBB inset,
0 2px 0px #ffffff,
0 2px 3px #ffffff,
0 5px 5px #ffffff90,
0 10px 15px #ffffff60,
0 10px 20px 20px #ffffff40;
filter: blur(3px);
animation: var(--cl-circle-rotate-duration) circle_rotate linear infinite;
}
@keyframes circle_rotate {
100% {
transform: rotate(360deg)
}
}