JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Progress Bar › Circular progres bar centered
- This topic has 9 replies, 3 voices, and was last updated 2 weeks, 1 day ago by Markov.
-
AuthorPosts
-
October 8, 2024 at 4:02 pm #111516tbettinazzi@axioma.itParticipant
I need to put an indeterminate circular progress bar on a modal div.
I want to have it centered in the page and with a smaller radius than the standard one.
Could You help me
Tks
- This topic was modified 1 month, 3 weeks ago by tbettinazzi@axioma.it.
- This topic was modified 1 month, 3 weeks ago by tbettinazzi@axioma.it.
October 10, 2024 at 9:03 pm #111540adminKeymasterHi,
Here’s a sample for achieving this: https://codepen.io/jqwidgets/pen/poMNYzb
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/October 11, 2024 at 6:48 am #111542tbettinazzi@axioma.itParticipantTks.
How can I reduce the radius of the circle ?
Tullio
October 11, 2024 at 4:12 pm #111546tbettinazzi@axioma.itParticipantAnd have a transparent background ?
Tks
October 11, 2024 at 4:49 pm #111547tbettinazzi@axioma.itParticipantAnyway it doesn’t seem to work (smartelements 20).
It still remains in the upperside left corner.
My html
<div><!DOCTYPE html></div>
<div><html xmlns=”http://www.w3.org/1999/xhtml”></div>
<div><head></div>
<div> <title>Progress Bar Overview</title></div>
<div></div>
<div> <meta charset=”utf-8″ /></div>
<div> <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /></div>
<div> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /></div>
<div> <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ /></div>
<div></div>
<div> <link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” /></div>
<div> <link rel=”stylesheet” type=”text/css” href=”../../styles/demos.css” /></div>
<div> <link rel=”stylesheet” type=”text/css” href=”styles.css” /></div>
<div></div>
<div></head></div>
<div><body class=”viewport”></div>
<div><smart-window opened></div>
<div> <div class=”centered”></div>
<div> <smart-circular-progress-bar id=”progressbar3″ indeterminate></smart-circular-progress-bar></div>
<div> </div></div>
<div></smart-window></div>
<div> <!– scripts –></div>
<div> <script src=”../../../source/modules/smart.progressbar.js”></script></div>
<div> <script src=”index.js”></script></div>
<div></div>
<div></body></div>
<div></html></div>
<div></div>
<div>My css</div>
<div></div>
<div>
.centered {
display: flex;
align-items: center;
height: 100%;
}</div>
<div></div>
<div>Tks</div>October 13, 2024 at 10:43 pm #111552MarkovKeymasterHi,
The codepen sample provided in this post uses the latest version and you can see online that the progress bar is centered. I would suggest you check whether some other styles are not applied.
Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/October 15, 2024 at 9:51 am #111579tbettinazzi@axioma.itParticipantThe difference seems to be in the smart-window.
The code is the same but in Your example is 450×480 in my implementation seems to be 1450×480.
I tried to set the window size but it’s ignored.
Tks
October 15, 2024 at 4:21 pm #111587MarkovKeymasterHi,
Take a look at this: https://codepen.io/jqwidgets/pen/poMNYzb. The window has width = 1500px and the progress bar is centered.
Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/November 17, 2024 at 10:58 am #111791tbettinazzi@axioma.itParticipantI’m still not able to make it working.
Please look at https://codepen.io/tullio0106/pen/qBegvaM
The esternal div has all required css properties as You described but the progress bar is still in the left upper side corner.
Tks
November 18, 2024 at 9:21 am #111795MarkovKeymasterHi,
See the updated CSS below
html, body { padding: 10px; } .smart-window { width: 1500px !important; } .centered { display: flex; align-items: center; justify-content: center; } #progressbar3 { width:100px !important; height:100px !important; } #progressbar4 { width:125px !important; height:125px !important; } .divall { width:100%; height:800px; background: blue; }
Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.