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
Bootstrap 3 Class Visible-Lg Moves Span to a New Line
CSS Relative Positioning with Negative Value and Height
Rails: Precompiled Assets Missing Node Modules
CSS Issue Ngx-Table Angular2 Swimlane
Firefox Add's 2Px Padding in a Submit Button
Why Does a Media Query with a Smaller Min-Width Overwrite a Larger One
How to Make a Horizontally Scrollable Cell in a Datatable
Does a CSS3 Animation Run When Parent Element Has Visibility: Hidden
How to View Google Maps in "Print" Mode
Use an Image Instead of a Bootstrap's Glyphicon
How to Use Firebug to Easily Find Which CSS File Defines a Particular Style
Bootstrap - About Fonts Files (.Eot .Svg .Ttf .Woff and .Woff2) Roles and Usages
Align Text with Bottom as It Comes in During a Chat
Horizontally Center Absolute Positioned Element Below The Center of Another Element