Skip to content

Instantly share code, notes, and snippets.

@janerivi
Created May 7, 2015 12:54
Show Gist options
  • Save janerivi/b8f64ccbc329430f0c7f to your computer and use it in GitHub Desktop.
Save janerivi/b8f64ccbc329430f0c7f to your computer and use it in GitHub Desktop.
HTML5 / CSS3 Circle with Partial Border
/**
* HTML5 / CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
* { margin: 0; padding: 0; }
.norkart_preloader{
position:relative;
left:20px;
top:20px;
font-size:50px;
}
.circle {
font-size:0.2em;
position: relative;
margin: 0em;
width: 5em; height: 5em;
border-radius: 50%;
}
.arc12 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(330deg) skewX(70deg);
}
.arc12:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc11 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(300deg) skewX(70deg);
}
.arc11:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc10 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(270deg) skewX(70deg);
}
.arc10:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc9 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(270deg) skewX(70deg);
}
.arc9:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc8 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(240deg) skewX(70deg);
}
.arc8:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc7 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(210deg) skewX(70deg);
}
.arc7:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc6 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(180deg) skewX(70deg);
}
.arc6:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc5 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(150deg) skewX(70deg);
}
.arc5:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc4 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(120deg) skewX(70deg);
}
.arc4:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc3 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(90deg) skewX(70deg);
}
.arc3:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc2 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(60deg) skewX(70deg);
}
.arc2:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc1 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(30deg) skewX(70deg);
}
.arc1:before {
box-sizing: border-box;
display: block;
border: solid 1em black;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
.arc0 {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(0deg) skewX(70deg);
}
.arc0:before {
box-sizing: border-box;
display: block;
border: solid 1em green;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-70deg);
content: '';
}
<!-- content to be placed inside <body>…</body> -->
<div class="norkart_preloader">
<div class='circle'>
<div class='arc0'></div>
<div class='arc1'></div>
<div class='arc2'></div>
<div class='arc3'></div>
<div class='arc4'></div>
<div class='arc5'></div>
<div class='arc6'></div>
<div class='arc7'></div>
<div class='arc8'></div>
<div class='arc9'></div>
<div class='arc10'></div>
<div class='arc11'></div>
<div class='arc12'></div>
</div>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment