Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #111516

    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

    #111540
    admin
    Keymaster

    Hi,

    Here’s a sample for achieving this: https://codepen.io/jqwidgets/pen/poMNYzb

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    #111542

    Tks.

    How can I reduce the radius of the circle ?

    Tullio

    #111546

    And have a transparent background ?

    Tks

    #111547

    Anyway 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&gt;
    <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>

    #111552
    Markov
    Keymaster

    Hi,

    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,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    #111579

    The 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

    #111587
    Markov
    Keymaster

    Hi,

    Take a look at this: https://codepen.io/jqwidgets/pen/poMNYzb. The window has width = 1500px and the progress bar is centered.

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    #111791

    I’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

    #111795
    Markov
    Keymaster

    Hi,

    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,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.