PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.36
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.36
51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Progress_Bar / style.css

style.css in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.36, at includes/widgets/Progress_Bar/style.css

161 lines 3.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .king-addons-prbar-counter-value-suffix {
2 line-height: 1;
3 }
4
5 .king-addons-prbar-hr-line {
6 position: relative;
7 overflow: hidden;
8 width: 100%;
9 }
10
11 .king-addons-prbar-hr-line-inner {
12 position: relative;
13 top: 0;
14 left: 0;
15 overflow: hidden;
16 width: 0;
17 height: 100%;
18 transition-property: width;
19 }
20
21 .king-addons-prbar-hr-line .king-addons-prbar-content {
22 position: absolute;
23 top: 0;
24 left: 0;
25 width: 100%;
26 height: 100%;
27 }
28
29 .king-addons-prbar-hr-line .king-addons-prbar-title-wrap {
30 position: absolute;
31 top: 50%;
32 left: 12px;
33 transform: translateY(-50%);
34 }
35
36 .king-addons-prbar-layout-hr-line .king-addons-prbar-subtitle {
37 text-align: left;
38 }
39
40 .king-addons-prbar-hr-line .king-addons-prbar-counter {
41 position: absolute;
42 top: 50%;
43 right: 12px;
44 transform: translateY(-50%);
45 }
46
47 .king-addons-prbar-layout-hr-line .king-addons-prbar-title-wrap {
48 float: left;
49 }
50
51 .king-addons-prbar-layout-hr-line .king-addons-prbar-counter {
52 float: right;
53 }
54
55 .king-addons-prbar-vr-line {
56 position: relative;
57 display: flex;
58 overflow: hidden;
59 flex-direction: column;
60 justify-content: flex-end;
61 width: 100%;
62 margin: 0 auto;
63 }
64
65 .king-addons-prbar-vr-line-inner {
66 position: relative;
67 overflow: hidden;
68 width: 100%;
69 height: 0;
70 transition-property: height;
71 }
72
73 .king-addons-prbar-circle {
74 position: relative;
75 display: table;
76 width: 100%;
77 height: auto;
78 margin: 0 auto;
79 }
80
81 .king-addons-prbar-circle-svg {
82 width: 100%;
83 height: auto;
84 transform: rotate(-90deg);
85 border-radius: 50%;
86 }
87
88 .king-addons-prbar-circle-prline {
89 transition-property: stroke-dasharray, stroke-dashoffset;
90 stroke-linecap: butt;
91 }
92
93 .king-addons-prbar-circle .king-addons-prbar-content {
94 position: absolute;
95 top: 50%;
96 left: 50%;
97 transform: translate(-50%, -50%);
98 }
99
100 .king-addons-prbar-content {
101 overflow: hidden;
102 text-align: center;
103 }
104
105 .king-addons-prbar-counter {
106 font-size: 12px;
107 display: flex;
108 justify-content: center;
109 }
110
111 .king-addons-prbar-title,
112 .king-addons-prbar-subtitle {
113 font-size: 12px;
114 text-align: center;
115 }
116
117 .king-addons-prbar-stripe-yes .king-addons-prbar-hr-line-inner:after,
118 .king-addons-prbar-stripe-yes .king-addons-prbar-vr-line-inner:after {
119 position: absolute;
120 top: 0;
121 left: -30px;
122 width: calc(100% + 60px);
123 height: 100%;
124 content: '';
125 background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
126 background-size: 30px 30px;
127 }
128
129 .king-addons-prbar-stripe-yes.king-addons-prbar-stripe-animation-right .king-addons-prbar-hr-line-inner:after,
130 .king-addons-prbar-stripe-yes.king-addons-prbar-stripe-animation-right .king-addons-prbar-vr-line-inner:after {
131 animation: king-addons-stripe-animation-right 2s linear infinite;
132 }
133
134 .king-addons-prbar-stripe-yes.king-addons-prbar-stripe-animation-left .king-addons-prbar-hr-line-inner:after,
135 .king-addons-prbar-stripe-yes.king-addons-prbar-stripe-animation-left .king-addons-prbar-vr-line-inner:after {
136 animation: king-addons-stripe-animation-left 2s linear infinite;
137 }
138
139 @keyframes king-addons-stripe-animation-right {
140 0% {
141 transform: translate(0, 0);
142 }
143 100% {
144 transform: translate(30px, 0);
145 }
146 }
147
148 @keyframes king-addons-stripe-animation-left {
149 0% {
150 transform: translate(0, 0);
151 }
152 100% {
153 transform: translate(-30px, 0);
154 }
155 }
156
157 .elementor-widget-king-addons-progress-bar .king-addons-prbar-hr-line-inner,
158 .elementor-widget-king-addons-progress-bar .king-addons-prbar-vr-line-inner {
159 background-color: #5B03FF;
160 }
161