question Re: How to design a circle widgets in Developer forum

How to design a circle widgets

Stiphilan10 — Tue, 14 Mar 2023 06:26:06 GMT

could some help me to achieve this task? I dont know how to design this kind of design.

Reference: I need to design like the red colour circle widgets.

I'm attaching the model screen shot below.

Re: How to design a circle widgets

Sonali Nimbalk1 — Wed, 15 Mar 2023 11:02:15 GMT

Hi @Stiphilan10 ,

For Circle Design for the widget, please refer to HTML and CSS code.

<div style="text-align:center"> <h1>Round Dots / Circles</h1> <span class="dot red"> <span class="circleNo">10</span> <span class="text">All Records</span> </span> <span class="dot"> <span class="circleNo">20</span> <span class="text">Incident</span> </span> <span class="dot"> <span class="circleNo">30</span> <span class="text">Problem</span> </span> <span class="dot"> <span class="circleNo">40</span> <span class="text">Change</span> </span> </div>

CSS

.dot { height: 100px; width: 100px; background-color: #bbb; border-radius: 50%; display: inline-block; text-align:center } .red{ background-color: #ff0000; } .circleNo{ position: relative; top: 35px; font-size: 25px; font-weight: bold; color: #fff; } span.text { position: absolute; top: 195px; display: block; margin-left: 25px; }

Please hit like and mark my response as correct if that helps

Regards,
Sonali Nimbalka

Re: How to design a circle widgets

Uday_Kumar — Wed, 15 Mar 2023 11:56:48 GMT

Hi @Stiphilan10 How are you ?

In order to create this widget you need to design using HTML and CSS. I am pasting the HTML and CSS code for you just create one widget and paste those codes you will get it.

HTML:

<div style="display:flex; flex-direction:column; "> <h3 style="color:black; padding:10px 0px 10px 270px;"> My Stuff </h3> <div style="display:flex; gap:40px; justify-content:center;"> <div> <div class="red"> 11 </div> <h4> All Records </h4> </div> <div> <div class="red"> 2 </div> <h4> Incidents </h4> </div> <div> <div class="red"> 9 </div> <h4> Requests </h4> </div> <div> <div class="red"> 0 </div> <h4> Approvals </h4> </div> <div> <div class="red"> 0 </div> <h4> Watched Items </h4> </div> </div> </div>

CSS:

*{ padding:0; margin:0; box-sizing:border-box; } .red:hover{ background-color:red; height:90px; width:90px; border-radius:50%; } .red{ background-color:black; text-align:center; color:white; width:80px; border-radius:50px; height:80px; cursor:pointer; display:flex; justify-content:center; align-items:center; font-size:30px; } .red:active{ background-color:blue; } h4{ font-size:15px; color:black; text-align:center; padding-top:10px; } h4:hover{ color:red; }

The Output is here 😍:

Please hit like 👍 and mark my response as correct if that helps you

Thanks & Regards

Uday Kumar Valapudasu