I am creating a progress bar using div, I got some code to create but that's clock-wise, instead, I need it in anti-clockwise
There are some HTML and CSS code, with which simple progress bar is created, my problem is that I can't use other technologies for it, so using only HTML,CSS I have to create it. Please help out to me in it.
.progress-circle {
font-size: 20px;
margin: 20px;
position: relative; /* so that children can be absolutely positioned */
padding: 0;
width: 5em;
height: 5em;
background-color: #F2E9E1;
border-radius: 50%;
line-height: 5em;
}
.progress-circle:after{
border: none;
position: absolute;
top: 0.35em;
left: 0.35em;
text-align: center;
display: block;
border-radius: 50%;
width: 4.3em;
height: 4.3em;
background-color: white;
content: " ";
}
/* Text inside the control */
.progress-circle span {
position: absolute;
line-height: 5em;
width: 5em;
text-align: center;
display: block;
color: #53777A;
z-index: 2;
}
.left-half-clipper {
/* a round circle */
border-radius: 50%;
width: 5em;
height: 5em;
position: absolute; /* needed for clipping */
clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
clip: rect(auto,auto,auto,auto);
}
.value-bar {
/*This is an overlayed square, that is made round with the border radius,
then it is cut to display only the left half, then rotated clockwise
to escape the outer clipping path.*/
position: absolute; /*needed for clipping*/
clip: rect(0, 2.5em, 5em, 0);
width: 5em;
height: 5em;
border-radius: 50%;
border: 0.45em solid #53777A; /*The border is 0.35 but making it larger removes visual artifacts */
/*background-color: #4D642D;*/ /* for debug */
box-sizing: border-box;
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
/*Progress bar for the first 50%, filling the whole right half*/
position: absolute; /*needed for clipping*/
clip: rect(0, 5em, 5em, 2.5em);
background-color: #53777A;
border-radius: 50%;
width: 5em;
height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }
/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
<div class="progress-circle p10">
<span>10%</span>
<div class="left-half-clipper">
<div class="first50-bar"></div>
<div class="value-bar"></div>
</div>
</div>
I want the progress bar should be anti-clockwise instead of clockwise
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Using this transform function we can do this:
Add transform: scale(-1, 1); to .progress-circle.
Add transform: scale(-1, 1); to .progress-circle span.
Here's demo.
Related
I have a circular mouse sprite that will show the inverse of a color during mouseover. I want to be able to use this to find black text (hidden within a black background) and make the black text visible as white if the circular mouse sprite is over the text.
It looks as follows:
Over text:
I want to make it so that when its over the text "FEELING LEFT IN THE DARK?", the text will appear white, but only within the cursor. For example, in the second image above, only the bottom part of "EL" should be visible as WHITE while the circular mouse sprite is over the text.
I wonder if this is even possible? and if so, help is appreciated.
HTML:
<h1 class="contact-intro">Feeling Left <br> in the dark?</h1>
<span class="cursor"></span>
CSS:
/*The text "Feeling left in the dark?*/
.contact-intro {
text-align: left;
justify-content: center;
margin: auto;
margin-left: 28.55%;
margin-top: 3%;
display: inline-block;
text-transform: uppercase;
color: black;
font-size: 7em;
z-index: 500;
}
/*The Cursor*/
#media ( hover: none ) {
.cursor {
display: none !important;
}
}
* {
cursor: none;
}
.cursor {
--size: 80px;
height: var( --size );
width: var( --size );
border-radius: 50%;
pointer-events: none;
position: absolute;
transform: translate( -50%, -50% );
z-index: 1;
}
.cursor.cursor-dot {
background: orangered; /* This defines the color of the cursor */
mix-blend-mode: difference;
transition: width 0.6s, height 0.6s, background-color 0.6s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 50px;
background-color: #ffffff;
}
JQUERY:
//text inversion
$(() => {
$('body').prepend('<div class="cursor cursor-dot" style="left: 0px; top: 0px;">');
$(window).mousemove(function (e) {
$('.cursor').css({
left: e.pageX,
top: e.pageY
});
});
$(window).mousemove(function (e) {
$('a').on('mouseenter', function () {
$('.cursor').addClass('active');
});
});
$(window).mousemove(function (e) {
$('a').on('mouseleave', function () {
$('.cursor').removeClass('active');
});
});
});
This isn't exactly what you asked for, since the text color isn't inverted...but the black still shows up against the red cursor element as it moves around. Pretty simple to do with z-index.
const cur = document.querySelector('#cur');
const { width, height } = cur.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cur.style.top = e.y - height / 2 + 'px';
cur.style.left = e.x - width / 2 + 'px';
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
background-color: black;
}
#txt {
position: relative;
color: black;
background-color: transparent;
z-index: 300;
font-size: 3rem;
padding: 1rem;
}
#cur {
position: absolute;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
background-color: red;
z-index: 200;
}
<div id='txt'>FEELING LEFT IN THE DARK?</div>
<div id='cur'></div>
how would you make progress bar in CSS that would have colours based on values etc. from 0% to 20% red colour, 20% to 40% blue... Also, I would want to show the colours all the time, not only when it hits the value(so that part of a progress bar would be red, part blue and the other colours from the beggining and that the colours would disappear as the value would go down).
If you are trying to achieve a gradient progress bar as per the current progress, then try linear-gradient() property in CSS.
Here is a working model:
#prog-bar-cont {
width: 75vw;
height: 2.5em;
}
#prog-bar-cont #prog-bar {
background: #ffff;
width: 100%;
height: 100%;
border-color: #000;
border-style: solid;
border-radius: 50px;
overflow: hidden;
position: relative;
}
#prog-bar-cont #prog-bar #background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/*Actual Stuff*/
background: linear-gradient(-90deg, violet, #30b3fc, #70dc23, yellow, orange, #ff1076);
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
transition: all 3s;
-webkit-transition: all 3s;
}
#prog-bar-cont:hover #prog-bar #background {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
<h1>Rainbow Progress Bar</h1>
<p>Try hovering over the bar</p>
<div id='prog-bar-cont'>
<div id="prog-bar">
<div id="background"></div>
</div>
</div>
You can accomplish that by nesting the progress bar in a parent element and applying the css property overflow: hidden.
You can change the width of the class bar-clipper to the desired percentage. i.e. calc(300px * 0.6) will show 60% of the bar.
.bar-clipper {
width: calc(300px * 0.8);
height: 20px;
overflow: hidden;
position: absolute;
}
.bar-wrapper {
width: 300px;
height: 20px;
display: flex;
position: absolute;
}
.bar-wrapper span {
width: 100%;
height: 100%;
}
.bar-wrapper .bar1 {
background-color: #163f5f;
}
.bar-wrapper .bar2 {
background-color: #21639b;
}
.bar-wrapper .bar3 {
background-color: #3caea3;
}
.bar-wrapper .bar4 {
background-color: #f6d65b;
}
.bar-wrapper .bar5 {
background-color: #ed543b;
}
<body>
<div class="bar-clipper">
<div class="bar-wrapper">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
<span class="bar5"></span>
</div>
</div>
</body>
Link to fiddle: https://jsfiddle.net/L13yrgbm/
I`m trying to make hover effect on a box like this image
I've tried using transparent top and left border but all i got was bottom border extra triangle pointing the other direction like in this
.news:hover {
transform: translateY(20px);
transform: translateX(-20px);
border-left: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: solid #F4698D 20px;
border-right: solid #F4698D 20px;
}
One solution would be to create a pseudo element using ::after. It sits in the bottom left, overlaying the border, and has it's own gradient background that resembles a triangle.
Because the width of the border is used to determine the height, width, and offset of the overlaying element, I've elected to store that number as a CSS variable.
:root {
--border-width: 10px;
}
div {
padding: 50px;
border-bottom: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
position: relative;
}
div:hover {
border-color: red;
}
div:hover::after {
content: '';
position: absolute;
display: block;
height: var(--border-width);
width: calc(2 * var(--border-width));
bottom: calc(-1 * var(--border-width));
left: 0px;
background: linear-gradient(to right top, white 50%, red 50%);
z-index: 2;
}
<div>Hover me!</div>
Borders create that shape that resembles a frame.
Another solution for this effect is to use :after and :before pseudo elements. You could let them prepared with opacity: 0, and then when hovering the element, make it to opacity: 1. Like this:
.news {
postision: relative;
}
.news:before { // the bottom line
bottom: -20px;
Left: 0;
height: 20px;
width: 100%;
}
.news:after { // the right line
right: -20px;
top: 0;
height: 100%;
width: 20px;
}
.news:after { // here are properties for both pseudo elements
content: '';
position: absolute;
visibility: hidden;
opacity: 0;
transition: .32s;
}
.news:hover {
transform: translate(-20px, 20px);
}
.news:hover:before, .news:hover:after {
opacity: 1;
visibility: visible;
}
Hope it helps.
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I am new to design UI in html. I have a requirement to design as per the referenced image. I required source code for the same design. Please do the needful.
There are 3 part in a circle. There will be an event while clicking each part.
https://drive.google.com/file/d/0B8QaA3VryqygYU9valJoYm9WSEU/view?usp=sharing
It is possible to create such a segmented circle in CSS. First, you create the circle with border-radius: 50%; on the container element. Than you create your segments with transform:
transform: rotate(-60deg) skewY(30deg) scale(1.2);
Explanation: With rotate you can place each segment on its proper place, with skew you create the needed angle for the circle center and with scale you make sure that the segments fill the circle up to the border. At last you just create an element for the inner circle and you are done.
To make the segments clickable, you can use the onclick event handler or jQuerys click() function.
Also see this question.
.pie {
position: relative;
margin: 1em auto;
border: 4px solid black;
padding: 0;
width: 15em;
height: 15em;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
.slice {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
border: 2px solid black;
box-sizing: border-box;
}
.slice-contents {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
}
.slice:nth-child(1) {
transform: rotate(-60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(1) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: lightblue;
}
.slice:nth-child(2) {
transform: rotate(60deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(2) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: lightgreen;
}
.slice:nth-child(3) {
transform: rotate(180deg) skewY(30deg) scale(1.2);
}
.slice:nth-child(3) .slice-contents {
transform: skewY(-30deg); /* unskew slice contents */
background: orange;
}
.inner-pie {
position: absolute;
width: 3em;
height: 3em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 4px solid black;
background: white;
}
<ul class='pie'>
<li class='slice'>
<div class='slice-contents'>click 1</div>
</li>
<li class='slice'>
<div class='slice-contents'>click 2</div>
</li>
<li class='slice'>
<div class='slice-contents'>click 3</div>
</li>
<li class='inner-pie'>
</li>
<ul>