`
chembo
  • 浏览: 938427 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

页面loading阴影效果

阅读更多
首先看效果图:


我是用jquery加载的,代码为:
$('body').append('<div id="loading" style="display:none;position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(//images/login-load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;"> '+ 
    			'<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;">Loading...</p>   '+
				'</div>');

控制显示与隐藏代码:
$("#loading").show();
$("#loading").hide();


该loading图标如图: 


  • 大小: 35.4 KB
  • 大小: 1.9 KB
分享到:
评论

相关推荐

    CSS3超酷的Loading页面

    在Loading动画中,动态的阴影效果可以使元素看起来更具动感。 7. **边框半径(Border Radius)**:CSS3的border-radius属性使得创建圆角变得简单,可以用于创建圆形或者椭圆形的Loading动画元素。 8. **Flexbox...

    jQuery Loading页面加载动画效果代码.zip

    "jQuery Loading页面加载动画效果代码.zip" 包含的资源正是为了实现这一目标,它提供了一种通过jQuery库创建的动态加载效果,尤其是采用了读取进度条的特效。 jQuery是一个广泛使用的JavaScript库,它简化了HTML...

    loading页面加载图标css3代码.zip

    6. **阴影效果(box-shadow和text-shadow)**:阴影效果可以为元素添加深度感,使得动画看起来更加立体。加载动画可能利用这些阴影效果来增加视觉层次感。 7. **颜色渐变(linear-gradient和radial-gradient)**:...

    纯CSS3绿色清新页面Loading加载动画特效

    设计师可能使用了圆形、线条、渐变等元素,配合CSS3的阴影效果 (`box-shadow` 或 `text-shadow`) 来增强视觉吸引力。 7. 响应式设计:考虑到网页的多设备兼容性,加载动画可能也采用了响应式设计,确保在不同屏幕...

    28种CSS3炫酷loading页面加载动画特效代码

    在网页设计中,用户体验至关重要,而“loading”页面加载动画就是提升用户体验的一种方式。随着CSS3技术的发展,设计师们能够创造出更多炫酷且富有创意的加载动画,吸引用户在等待页面加载时的注意力,减轻其等待...

    jQuery.spin.js自定义页面加载Loading动画代码

    jQuery.spin.js就是一个这样的插件,它允许开发者自定义页面加载的Loading动画效果,提供了一种优雅的方式来提升用户体验。 jQuery是一个广泛使用的JavaScript库,它的易用性和丰富的功能使其成为网页开发的首选...

    10种css3网页loading预加载动画特效源码.zip

    4. **阴影(Box Shadows)与文本阴影(Text Shadows)**:阴影效果可以为元素添加深度,增强视觉层次感。在预加载动画中,阴影可以被用来创造出3D效果的加载指示器。 5. **动画(Animations)与延迟(Delays)**:...

    纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip

    这里的`box-shadow`不仅可以设置阴影,还可以模拟发光,通过调整颜色和模糊半径(blur radius)可以达到不同的光效。 最后,为了让动画更加平滑,我们可以利用CSS3的硬件加速特性,通过`transform: translateZ(0)`...

    加载效果Loading

    在前端开发中,加载效果(Loading)是一种至关重要的用户体验设计元素。它通常出现在网页或应用程序内容正在加载时,为用户提供视觉反馈,表明系统正在进行后台处理,让用户知道他们需要等待一段时间才能看到完整的...

    进度条 loading 网站常用

    2. 3D进度条:比2D更具立体感,可能包含阴影效果或者使用不同的角度来展现进度,增加视觉层次感。 3. 动态进度条:通过动画效果,如渐变、旋转等,使进度条在视觉上更生动有趣。 4. 不规则形状进度条:打破传统的...

    28个纯css3 loading

    在现代网页设计中,加载动画(通常称为“loading”或“loader”)是不可或缺的一部分,它们为用户提供了网站内容正在加载的视觉反馈。本资源集合包含28个纯CSS3实现的加载动画特效,旨在为开发者提供易于集成、美观...

    CSS3订单提交按钮Loading代码.zip

    在本案例中,CSS3将被用来定义按钮的样式,包括其形状、颜色、边框、阴影、过渡效果以及关键的Loading动画。CSS3的动画功能,如`@keyframes`规则,使得我们可以在特定的时间间隔内改变元素的样式,创建出动态的视觉...

    一款很酷炫彩的CSS3 Loading页面加载动画.zip

    `box-shadow`可以创建阴影效果等。结合这些属性,我们可以创造出各种炫酷的Loading动画。 6. **性能优化**: 考虑到性能,我们应避免在动画中使用过于复杂的元素和计算,因为这可能会影响页面的渲染速度。同时,...

    css3唯美loading加载动画特效.zip

    8. **阴影(Shadows)**:`box-shadow`和`text-shadow`属性可以让元素产生阴影效果,增加立体感和深度。在某些loading元素上添加阴影,可以使其看起来更有层次。 9. **边框-radius**:CSS3的边框半径属性让元素可以...

    CSS3 animation超酷网页Loading加载进度条动画效果

    本文将深入探讨如何利用CSS3的animation属性制作出超酷的网页Loading加载进度条动画效果。 首先,我们需要了解CSS3的animation属性。CSS3的animation属性是一组属性的简写形式,包括`animation-name`、`animation-...

    53种CSS3编写,移动端常用loading 加载图。

    2. **过渡(Transitions)**: 过渡用于平滑地改变一个元素从一种样式到另一种样式,这在创建loading动画的渐变效果中非常有用。 3. **动画(Animations)**: CSS3动画允许我们定义一系列关键帧,并按照时间顺序播放这些...

    发光Loading加载特效.zip

    发光Loading加载特效是一种创新的网页UI设计元素,主要用于在页面内容加载时提供视觉反馈,提升用户体验。这个特效是通过CSS3技术实现的,利用了其强大的动画和过渡功能,为用户呈现了一种动态且吸引人的视觉体验。...

    纯CSS3创意loading文字特效

    "纯CSS3创意loading文字特效"就是一种独特且吸引人的加载动画设计,它利用CSS3的特性,将加载过程与文字相结合,形成一种动态的视觉效果。 首先,我们要了解CSS3中的关键帧动画(@keyframes)。在这个特效中,关键...

    纯CSS3加载动画Loading特效代码.zip

    在现代网页设计中,加载动画(Loading Animation)是不可或缺的一部分,它们可以提升用户体验,尤其是在页面内容加载时提供视觉反馈,让访客知道网站正在努力处理请求。本资源“纯CSS3加载动画Loading特效代码.zip”...

Global site tag (gtag.js) - Google Analytics