Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created May 7, 2015 12:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/9dca491278737563ffdf to your computer and use it in GitHub Desktop.
Save anonymous/9dca491278737563ffdf to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 / CSS3 Circle with Partial Border
Raw
dabblet.css
/**
* HTML5 / CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
* { margin: 0; padding: 0; }
body{
}
.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%;
}
.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: '';
}
Raw
dabblet.html
<!-- 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='arc8'></div>
<div class='arc9'></div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment