Commit0c292b0

committed

Added Project #21 - Create CSS Spinner

1 parentbc6d4b9 commit0c292b0Copy full SHA for 0c292b0

File tree

+59

-0

lines changed

+59

-0

lines changed

3.49 MB

Lines changed: 14 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,14 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<htmllang="en">`
	`3`	`+<head>`
	`4`	`+<metacharset="UTF-8"/>`
	`5`	`+<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>`
	`6`	`+<metaname="viewport"content="width=device-width, initial-scale=1.0"/>`
	`7`	`+<linkrel="stylesheet"href="style.css"/>`
	`8`	`+<title>Spinner</title>`
	`9`	`+</head>`
	`10`	`+<body>`
	`11`	`+<divclass="spinner"></div>`
	`12`	`+<!-- <img src="img.jpg" alt="" /> -->`
	`13`	`+</body>`
	`14`	`+</html>`

Lines changed: 45 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,45 @@`
	`1`	`+body {`
	`2`	`+display: flex;`
	`3`	`+justify-content: center;`
	`4`	`+align-items: center;`
	`5`	`+min-height:100vh;`
	`6`	`+}`
	`7`	`+`
	`8`	`+.spinner {`
	`9`	`+width:300px;`
	`10`	`+height:300px;`
	`11`	`+border-radius:300px;`
	`12`	`+color:#343434;`
	`13`	`+box-shadow: inset-21px0021px currentColor;`
	`14`	`+clip-path:polygon(`
	`15`	`+0%0%,`
	`16`	`+067%,`
	`17`	`+25%66%,`
	`18`	`+25%25%,`
	`19`	`+75%25%,`
	`20`	`+76%62%,`
	`21`	`+76%61%,`
	`22`	`+76%61%,`
	`23`	`+100%61%,`
	`24`	`+100%0%`
	`25`	`+ );`
	`26`	`+animation: rotate1s linear infinite;`
	`27`	`+}`
	`28`	`+`
	`29`	`+@keyframes rotate {`
	`30`	`+0% {`
	`31`	`+transform:rotate(0deg);`
	`32`	`+ }`
	`33`	`+50% {`
	`34`	`+box-shadow: inset-10px0010px currentColor;`
	`35`	`+ }`
	`36`	`+100% {`
	`37`	`+transform:rotate(360deg);`
	`38`	`+ }`
	`39`	`+}`
	`40`	`+`
	`41`	`+/* clip-path explanation */`
	`42`	`+/* img {`
	`43`	`+ width: 75%;`
	`44`	`+ clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);`
	`45`	`+} */`

Comments

(0)