Poll UI Design snippet using HTML CSS & JavaScript

Loading…

Poll UI Design snippet using HTML CSS & JavaScript | GoSnippets

Source Code

1<div class="wrapper">
2    <header>Poll UI Design</header>
3    <div class="poll-area">
4      <input type="checkbox" name="poll" id="opt-1">
5      <input type="checkbox" name="poll" id="opt-2">
6      <input type="checkbox" name="poll" id="opt-3">
7      <input type="checkbox" name="poll" id="opt-4">
8      <label for="opt-1" class="opt-1">
9        <div class="row">
10          <div class="column">
11            <span class="circle"></span>
12            <span class="text">HTML</span>
13          </div>
14          <span class="percent">30%</span>
15        </div>
16        <div class="progress" style='--w:30;'></div>
17      </label>
18      <label for="opt-2" class="opt-2">
19        <div class="row">
20          <div class="column">
21            <span class="circle"></span>
22            <span class="text">Java</span>
23          </div>
24          <span class="percent">20%</span>
25        </div>
26        <div class="progress" style='--w:20;'></div>
27      </label>
28      <label for="opt-3" class="opt-3">
29        <div class="row">
30          <div class="column">
31            <span class="circle"></span>
32            <span class="text">Python</span>
33          </div>
34          <span class="percent">40%</span>
35        </div>
36        <div class="progress" style='--w:40;'></div>
37      </label>
38      <label for="opt-4" class="opt-4">
39        <div class="row">
40          <div class="column">
41            <span class="circle"></span>
42            <span class="text">jQuery</span>
43          </div>
44          <span class="percent">10%</span>
45        </div>
46        <div class="progress" style='--w:10;'></div>
47      </label>
48    </div>
49  </div>

Poll UI Design snippet using HTML CSS & JavaScript

Source Code

More Forms snippets

Comments(0)