Material design upload button with progress

Developer
Gregor Adams
Size
3,374 Kb
Views
38,456
  1. Material design upload button with progress Previews
  2. Material design upload button with progress HTML Codes
  3. Material design upload button with progress CSS Codes

How do I make an material design upload button with progress?

A simple material design upload button with a progress indicator. What is a material design upload button with progress? How do you make a material design upload button with progress? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.

Material design upload button with progress Previews
IQ Test

Material design upload button with progress - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>material design upload button with progress</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<label class="button"> <input type="checkbox"/> <div class="circle"> <div class="clipper _1"></div> <div class="clipper _2"></div> </div> <div class="icon"> <div class="upload"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M38.71 20.07C37.35 13.19 31.28 8 24 8c-5.78 0-10.79 3.28-13.3 8.07C4.69 16.72 0 21.81 0 28c0 6.63 5.37 12 12 12h26c5.52 0 10-4.48 10-10 0-5.28-4.11-9.56-9.29-9.93zM28 26v8h-8v-8h-6l10-10 10 10h-6z"/></svg></div> <div class="done"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M38.71 20.07C37.35 13.19 31.28 8 24 8c-5.78 0-10.79 3.28-13.3 8.07C4.69 16.72 0 21.81 0 28c0 6.63 5.37 12 12 12h26c5.52 0 10-4.48 10-10 0-5.28-4.11-9.56-9.29-9.93zM20 34l-7-7 2.83-2.83L20 28.34l10.35-10.35 2.83 2.83L20 34z"/></svg></div> </div>
</label>
</body>
</html>

Material design upload button with progress - Script Codes CSS Codes

body { margin: 0; background: #616161;
}
.button { height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; border-radius: 100%; margin: -50px; overflow: hidden; cursor: pointer; background: #1976D2;
}
.button:active { -webkit-transform: scale(0.9); transform: scale(0.9);
}
.icon, .upload, .done, .circle, .clipper { position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.upload, .done { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity 0s linear; transition: opacity 0s linear;
}
.upload svg, .done svg { fill: white;
}
.done { opacity: 0;
}
input:checked ~ .icon .done { opacity: 1; -webkit-transition-delay: 2s; transition-delay: 2s;
}
.upload { opacity: 1;
}
input:checked ~ .icon .upload { opacity: 0; -webkit-transition-delay: 2s; transition-delay: 2s;
}
.clipper { width: 50%; overflow: hidden;
}
.clipper:before { content: ''; box-sizing: border-box; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: 0px solid white; -webkit-transition: -webkit-transform 0s linear; transition: -webkit-transform 0s linear; transition: transform 0s linear; transition: transform 0s linear, -webkit-transform 0s linear; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); background: #388E3C;
}
.clipper._1:before { border-top-left-radius: 100% 50%; border-bottom-left-radius: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;
}
.clipper._2:before { border-top-right-radius: 100% 50%; border-bottom-right-radius: 100% 50%; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%;
}
input:checked ~ .circle .clipper:before { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition-duration: 1s; transition-duration: 1s;
}
input:checked ~ .circle .clipper._1:before { -webkit-transition-delay: 1s; transition-delay: 1s;
}
.clipper._2, .clipper._2:before { left: auto; right: 0;
}
Material design upload button with progress - Script Codes
Material design upload button with progress - Script Codes
Home Page Home
Developer Gregor Adams
Username pixelass
Uploaded June 20, 2022
Rating 4.5
Size 3,374 Kb
Views 38,456
Do you need developer help for Material design upload button with progress?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gregor Adams (pixelass) Script Codes
Name
Fractal tree
Material button pure CSS
Pager-dots concept
Morphing search input
Numbers cube counter
Pure CSS marching ants border
RubiCSS cube
Flat webpage concept
Netfix logo animation CSS
Fractal curve generator
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!