CSS Circle with Inlay Border

CSS circle with inlay border

First off, I've changed dimensions to pixels as it was easier to work with just one unit, but you can of course change this back. So I made the green border 10px thick.

You need 3 circle sections to achieve this. One for the gray circle, one for the green quarter and one to achieve the gap between the two visible parts. The gap may be achievable using other methods that I can't think of right away.

First, I moved the green border to the ::after pseudo-selector, so I could put something underneath it to create the gap (the ::before pseudo-selector)

Secondly, to avoid the growing/shrinking effect your green border has, you need to give the whole green circle the same size (at least the parts that are next to the border-right, i.e. border-top and border-bottom). This can be done by adding a 10px transparent border:

border: solid transparent 10px;

To compensate for the whole box with the green border growing as a result of this, I added negative margins on the left/top.

For the gap, a second circle is created. This one has a white border. This means it won't work against any other background (but you can change the color of this border to match the background). It's a bit bigger and moved further left/top so that it's positioned appropriately.

.inlay-circle {  width: 15rem;  height: 15rem;  border: solid #a7a9ac 2px;  border-radius: 50%;}.inlay-circle::after {  margin-left: -15px;  margin-top: -15px;  position: absolute;  content: '';  width: 15rem;  height: 15rem;  border: solid transparent 10px;  border-right: solid #658d1b 10px;  border-radius: 50%;  transform: rotate(45deg);
}.inlay-circle::before {  margin-left: -30px;  margin-top: -30px;  position: absolute;  content: '';  width: 15rem;  height: 15rem;  border: solid transparent 20px;  border-right: solid white 20px;  border-radius: 50%;  transform: rotate(45deg);}

<div class="inlay-circle"></div>

CSS circle border fill animation

You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow,
.inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill,
.dot span {
  background-color: #f50;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'>
  </div>
  <div class='inner-shadow'>
  </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>

</div>

Creating a responsive circular percentage chart with two percentages

Add a pathLength of 100 so the whole circle is equal to 100 units and then tweak your stroke-dasharrays as appropriate.

 <svg width="400px" height="400px" viewBox="0 0 36 36" className="circular-chart orange">
    <path
      d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
      fill="none"
      stroke-dasharray="0 69 30.75 0.25"
      stroke-width="1.5"
      stroke="blue"
      pathLength="100"
    />
    <path
      stroke-dasharray="68.75, 31.25"
      d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
      fill="none"
      stroke-width="1.5"
      stroke-dasharray="61 39"
      stroke="red"
      pathLength="100"
    />
  </svg>

CSS - Add tangent rectangle onto top of concentric circles

You are already using a relative position for div2, so i would use a position: absolute on div5:

.div5 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 0.5px dashed black;
  width: 120px;
  height: 80px;
}

The transform property, combined with the left property is to make sure that your element is centered.

Then, i would remove your div4 from div3, because it looks like you're creating relationships between divs that don't seem to be necessary (Unless there is a mathematical reason for that):

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div5">
      </div>
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 70px;
  width: 120px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: white;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 120px;
  height: 80px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

 <div class="container">
   <div class="elem div1"></div>
   <div class="elem div2">
     <div class="elem div3">
       <div class="elem div5">
       </div>
       <div class="elem div4">
     </div>
   </div>
 </div>

Remove border lines in R shiny dashboard's main header

Following Customizing dashboard apperance you could remove the border for you logo and the sidebar toggle like so:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  skin = "black",
  dashboardHeader(
    tags$li(
      class = "dropdown",
      tags$style(
        ".main-header {max-height: 75px}",
        ".main-header .logo {height: 75px}",
        ".main-sidebar .sidebar .sidebar-menu .active a{
                           background-color: #003A68;
                         }",
        ".main-sidebar .sidebar{
                           background-color: #005BA5;
                         }",
      )
    ),
    titleWidth = 350,
    title = tags$a(tags$image(src = "Gilbert Logo.png"))
  ),
  dashboardSidebar(
    width = 350,
    sidebarMenu(
      id = "tab",
      div(class = "inlay", style = "height:25px;width:100%;background-color: #ecf0f5"),
      menuItem("Inputs", icon = icon("sliders-h"))
    )
  ),
  dashboardBody(
    tags$head(tags$style(HTML('
      .skin-black .main-header>.logo {
        border-right: 0px;
      }
    ', 
    '.skin-black .main-header .navbar>.sidebar-toggle {
        border-right: 0px;
    }')))
    
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

---

Related Topics