junaid1460/slider-css.html

## slider-css.html
<html>
    <style>
        .begin {
            background:  #f1f1f1;
            width : 100%;

        }
        .anim {
            background: red;
            width: 0%;
        }
div.slider {
    border-radius: 10px;
    height: 10px;
    min-width: 10px;
    display: flex;
    background: #8BC34A;
    align-items: center;
    justify-content: flex-end;
    transition: 3s all ease-in-out;
}

.slider:focus {
    background: #FF5722;
    width: 3%;
}
.begin {
    width: 100%;
    transition: 5s all ease-in-out;
    outline: none;
    display: flex;
    border-radius: 20px;
}
.point {
    min-width: 20px;
    min-height: 20px;
    border-radius: 20px;
    background: white;
    box-shadow:  0 0 10px #c1c1c1;
}
    </style>
    <body>
        <div class="begin">
        <div class="slider begin" tabindex="0" >
            <div class="point"></div>
        </div>
        </div>
    </body>
</html>
	<html>
	<style>
	.begin {
	background: #f1f1f1;
	width : 100%;

	}
	.anim {
	background: red;
	width: 0%;
	}
	div.slider {
	border-radius: 10px;
	height: 10px;
	min-width: 10px;
	display: flex;
	background: #8BC34A;
	align-items: center;
	justify-content: flex-end;
	transition: 3s all ease-in-out;
	}

	.slider:focus {
	background: #FF5722;
	width: 3%;
	}
	.begin {
	width: 100%;
	transition: 5s all ease-in-out;
	outline: none;
	display: flex;
	border-radius: 20px;
	}
	.point {
	min-width: 20px;
	min-height: 20px;
	border-radius: 20px;
	background: white;
	box-shadow: 0 0 10px #c1c1c1;
	}
	</style>
	<body>
	<div class="begin">
	<div class="slider begin" tabindex="0" >
	<div class="point"></div>
	</div>
	</div>
	</body>
	</html>