Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the common methods to achieve loding effects in css", the content is simple and clear, and I hope it can help you solve your doubts. Let me lead you to study and learn about "what are the common ways to achieve loding effects in css".

Loading

.loader {

Float: left

}

.loader {

Position: relative

Width: 5rem

Height: 5rem

}

.loader.small {

-webkit-transform: scale (.5)

Transform: scale (.5)

}

. loader.circle-line

. loader.circle-round {

Height: 5rem

}

/ * circle-line*/

. loader.circle-line span {

Position: absolute

Display: inline-block

Width: 1.5rem

Height: .5rem

Border-top-left-radius: .25rem

Border-bottom-left-radius: .25rem

Background: # 1ABC9C

Opacity:. 05

-webkit-animation: circle-line 1s ease infinite

Animation: circle-line 1s ease infinite

}

.loader.circle-line span:nth-child (1) {

Top: 50%

Left: 0

Margin-top:-.25rem

-webkit-animation-delay: .13s

Animation-delay: .13s

}

.loader.circle-line span:nth-child (2) {

Top: 1rem

Left: .5rem

-webkit-transform: rotate (45deg)

Transform: rotate (45deg)

-webkit-animation-delay: .26s

Animation-delay: .26s

}

.loader.circle-line span:nth-child (3) {

Left: 50%

Top: .5rem

Margin-left:-.75rem

-webkit-transform: rotate (90deg)

Transform: rotate (90deg)

-webkit-animation-delay: .39s

Animation-delay: .39s

}

.loader.circle-line span:nth-child (4) {

Right: .5rem

Top: 1rem

-webkit-transform: rotate (145deg)

Transform: rotate (145deg)

-webkit-animation-delay: .52s

Animation-delay: .52s

}

.loader.circle-line span:nth-child (5) {

Left: 3.5rem

Top: 50%

Margin-top:-.25rem

-webkit-transform: rotate (180deg)

Transform: rotate (180deg)

-webkit-animation-delay: .65s

Animation-delay: .65s

}

.loader.circle-line span:nth-child (6) {

Bottom: 1rem

Right: .5rem

-webkit-transform: rotate (- 145deg)

Transform: rotate (- 145deg)

-webkit-animation-delay: .78s

Animation-delay: .78s

}

.loader.circle-line span:nth-child (7) {

Left: 50%

Bottom: .5rem

Margin-left:-15px

-webkit-transform: rotate (- 90deg)

Transform: rotate (- 90deg)

-webkit-animation-delay: .91s

Animation-delay: .91s

}

.loader.circle-line span:nth-child (8) {

Bottom: 1rem

Left: .5rem

-webkit-transform: rotate (- 45deg)

Transform: rotate (- 45deg)

-webkit-animation-delay: 1.04s

Animation-delay: 1.04s

}

@ keyframes circle-line {

0% {

Opacity:. 05

}

100% {

Opacity:. 7

}

}

@-webkit-keyframes circle-line {

0% {

Opacity:. 05

}

100% {

Opacity:. 7

}

}

/ * circle-line-spin*/

.loader.loading-line-spin .loading-line-inner {

Width: 100%

Height: 100%

-webkit-animation: circle-line-spin 1.5s linear infinite

Animation: circle-line-spin 1.5s linear infinite

}

.loader.loader-line-spin span {

Position: absolute

Display: inline-block

Width: 1.5rem

Height: .5rem

Border-top-left-radius: .25rem

Border-bottom-left-radius: .25rem

Background: # 1ABC9C

Opacity:. 7

}

.loader.loader-line-spin span:nth-child (1) {

Top: 50%

Left: 0

Margin-top:-.25rem

}

.loader.loader-line-spin span:nth-child (2) {

Top: 1rem

Left: .5rem

-webkit-transform: rotate (45deg)

Transform: rotate (45deg)

}

.loader.loader-line-spin span:nth-child (3) {

Left: 50%

Top: .5rem

Margin-left:-.75rem

-webkit-transform: rotate (90deg)

Transform: rotate (90deg)

}

.loader.loader-line-spin span:nth-child (4) {

Right: .5rem

Top: 1rem

-webkit-transform: rotate (145deg)

Transform: rotate (145deg)

}

.loader.loader-line-spin span:nth-child (5) {

Left: 3.5rem

Top: 50%

Margin-top:-.25rem

-webkit-transform: rotate (180deg)

Transform: rotate (180deg)

}

.loader.loader-line-spin span:nth-child (6) {

Bottom: 1rem

Right: .5rem

-webkit-transform: rotate (- 145deg)

Transform: rotate (- 145deg)

}

.loader.loader-line-spin span:nth-child (7) {

Left: 50%

Bottom: .5rem

Margin-left:-15px

-webkit-transform: rotate (- 90deg)

Transform: rotate (- 90deg)

}

.loader.loader-line-spin span:nth-child (8) {

Bottom: 1rem

Left: .5rem

-webkit-transform: rotate (- 45deg)

Transform: rotate (- 45deg)

}

@ keyframes circle-line-spin {

0% {

Transform: rotate (0)

}

100% {

Transform: rotate (360deg)

}

}

@-webkit-keyframes circle-line-spin {

0% {

-webkit-transform: rotate (0)

}

100% {

-webkit-transform: rotate (360deg)

}

}

/ * circle-round*/

. loader.circle-round span {

Opacity:. 05

-webkit-animation: circle-round 1s ease infinite

Animation: circle-round 1s ease infinite

}

.loader.loader-round-fade span {

-webkit-animation: circle-round-fade 1s ease infinite

Animation: circle-round-fade 1s ease infinite

}

. loader.circle-round span

.loader.loader-round-fade span {

Position: absolute

Width: .8rem

Height: .8rem

Display: inline-block

Border-radius: 50%

Background: # 1ABC9C

}

.loader.circle-round span:nth-child (1)

.loader.loader-round-fade span:nth-child (1) {

Top: 50%

Left: 0

Margin-top:-.4rem

-webkit-animation-delay:-1.04s

Animation-delay:-1.04s

}

.loader.circle-round span:nth-child (2)

.loader.loader-round-fade span:nth-child (2) {

Top: .7rem

Left: .7rem

-webkit-animation-delay:-.91s

Animation-delay:-.91 s

}

.loader.circle-round span:nth-child (3)

.loader.loader-round-fade span:nth-child (3) {

Top: 0

Left: 50%

Margin-left:-.4rem

-webkit-animation-delay:-.78s

Animation-delay:-.78s

}

.loader.circle-round span:nth-child (4)

.loader.loader-round-fade span:nth-child (4) {

Right: .7rem

Top: .7rem

-webkit-animation-delay:-.65s

Animation-delay:-.65s

}

.loader.circle-round span:nth-child (5)

.loader.loader-round-fade span:nth-child (5) {

Right: 0

Top: 50%

Margin-top:-.4rem

-webkit-animation-delay:-.52s

Animation-delay:-.52 s

}

.loader.circle-round span:nth-child (6)

.loader.loader-round-fade span:nth-child (6) {

Bottom: .7rem

Right: .7rem

-webkit-animation-delay:-.39s

Animation-delay:-.39s

}

.loader.circle-round span:nth-child (7)

.loader.loader-round-fade span:nth-child (7) {

Bottom: 0

Left: 50%

Margin-left:-.4rem

-webkit-animation-delay:-.26s

Animation-delay:-.26s

}

.loader.circle-round span:nth-child (8)

.loader.loader-round-fade span:nth-child (8) {

Left: .7rem

Bottom: .7rem

-webkit-animation-delay:-.13s

Animation-delay:-.13s

}

@ keyframes circle-round {

0% {

Opacity:. 05

}

100% {

Opacity:. 7

}

}

@-webkit-keyframes circle-round {

0% {

Opacity:. 05

}

100% {

Opacity:. 7

}

}

@ keyframes circle-round-fade {

0% {

Opacity:. 25

Transform: scale (.2)

}

100% {

Opacity: 1

Transform: scale (1)

}

}

@-webkit-keyframes circle-round-fade {

0% {

Opacity:. 25

Transform: scale (.2)

}

100% {

Opacity: 1

Transform: scale (1)

}

}

/ * line-square*/

. loader.line-square {

Width: 6rem

Height: .8rem

}

. loader.line-square span {

Position: absolute

Top: 0

Width: .8rem

Height: .8rem

Display: inline-block

Background: # 1ABC9C

-webkit-animation: line-square 1s ease infinite

Animation: line-square 1s ease infinite

}

.loader.line-square span:nth-child (1) {

Left: 0

-webkit-animation-delay: .13s

Animation-delay: .13s

}

.loader.line-square span:nth-child (2) {

Left: 1.3rem

-webkit-animation-delay: .26s

Animation-delay: .26s

}

.loader.line-square span:nth-child (3) {

Left: 2.6rem

-webkit-animation-delay: .39s

Animation-delay: .39s

}

.loader.line-square span:nth-child (4) {

Left: 3.9rem

-webkit-animation-delay: .52s

Animation-delay: .52s

}

.loader.line-square span:nth-child (5) {

Left: 5.2rem

-webkit-animation-delay: .65s

Animation-delay: .65s

}

@ keyframes line-square {

0% {

Opacity: 1

Transform: scale (1.2)

-webkit-transform: scale (1.2)

}

100% {

Opacity:. 2

Transform: scale (.2)

-webkit-transform: scale (.2)

}

}

@-webkit-keyframes line-square {

0% {

Opacity: 1

Transform: scale (1.2)

-webkit-transform: scale (1.2)

}

100% {

Opacity:. 2

Transform: scale (.2)

-webkit-transform: scale (.2)

}

}

/ * line-round*/

. loader.line-round {

Width: 6rem

Height: .8rem

}

. loader.line-round span {

Position: absolute

Top: 0

Width: .8rem

Height: .8rem

Border-radius: 50%

Display: inline-block

Background: # 1ABC9C

-webkit-animation: line-round 1s ease infinite

Animation: line-round 1s ease infinite

}

.loader.line-round span:nth-child (1) {

Left: 0

-webkit-animation-delay: .13s

Animation-delay: .13s

}

.loader.line-round span:nth-child (2) {

Left: 1.3rem

-webkit-animation-delay: .26s

Animation-delay: .26s

}

.loader.line-round span:nth-child (3) {

Left: 2.6rem

-webkit-animation-delay: .39s

Animation-delay: .39s

}

.loader.line-round span:nth-child (4) {

Left: 3.9rem

-webkit-animation-delay: .52s

Animation-delay: .52s

}

.loader.line-round span:nth-child (5) {

Left: 5.2rem

-webkit-animation-delay: .65s

Animation-delay: .65s

}

@ keyframes line-round {

0% {

Opacity: 1

Transform: scale (1.2)

-webkit-transform: scale (1.2)

}

100% {

Opacity:. 2

Transform: scale (.2)

-webkit-transform: scale (.2)

}

}

@-webkit-keyframes line-round {

0% {

Opacity: 1

Transform: scale (1.2)

-webkit-transform: scale (1.2)

}

100% {

Opacity:. 2

Transform: scale (.2)

-webkit-transform: scale (.2)

}

}

/ * line-bounce*/

. loader.line-bounce {

Width: 6rem

Height: 2.5rem

}

. loader.line-bounce span {

Position: absolute

Top: 0

Width: .5rem

Height: 2.5rem

Border-radius: 5px

Display: inline-block

Background: # 1ABC9C

-webkit-animation: line-bounce 1s ease infinite

Animation: line-bounce 1s ease infinite

}

.loader.line-bounce span:nth-child (1) {

Left: 0

-webkit-animation-delay:-.65s

Animation-delay:-.65s

}

.loader.line-bounce span:nth-child (2) {

Left: 1.3rem

-webkit-animation-delay:-.78s

Animation-delay:-.78s

}

.loader.line-bounce span:nth-child (3) {

Left: 2.6rem

-webkit-animation-delay:-.91s

Animation-delay:-.91 s

}

.loader.line-bounce span:nth-child (4) {

Left: 3.9rem

-webkit-animation-delay:-.78s

Animation-delay:-78s

}

.loader.line-bounce span:nth-child (5) {

Left: 5.2rem

-webkit-animation-delay:-.65s

Animation-delay:-.65s

}

@ keyframes line-bounce {

0% {

Transform: scaleY (1)

}

50% {

Transform: scaleY (.3)

}

100% {

Transform: scaleY (1)

}

}

@-webkit-keyframes line-bounce {

0% {

-webkit-transform: scaleY (1)

}

50% {

-webkit-transform: scaleY (.3)

}

100% {

-webkit-transform: scaleY (1)

}

}

/ * circle-spin*/

. loader.circle-spin {

Border-radius: 50%

Border: .2rem solid rgba (0,0,0,.05)

Width: 4rem

Height: 4rem

Box-sizing: content-box

}

. loader.circle-spin. Loader-placeholder {

Position: absolute

Top:-.2rem

Left:-.2rem

Border-radius: 50%

Border: .2rem solid transparent

Border-top: .2rem solid # 1ABC9C

Width: 4rem

Height: 4rem

Box-sizing: content-box

-webkit-animation: circle-spin 1s ease infinite

Animation: circle-spin 1s ease infinite

}

@ keyframes circle-spin {

0% {

Transform: rotate (0)

}

100% {

Transform: rotate (360deg)

}

}

@-webkit-keyframes circle-spin {

0% {

-webkit-transform: rotate (0)

}

100% {

-webkit-transform: rotate (360deg)

}

}

These are all the contents of this article entitled "what are the common ways to achieve loding effects in css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.